What Is an Iframe?
An iframe is an HTML element that displays another document inside the current page. It is simple to add, but browser security rules determine what it can load and what the parent page can access.
An iframe creates a page inside a page
The HTML <iframe> element creates an inline frame, which browsers treat as a separate browsing context embedded inside the parent document. Developers use iframes for video players, maps, payment flows, dashboards, forms, documentation examples and other content that benefits from isolation.
<iframe src="https://example.com/embed" title="Example embed" width="100%" height="500" loading="lazy" ></iframe>
The src points to the document you want to display. A useful title helps screen-reader users understand the purpose of the frame. Width, height, loading, sandbox, allow and referrer policy attributes control presentation, loading behavior and capabilities.
How an iframe request works
- The parent page creates an iframe and gives the browser a destination URL.
- The browser requests that destination as a separate document.
- The destination can return framing rules such as
X-Frame-Optionsor CSPframe-ancestors. - If the framing policy allows the parent, the browser renders the child document inside the frame.
- The parent and child still remain separate security contexts, especially when they use different origins.
Important iframe attributes
Scroll horizontally to read every column.
| Attribute | What it does | Practical guidance |
|---|---|---|
src | Sets the document loaded inside the frame. | Use a complete HTTPS URL for third-party embeds. |
title | Provides an accessible name for the iframe. | Describe the framed content or task, not the HTML element. |
loading | Lets you request lazy or eager loading. | Use lazy loading for non-critical frames below the fold. |
sandbox | Applies restrictions to scripts, forms, navigation and other capabilities. | Start restrictive and add only the tokens the embed genuinely requires. |
allow | Controls selected browser features through Permissions Policy. | Grant only capabilities such as fullscreen or autoplay when needed. |
referrerpolicy | Controls referrer information sent with iframe requests. | Choose a policy that matches your privacy and integration needs. |
Why cross-origin iframes are different
A page can often display a cross-origin iframe without CORS. What it normally cannot do is read or modify the framed page's DOM because the same-origin policy separates documents from different origins. This is why "the iframe loads" and "my JavaScript can access the iframe" are two different questions.
When two cooperating origins need to exchange data, they can use carefully validated window.postMessage() communication instead of trying to bypass the same-origin policy.
Why websites block iframe embedding
Sites commonly restrict framing to reduce clickjacking risk, protect authenticated interfaces, control where branded experiences appear, or keep sensitive workflows inside approved parent applications. The two main response controls are X-Frame-Options and Content Security Policy frame-ancestors.
X-Frame-Options: DENY blocks framing. SAMEORIGIN allows only the same origin. CSP frame-ancestors is more flexible because it can name specific trusted parent origins. The obsolete X-Frame-Options ALLOW-FROM value should not be used as a modern allowlist.
When an iframe is the right choice
- A provider publishes an official embed URL or player.
- You need strong document-level isolation from the parent application.
- The embedded experience has its own navigation, runtime or release cycle.
- You need to integrate content that is intentionally delivered as a framed widget.
When to consider an alternative
If the content is central to your own page, needs deep SEO integration, must share application state tightly, or the provider blocks framing, an API, server-rendered integration, web component, SDK or ordinary link may be a better fit. See the iframe alternatives comparison for the tradeoffs.
Technical references
Common questions
What does iframe stand for?
Iframe means inline frame. The HTML iframe element creates a nested browsing context that can display another document inside the current page.
Can an iframe load a page from another domain?
Yes, cross-origin iframes are common. The destination can still block framing with X-Frame-Options or CSP frame-ancestors, and the same-origin policy normally prevents the parent from reading the child page's DOM.
Does an iframe hurt SEO?
An iframe is not automatically an SEO problem, but important primary content should usually live in the page's own HTML when you want that page to be understood and indexed for the content. Treat framed third-party content as an integration, not a substitute for your page's core copy.
What is the difference between iframe sandbox and frame-ancestors?
sandbox restricts capabilities of content after the iframe is allowed to load. CSP frame-ancestors is sent by the framed page and controls which parent origins are allowed to embed it.
Why does an iframe say refused to connect?
The destination commonly blocks framing with X-Frame-Options or CSP frame-ancestors, but redirects, authentication, mixed content, cookies, network errors and application logic can also cause a failed embed.