Iframe Embedding & Sandboxing
What is an Iframe?
Think of a picture-in-picture window on a television, or a small window on your wall showing a live feed of the garden outside. You are looking at a completely different space through a cut-out window in your room.In HTML, an <iframe> (Inline Frame) embeds a completely separate, independent HTML webpage inside your current page.
Because loading external scripts can be dangerous, we use the sandbox attribute to restrict what the embedded webpage is allowed to do.
Why does it matter?
Iframes are widely used to embed third-party widgets like Google Maps, YouTube video players, Twitter feeds, or payment portals without forcing the user to leave your website.How to write it
<iframe src="https://maps.org" sandbox="allow-scripts"></iframe>
iframe scope
Sandboxed Context
Common Mistakes
sandbox attribute, that site could execute malicious scripts or redirect your visitors. Always restrict iframes using sandbox.Quick Reference
<iframe> — Embeds an external page.sandbox="permissions" — Restricts embedded scripts and behaviors (e.g., sandbox="allow-scripts").Your Task
Create an `<iframe>` tag pointing to 'https://maps.org' with a `sandbox` attribute set to 'allow-scripts'.
index.html
Type code above to start the lesson.
Live Preview