By WebNest Studio Engineering Team
HTML Tutorial
HTML iframe Concepts
An <iframe> embeds another HTML document inside the current page, rendering it in its own independent browsing context. It's the mechanism behind embedded YouTube videos, Google Maps widgets, payment forms, and third-party embeds of all kinds.
Why it matters
Maps, videos, payment forms and embedded widgets are all pages inside your page, and that is what an iframe is. Because the embedded content comes from someone else, it is also a security boundary. Knowing how to restrict what an embedded page may do is part of building safely.
Common Use Cases
Iframes are typically used to embed content that lives on a different domain or that needs to remain isolated from the host page — a video player, an interactive map, a social media post embed, or a third-party payment widget. Because the embedded document runs in its own context, its scripts and styles don't interfere with the host page's scripts and styles, and vice versa.
Security Considerations and Sandboxing
Embedding third-party content inside an iframe introduces real security considerations, because the embedded page can, by default, run scripts, submit forms, and open popups. The sandbox attribute restricts what an embedded document is allowed to do, and using it with no value applies the strictest possible set of restrictions; specific permissions can then be re-enabled individually.
sandbox(no value) — applies all restrictions: no scripts, no form submission, no popups, treats content as unique origin.sandbox="allow-scripts"— re-enables JavaScript execution inside the iframe.sandbox="allow-same-origin"— lets the embedded content be treated as being from its own origin rather than a unique, restricted one.loading="lazy"— defers loading the iframe until it's near the viewport, improving page load performance.
Accessibility of Embedded Content
Every <iframe> should include a title attribute describing its purpose (e.g. "Embedded YouTube video: Product Demo"), since screen readers announce this title when a user encounters the frame, giving them context before deciding whether to enter it.
Example
A sandboxed, accessible video embed
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Embedded YouTube video: Product demo"
width="560"
height="315"
loading="lazy"
sandbox="allow-scripts allow-same-origin allow-presentation"
allowfullscreen>
</iframe>Embeds a 560x315 YouTube video player within the page, loaded lazily as the user scrolls near it, restricted by the sandbox to only the explicitly allowed capabilities, and announced to screen readers as "Embedded YouTube video: Product demo."Common Mistakes
- Embedding third-party iframes with no sandbox attribute at all, granting the embedded content full, unrestricted capabilities.
- Forgetting the title attribute, leaving screen reader users with no context about what the frame contains.
- Loading many iframes eagerly on page load instead of using loading="lazy", hurting initial page performance.
- Assuming sandbox alone guarantees safety — it reduces risk but does not eliminate all concerns with fully untrusted content.
Exercise
Embed the page https://example.com in an iframe that is 600 by 300 pixels, has the accessible title Example site, is loaded lazily, and is sandboxed so that the embedded page may run scripts but nothing else.
Expected result: a framed area showing example.com.
<h2>Embedded page</h2>
<!-- TODO: a sandboxed, titled, lazily loaded iframe -->Show hints
- The
titleattribute tells screen-reader users what the frame contains. sandboxwith no value applies every restriction; listingallow-scriptslifts just that one.
Show solution
<h2>Embedded page</h2>
<iframe
src="https://example.com"
title="Example site"
width="600"
height="300"
loading="lazy"
sandbox="allow-scripts">
</iframe>Quick quiz
1. What does an iframe do?
- A. Draws a border around content
- B. Loads a script
- C. Embeds another HTML page inside the current page
- D. Creates a popup window
Show answer
C. The embedded document has its own separate browsing context.
2. What is the effect of sandbox="" with an empty value?
- A. No restrictions are applied
- B. All restrictions are applied: no scripts, forms, popups or same-origin access
- C. The frame is hidden
- D. Only scripts are blocked
Show answer
B. Individual permissions are then granted by listing tokens such as allow-scripts.
3. Why give an iframe a title attribute?
- A. It is shown as a caption
- B. It improves loading speed
- C. It is required for the frame to load
- D. Screen readers announce it, so users know what the frame contains
Show answer
D. Without it, the frame is announced only as "frame".
Interview questions
What are the security risks of iframes and how are they reduced?
Show answer
Embedded third-party content could run scripts, open popups, submit forms or try to navigate your page. The sandbox attribute removes those abilities unless they are explicitly allowed, and the allow attribute controls access to features such as the camera. In the other direction, your own page can be embedded by a malicious site to trick users into clicking, which is called clickjacking; it is prevented by sending the Content-Security-Policy: frame-ancestors header or X-Frame-Options.
Can a page read or change the content of an iframe it embeds?
Show answer
Only if both documents have the same origin, meaning the same scheme, host and port. For a different origin, the same-origin policy blocks all direct access to the frame's DOM. The two pages can still communicate deliberately by sending messages with window.postMessage, and the receiver should check the origin of each message before trusting it.
Key Points to Remember
- iframe embeds another document in an isolated browsing context, commonly used for videos, maps, and third-party widgets.
- The sandbox attribute restricts embedded content's capabilities; start with no value and re-enable only what's needed.
- Always add a descriptive title attribute for screen reader users.
- Use loading="lazy" to avoid loading off-screen iframes until needed.
Practice in the playground
Write and run your own code for this topic, or start from the exercise or an example. Shows a live preview of your HTML, CSS and JavaScript. Your code for each topic is kept in this browser.
Run the examples
Change an input, predict the result, then compare it with the output. Explain why the result changes.
Written by
WebNest Studio Engineering Team
Practical lessons from developers working with Java, Python, React, databases and production systems.
Led by Vansh Duggal, Founder, WebNest Studio · Full-stack & software engineering