16. Iframes (Embedding the Web)
Cross-origin documents aur external widgets ko securely apni web app ka hissa banayein.
1. Inline Frames Concept
Basic: Ek page ke andar square window banakar dusri website open karna Iframe kehlata hai.
Pro: <iframe src="https://youtube.com/embed/..."> ek completely isolated browsing context banata hai. Iframe ke andar wali website ka apna poora separate Window aur DOM object hota hai. Parent webpage ki JavaScript normally is andar ke document ko access nahi kar sakti Same-Origin Policy (SOP) ki wajah se, isliye data leak nahi hota.
2. Heavy Lifting Uses
Pro: Hum iframes ka use kyun karte hain?
- Third-party widgets: Google Maps, YouTube video embeds, ya Facebook Comments script iframes use karte hain taaki unka complex CSS/JS aapki parent website se conflict (clash) na kare.
- Sandboxed Environments: Code editors (CodePen/JSFiddle) users ka output run karne ke liye iframes banate hain taaki koi malicious JavaScript parent tab ko hack na kar sake.
3. Critical Security: Clickjacking & X-Frame-Options
Pro: Agar attacker aapki Banking site ko apne malicious webpage pe Iframe banakar Invisible (0 opacity) set kar de, aur upar fake 'Play Game' button laga de. Toh click transparent ho kar banking site ke 'Transfer Money' par padega. Isey Clickjacking Attack kehte hain.
Modern servers X-Frame-Options: DENY ya Content-Security-Policy: frame-ancestors HTTP headers bhejte hain jisse browser website ko iframe mein load hone se aggressively Block kar deta hai.
4. Modern Iframe Attributes (Sandbox)
Pro: Agar aap untrusted site embed kar rahe hain toh sandbox="" attribute us iframe ki powers chheen leta hai (jaise forms submit karna ya popup tab open karna). Features restore karne ke liye specific flags pass kiye jate hain (allow-scripts allow-forms). loading="lazy" embed ko initial page load resources churane se rokta hai.