# iframe (Inline Frame)

URL: https://softwaredictionary.org/terms/iframe
Category: Web Development
Last updated: 2026-09-30
Pronunciation: EYE-frame

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 safely

```html
<!-- 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>
```

## Frequently asked questions

**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.

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt