Learn the essentials of using the HTML iframe tag

The HTML iframe tag enables us to embed content from other sites into our web pages. This tag creates a separate browsing context, ensuring that the content within the iframe does not interfere with the parent page. JavaScript and CSS elements are contained within the iframe and do not spill over to the parent page.

Many websites utilize iframes for various purposes. You may be familiar with platforms like Codepen or Glitch, where you can code in one section of the page and immediately view the results in an embedded box. This functionality is made possible through the use of iframes.

To create an iframe, use the following syntax:

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

It is also possible to load an absolute URL:

<iframe src="https://site.com/page.html"></iframe>

You can adjust the dimensions of the iframe by specifying the width and height parameters or by applying CSS styles. By default, the iframe will be displayed in a 300x150 pixels box:

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

The srcdoc attribute allows you to include inline HTML content directly within the iframe. It serves as an alternative to using the src attribute. However, it is worth noting that srcdoc lacks support in Edge 18 and previous versions, as well as IE:

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

Sandbox

The sandbox attribute offers control over the operations permitted within an iframe. If no value is specified, all operations are allowed:

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

To disallow all operations, set sandbox to an empty string:

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

Specific operations can be enabled by adding options to the sandbox attribute. Multiple options can be specified by separating them with spaces. Below is an incomplete list of available options:

  • allow-forms: allows form submissions
  • allow-modals: permits the opening of modal windows and using the alert() function in JavaScript
  • allow-orientation-lock: allows locking the screen orientation
  • allow-popups: enables popups, including the usage of window.open() and target="_blank" links
  • allow-same-origin: treats the loaded resource as same origin
  • allow-scripts: allows scripts to run within the iframe (excluding popup creation)
  • allow-top-navigation: grants the iframe access to the top-level browsing context

Allow

The allow attribute is currently experimental and supported only by Chromium-based browsers. It represents the future of resource sharing between the parent window and the iframe. This attribute allows the fine-grained permission of specific features, including:

  • accelerometer: grants access to the Sensors API Accelerometer interface
  • ambient-light-sensor: provides access to the Sensors API AmbientLightSensor interface
  • autoplay: allows autoplay for video and audio files
  • camera: permits access to the camera via the getUserMedia API
  • display-capture: enables access to screen content using the getDisplayMedia API
  • fullscreen: grants access to fullscreen mode
  • geolocation: allows access to the Geolocation API
  • gyroscope: provides access to the Sensors API Gyroscope interface
  • magnetometer: grants access to the Sensors API Magnetometer interface
  • microphone: allows access to the device microphone via the getUserMedia API
  • midi: enables access to the Web MIDI API
  • payment: grants access to the Payment Request API
  • speaker: allows playing audio through the device speakers
  • usb: enables access to the WebUSB API
  • vibrate: grants access to the Vibration API
  • vr: enables access to the WebVR API

Referrer

When loading an iframe, the browser sends vital information about the loading entity in the Referer header. It’s important to note that the misspelling of “referrer” is intentional and has persisted since its initial introduction.

The referrerpolicy attribute determines the referrer to send when loading an iframe. The referrer is an HTTP header that identifies the loading entity. The following values are allowed:

  • no-referrer-when-downgrade: This is the default behavior and sends the referrer when the current page is loaded over HTTPS and the iframe is loaded over HTTP.
  • no-referrer: No referrer header is sent.
  • origin: The referrer is sent, containing only the origin (port, protocol, domain), excluding the origin + path that is sent by default.
  • origin-when-cross-origin: When loading from the same origin, the referrer is sent in its complete form (origin + path). Otherwise, only the origin is sent.
  • same-origin: The referrer is sent only when loading from the same origin.
  • strict-origin: If the current page is loaded over HTTPS and the iframe is also loaded over HTTPS, the origin is sent as the referrer. If the iframe is loaded over HTTP, nothing is sent.
  • strict-origin-when-cross-origin: When working on the same origin, the origin + path is sent as the referrer. If the current page is loaded over HTTPS and the iframe is also loaded over HTTPS, the origin is sent as the referrer. If the iframe is loaded over HTTP, nothing is sent.
  • unsafe-url: The origin + path is sent as the referrer, even when loading resources from HTTP while the current page is loaded over HTTPS.