IFrames

An iframe (inline frame) is an HTML element that embeds another HTML document within the current page, creating a nested browsing context. It is commonly used to display external content such as videos, maps, advertisements, or widgets while keeping the embedded document isolated from the parent page.

The iframe element is primarily configured with attributes such as src, which specifies the URL of the embedded document, and width and height to define its visible size. For accessibility, a title attribute is important. Additional attributes include loading to control offscreen loading behavior, referrerpolicy to limit sent referrer information, and sandbox to apply a set of restrictions. The allow attribute enables specific features for the embedded content, such as camera, microphone, or fullscreen, and allow-scripts or allow-same-origin can be used in conjunction with sandbox to permit certain capabilities.

Security and privacy considerations are central to iframe usage. The same-origin policy restricts how scripts on the parent page can interact with the content inside a cross-origin iframe. Communication between the parent and the embedded document typically uses the postMessage API. The sandbox attribute can impose strict limits on scripts, forms, and top navigation, reducing risks such as cross-site scripting or content injection.

Accessibility and performance considerations include providing a meaningful title or aria-label, and offering fallback content within the iframe for browsers that do not support iframes. Iframes can affect page load performance and SEO semantics, and their content is not typically crawled as part of the parent page’s content.

Example:

<iframe src="https://example.com" title="Example content" width="600" height="400" loading="lazy"></iframe>