The <iframe> tag is used to embed other web pages within the current webpage.

Basic Usage

The <iframe> tag creates a specified area to display another web page. It acts as a container element. If the browser does not support <iframe>, it will show the nested content.

1
2
3
4
5
<iframe src="https://www.example.com"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://www.example.com">Click to open embedded page</a></p>
</iframe>

The code above embeds https://www.example.com within the current webpage, with a width of 100% and a height of 500 pixels. If the browser does not support <iframe>, a link will be displayed instead.

Most browsers support <iframe>, so nested elements can be omitted if desired.

Attributes of <iframe>:

  • allowfullscreen: Allows the embedded page to be viewed in fullscreen mode. Requires fullscreen API support; see relevant JavaScript tutorials.
  • frameborder: Defines whether to display a border. Set to 0 for no border (default is 1). It’s better to use CSS for styling instead of this attribute.
  • src: The URL of the page to be embedded.
  • width: The width of the display area.
  • height: The height of the display area.
  • sandbox: Specifies permissions for the embedded page (see below).
  • importance: Sets the loading priority of the embedded page. Options include high (high priority), low (low priority), and auto (browser decides).
  • name: The name of the embedded window, used with the target attributes of <a>, <form>, and <base>.
  • referrerpolicy: Configures the Referer header in HTTP requests to the embedded page. See the documentation for the <a> tag for more details.

sandbox Attribute

The sandbox attribute provides a way to impose restrictions on an embedded web page within an <iframe>, essentially creating a security “sandbox” to control what the embedded content is allowed to do.

Basic Usage:
By default, an embedded page has full permissions, including executing scripts, submitting forms, and opening new windows. To mitigate security risks, especially if the embedded page comes from a different site, the sandbox attribute can be used to set specific restrictions.

The sandbox attribute can be used as a boolean attribute, meaning it enables all restrictions by default:

1
<iframe src="https://www.example.com" sandbox></iframe>

Customizing Permissions:
You can also specify particular permissions with the sandbox attribute, enabling only certain actions:

  • allow-forms: Allows form submission.
  • allow-modals: Permits modal dialogs, such as window.alert().
  • allow-popups: Enables the use of window.open() to create popups.
  • allow-popups-to-escape-sandbox: Allows popups to bypass sandbox restrictions.
  • allow-orientation-lock: Permits scripts to lock the screen orientation (landscape or portrait).
  • allow-pointer-lock: Allows the use of Pointer Lock API to lock the mouse movement.
  • allow-presentation: Enables the use of Presentation API.
  • allow-same-origin: Allows the embedded content to be treated as coming from the same origin, bypassing cross-origin restrictions.
  • allow-scripts: Permits script execution (but does not allow popups).
  • allow-storage-access-by-user-activation: When combined with allow-same-origin, allows access to the parent window’s cookies via the Storage Access API after user activation.
  • allow-top-navigation: Allows navigation of the top-level window.
  • allow-top-navigation-by-user-activation: Allows navigation of the top-level window only if activated by the user.
  • allow-downloads-without-user-activation: Allows downloads to start without user activation.

Important Note:
Avoid setting both allow-scripts and allow-same-origin together, as this would allow the embedded content to potentially modify or remove the sandbox attribute itself, compromising the sandbox’s security.

loading Attribute

The loading attribute controls when an <iframe> should load its content, which can help save bandwidth by deferring loading until necessary.

Attribute Values:

  • auto: The default behavior, equivalent to not using the loading attribute.
  • lazy: Loads the <iframe> only when it scrolls into view.
  • eager: Loads the <iframe> immediately, regardless of its position on the page.

Example for lazy loading:

1
<iframe src="https://example.com" loading="lazy"></iframe>

Important Note:
The loading attribute has no effect if the <iframe> is hidden. Chrome considers an <iframe> hidden if any of the following conditions are met:

  • Width and height are 4 pixels or less.
  • Style is set to display: none or visibility: hidden.
  • Positioned off-screen with negative X or Y coordinates.

Link to original article:

https://wangdoc.com/html/iframe