Working with <iframe> in HTML

The <iframe> tag allows you to embed content from other sources (external sites or documents) into your web page.

Technically, an iframe creates a nested browsing context. This means:

  • Content inside the iframe is isolated from the parent page.
  • JavaScript and CSS do not “leak” between the iframe and the parent.

A common example is platforms like CodePen or Glitch, where you write code in one part of the page and see the result in a preview box—that preview is an iframe.

1. Basic Usage

You can embed a page with:

Code Block Loading...

Or load an external URL:

Code Block Loading...

By default, iframes are 300x150 pixels. You can set dimensions with attributes or CSS:

Code Block Loading...

2. srcdoc Attribute

The srcdoc attribute lets you embed inline HTML directly inside the iframe:

Code Block Loading...

Note: Not supported in IE and Edge 18 or lower.

3. sandbox Attribute

The sandbox attribute restricts what the iframe can do.

  • No sandbox (default): everything is allowed.html

<iframe src="page.html"></iframe>

  • Empty sandbox: nothing is allowed.html

<iframe src="page.html" sandbox=""></iframe>

  • Selective sandbox: allow specific features by listing them (space-separated).

Examples:

  • allow-forms → permits form submissions
  • allow-modals → allows modal dialogs (e.g., alert())
  • allow-orientation-lock → permits screen orientation lock
  • allow-popups → allows popups (target="_blank", window.open())
  • allow-same-origin → treats iframe content as same origin
  • allow-scripts → allows scripts (but not popups)
  • allow-top-navigation → allows navigation of the top-level browsing context

4. allow Attribute

The allow attribute is experimental (Chromium-based browsers only). It provides fine-grained control over features shared between the parent and iframe.

Examples of features you can enable:

  • accelerometer → access to Accelerometer API
  • ambient-light-sensor → access to AmbientLightSensor API
  • autoplay → autoplay audio/video
  • camera → access to webcam via getUserMedia
  • display-capture → screen capture via getDisplayMedia
  • fullscreen → fullscreen mode
  • geolocation → access to Geolocation API
  • gyroscope, magnetometer → sensor APIs
  • microphone → access to microphone via getUserMedia
  • midi → Web MIDI API
  • payment → Payment Request API
  • speaker → play audio through device speakers
  • usb → WebUSB API
  • vibrate → Vibration API
  • vr → WebVR API

5. Referrer Policy

When loading an iframe, the browser sends a Referer header (note the misspelling, standardized in RFC 1945). This tells the iframe which page is embedding it.

You can control this with the referrerpolicy attribute:

  • no-referrer-when-downgrade → default; omits referrer when parent is HTTPS and iframe is HTTP
  • no-referrer → no referrer sent
  • origin → sends only origin (protocol, domain, port)
  • origin-when-cross-origin → full referrer for same-origin, origin-only for cross-origin
  • same-origin → sends referrer only for same-origin requests
  • strict-origin → sends origin if both parent and iframe use HTTPS; nothing if iframe is HTTP
  • strict-origin-when-cross-origin → full referrer for same-origin; origin-only for HTTPS cross-origin; nothing for HTTP
  • unsafe-url → always sends full referrer (origin + path), even across HTTP

With <iframe>, you can embed external content safely, control permissions with sandbox and allow, and manage privacy with referrerpolicy.