The iframe Element and Embedded Content

The iframe element embeds another browsing context inside the current page. It is commonly used for maps, videos, forms, and other third-party content.

<iframe
  src="https://www.example.com/embed/report"
  title="Quarterly report preview"
  width="800"
  height="450"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin">
</iframe>

Give an iframe a descriptive title so people using assistive technology know what the embedded content is. Provide dimensions to reserve space and consider lazy loading when it is below the fold.

The sandbox attribute applies restrictions to the embedded document. You can selectively allow capabilities such as scripts or form submission with tokens, but each token reduces the restriction. Start with the smallest permissions the embed needs and test it. Combining allow-scripts and allow-same-origin for same-origin content can undermine the protection sandboxing is meant to provide.

The allow attribute controls access to certain features through Permissions Policy. Do not grant camera, microphone, location, or other permissions unless the embedded experience requires them. An iframe can introduce tracking, performance cost, or privacy implications; a simple link may be a better alternative.