iframe Embed
Definition
An iframe is an HTML element that creates a nested browsing context: a complete, independent document rendered inside a box on the parent page. It has its own address, its own scripts and its own scrolling, and by default the two documents cannot read each other because they are different origins. The markup is short — a src attribute for the address, width and height, a title for screen readers, and often a lazy loading hint so the frame is fetched only when it scrolls into view. A sandbox attribute can strip the framed document of capabilities such as running scripts, submitting forms or navigating the top window. Anything reachable at an address can go inside one, provided the source permits framing.
Why It Matters
An iframe is what lets a file hosted in one place appear inside a site built somewhere else, with no upload, no conversion and no second copy to keep in step. It is also the boundary that keeps the two apart, since a framed document cannot reach into its parent — which is why embedding a third-party demo is safer than pasting its code into your own page. The limits show up quickly, though. Height does not adapt to content, the scroll position of a cross-origin frame cannot be read, and a source that sends X-Frame-Options DENY will give you a blank box whatever you do.
How It Works
When the parser meets an iframe, the browser starts a separate fetch for the src address and builds a second document tree inside the element's box. Response headers on that second request decide whether it may render: X-Frame-Options set to DENY or SAMEORIGIN, or a frame-ancestors list in a Content-Security-Policy header, will block it. If it does render, the two documents are isolated by the same-origin policy, and the only sanctioned channel between them is postMessage, with each side checking the other's origin. The sandbox attribute subtracts permissions and each allow token adds one back, so a sandbox granting only scripts permits JavaScript and nothing else. Clickjacking protections exist precisely because framing is powerful, and a page that must never be framed says so in a header.
Real-World Example
A developer publishes an interactive pricing calculator as a single HTML file at cobalt-calculator.99helpers.site and drops one iframe into the company's marketing page. Visitors use the calculator without leaving that page, and the developer ships a fix simply by replacing the file at the same address. The marketing site's own code is never touched, and a bug in the calculator cannot affect the page around it.
Common Mistakes
- ✕Setting a percentage height on an iframe whose parent has no height of its own — the box collapses and the embed looks like it failed to load
- ✕Trying to resize the frame from the parent when the source sits on another domain — the browser blocks it, and the fix is a postMessage handshake the source has to cooperate with
- ✕Omitting the title attribute — screen readers announce the frame as unlabelled and automated accessibility checks flag it
Related Terms
Embed Code
An embed code is a snippet of HTML you paste into a page so that content hosted somewhere else appears inside it. Most embed codes are an iframe; some are a script tag.
iframe Sandbox
The sandbox attribute on an HTML iframe strips the embedded page of most privileges, then lets you hand back only the ones you name. It is how a host page displays untrusted content without giving it the run of the browser.
X-Frame-Options
An older response header that tells the browser whether a page may be displayed inside a frame or iframe. It takes two useful values, DENY and SAMEORIGIN.
Same-Origin Policy
The browser rule that keeps code loaded from one origin from reading data belonging to another. It is the foundation the rest of web security is built on.
Static Hosting
Static hosting is a service that stores a folder of finished web files and serves them over HTTP, without running any application code of yours. You upload the folder; the host answers requests for the files in it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →