Lesson 15 · How browsers use HTML

Iframes and embeds

An iframe puts a whole second web page inside yours. Follow one five-line page from cafe.example as the browser reads it: the parser makes an empty box, the box sends its own request to map.example, and a second document with its own DOM fills it. Then see the walls between the two pages: contentDocument comes back null, postMessage gets through, sandbox takes powers away, and a site can refuse to be framed at all.

12 min10 steps5 questionsAdvanced

Fig 15 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01An iframe on your page loads https://map.example/cafe. Which DOM gains the map page's elements?

The frame's page is parsed into its own document with its own DOM and window. Your DOM keeps just the iframe element.

02You leave out width and height on an iframe. How big is the box?

The default size of an iframe is 300 CSS pixels wide and 150 tall. Set width and height (or CSS) to change it.

03A script on https://cafe.example reads frame.contentDocument for a frame showing https://map.example/cafe. What does it get?

An origin is scheme, host and port. The hosts differ, so the same-origin policy hides the frame's document and contentDocument is null.

04What is the safe way for the two pages to share data?

postMessage passes a message between windows. The sender names the origin it expects to receive it; the receiver checks event.origin before trusting it.

05A bank does not want any other site to show its pages in a frame. What does it send?

The embedded site decides with a response header. frame-ancestors 'none' (or the older X-Frame-Options: DENY) makes browsers refuse to show the page in any frame.

Key terms

Glossary

iframe: Inline frame: an element that embeds a second, separate web page inside the current one.
Nested browsing context: The window an iframe creates: it has its own document, DOM and history, inside the outer page.
about:blank: The empty document every new frame holds until its src page arrives.
Origin: The scheme, host and port of a URL together, such as https, cafe.example and 443.
Same-origin policy: The browser rule that stops a page reading or changing another origin's document.
postMessage: A JavaScript method that sends a message from one window to another, even across origins.
sandbox: An iframe attribute that takes powers away from the framed page; each allow- token gives one back.
frame-ancestors: A Content-Security-Policy directive a site sends to say which pages, if any, may frame it.

Fine print

Notes and sources

The five lines are real HTML. Saved as index.html on a web server, they show a page with a heading and a 400 × 300 frame. The names cafe.example and map.example use the .example ending, which is reserved for examples, so they point nowhere real.
Until the src page arrives, every new frame holds an "initial about:blank" document that already has html, head and body elements. It is replaced when the real page loads.
The outer page's load event waits for its frames (and images and stylesheets) to finish loading, but the parser itself never stops for a frame.
Listing both allow-scripts and allow-same-origin on a frame from your own origin lets the framed page remove its own sandbox, so the standard warns against that pairing.
Iframes embed web pages. For media there are <img>, <video> and <audio>; <embed> and <object> embed external content such as a PDF, and are rarely needed today.

Quiz Unlocks after the last step.