Embedding Content — iframe, embed, object

A Complete Browsing Context, Embedded Inside Your Page

An <iframe> embeds an entirely separate HTML document — with its own DOM, its own window object, its own navigation history — inside a rectangle on your page. This is how embedded YouTube videos, Google Maps, and payment widgets from a different domain all actually work.

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  title="Video player"
  allowfullscreen
></iframe>

Restricting What Embedded Content Is Allowed to Do

By default, an iframe's embedded document can run scripts, submit forms, open popups, and navigate the top-level page — all the same capabilities as a normal page. The sandbox attribute strips these capabilities away by default, then lets you re-enable only the specific ones you actually need.

<iframe src="https://example.com/widget" sandbox></iframe>
<!-- Scripts, forms, popups, top-navigation — all disabled -->

<iframe
  src="https://example.com/widget"
  sandbox="allow-scripts allow-same-origin"
></iframe>
<!-- Scripts can run, but forms still can't submit and it still can't
     navigate the parent page -->

The Older, Narrower Embedding Elements

<embed src="document.pdf" type="application/pdf" width="600" height="400">

<object data="document.pdf" type="application/pdf" width="600" height="400">
  <p>Your browser can't display this PDF. <a href="document.pdf">Download it instead</a>.</p>
</object>

Both elements predate the modern web and were originally designed for browser plugins (Flash, Java applets) that no longer exist in any current browser. object is generally preferred over embed today specifically because it supports genuine fallback content between its opening and closing tags — embed is a void element with no fallback mechanism at all. For most modern embedding needs (video, maps, third-party widgets),iframe is the correct default choice; reach for object mainly for directly embedding a file type like a PDF.

What an Embedded Page Cannot See or Do

When an iframe's src points to a different origin (a different domain, protocol, or port) than the parent page, the browser's same-origin policy blocks the parent page and the iframe from directly reading each other's content or JavaScript state — neither can inspect the other's DOM or variables, by design.

// In the parent page's JavaScript, trying to read a cross-origin iframe's content:
const frame = document.querySelector('iframe')
console.log(frame.contentDocument)
// SecurityError: Blocked a frame with origin "https://yoursite.com" from
// accessing a cross-origin frame.

This is a foundational browser security boundary, not a bug or a limitation you can work around from the parent page's side — controlled cross-origin communication between a page and an embedded iframe is only possible through the explicit, opt-in window.postMessage() API, a JavaScript topic outside the scope of this HTML-focused track.

The Attack sandbox and Framing Policy Exist to Prevent

Clickjacking is an attack where a malicious page embeds a legitimate page (a bank's transfer-money button, for example) inside an invisible iframe, positioned exactly over a button the attacker wants the victim to click on the visible page — the victim believes they're clicking the attacker's harmless-looking button, but they're actually clicking the real, invisible button underneath.

<style>
  iframe { opacity: 0.01; position: absolute; top: 100px; left: 200px; z-index: 10; }
</style>
<button>Click here to win a prize!</button>
<iframe src="https://real-bank.com/transfer-funds"></iframe>
<!-- The invisible iframe's real "Confirm Transfer" button sits exactly
     on top of the fake "win a prize" button -->

This is defended against primarily on the embedded page's side, not the embedding page's — a site that should never be framed by another origin sends the X-Frame-Options HTTP header or a frame-ancestors Content-Security-Policy directive, telling browsers to refuse to render it inside any iframe at all.

A Third-Party Widget That Broke Layout, at a Portland Real Estate Startup

<iframe src="https://maps.example.com/embed?address=..." width="100%" height="400"></iframe>
<!-- The iframe's OWN internal content can be taller than 400px on some
     addresses — the parent page has no way to know or automatically adjust,
     since it cannot read the cross-origin iframe's actual content height -->

Four Misconceptions About Embedding Content

4 Interview Questions — With Complete Answers

Embedding Mistakes Beginners Make Constantly

Issues You Will Hit Embedding Content — And Exactly Why