iframe

Q: How do I stop my site from being shown in an iframe?

Send the header Content-Security-Policy: frame-ancestors 'none', or use 'self' to allow only your own pages. The older X-Frame-Options: DENY header does the same in legacy browsers.

Inline Frame

Pronunciation: EYE-frame

Updated September 30, 20262 min read

In short

An iframe is an HTML element that embeds another web page inside the current page, commonly used for videos, maps, payment forms and third-party widgets.

What is an iframe?

An iframe, short for inline frame, is created with the <iframe> tag and displays a separate HTML document inside a rectangle on your page. The embedded page has its own DOM, styles, and scripts, and it loads from its own URL, which may belong to a completely different website. Embedded videos, maps, social media posts, ads, and hosted payment or login forms are usually iframes.

The src attribute sets the URL to load, title describes the frame for screen readers, and width and height set its size. Browsers keep the two pages apart with the same-origin policy: if the iframe comes from another origin, neither page can read the other's DOM or cookies, and they can only exchange messages with window.postMessage(). The sandbox attribute restricts the embedded page further, blocking scripts, forms, or popups unless they are explicitly allowed, and the allow attribute controls access to features such as the camera or fullscreen mode.

An iframe is like a TV mounted on your living room wall: it is part of your room, but what plays on it comes from somewhere else and you don't control it. That isolation is useful. Payment providers, for instance, use iframes so card details go straight to them and never touch the merchant's page, which reduces the merchant's security burden.

The main risk runs the other way: in clickjacking, an attacker loads your site invisibly inside their own iframe and tricks users into clicking your buttons. Sites prevent this by sending the Content-Security-Policy: frame-ancestors header, or the older X-Frame-Options, to control who may frame them. An iframe is also different from embedding a widget with a script tag: a script runs inside your page with full access to it, while an iframe keeps the embedded content in a separate document.

Key takeaways

An <iframe> embeds a separate web page, with its own DOM and scripts, inside the current page.
The same-origin policy isolates cross-origin iframes; they talk to the parent through postMessage().
The sandbox and allow attributes limit what an embedded page can do.
Sites defend against clickjacking with the CSP frame-ancestors directive or X-Frame-Options.
Give every iframe a title for accessibility, and lazy load iframes that start off-screen.

Example

Embedding a sandboxed map and listening to it safelyhtml

<!-- Embed a map from another site, with restrictions -->
<iframe
  src="https://maps.example.com/embed?place=city-hall"
  title="Map showing the location of City Hall"
  width="600" height="400"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
></iframe>
<script>
  // Only trust messages that come from the embedded site
  window.addEventListener("message", (event) => {
    if (event.origin !== "https://maps.example.com") return;
    console.log("Map says:", event.data);
  });
</script>

Readers ask

How do I stop my site from being shown in an iframe?

Send the header Content-Security-Policy: frame-ancestors 'none', or use 'self' to allow only your own pages. The older X-Frame-Options: DENY header does the same in legacy browsers.

Can JavaScript access the content inside an iframe?

Only when the iframe has the same origin as the parent page. For cross-origin iframes, the browser blocks direct access, and the two pages must communicate with postMessage().

Are iframes bad for SEO?

Search engines may index content inside an iframe, but they usually credit it to the embedded URL, not to your page. Don't put your main content in an iframe if you want it to rank as part of your page.