iframe, sandbox & Embeds

<iframe> embeds another document inside the current page in its own isolated browsing context. That context has its own history stack, its own JavaScript scope, and its own cookie jar. The embedded content and the host page run side by side but cannot read each other's data unless they share the same origin and both opt in.

The sandbox attribute restricts what embedded content can do. An empty sandbox="" applies the most restrictive set: no scripts, no form submission, no popups, no navigation of the top page, and no same-origin privileges even if the URL matches the host. Each allow-* token explicitly restores one capability.

Without sandbox, an embedded third-party page can run JavaScript, redirect the top-level window, submit forms, and read any cookies shared by the origin. A sandboxed iframe limits the blast radius of a compromised or malicious embed. Every third-party widget, every payment form in an iframe, every user-uploaded HTML snippet should run behind a sandbox.

Clickjacking is the reverse problem: someone frames your page inside their site and tricks users into clicking buttons they cannot see. The defense is a server header, not HTML: X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none' prevents your page from being embedded at all. sandbox does not help here, because you control your own page, not the attacker's.

The minimum useful iframe: <iframe src="https://example.com" title="Example site" width="800" height="600" loading="lazy">. The title attribute is required for screen readers to identify the frame. Without it, a screen reader announces only "iframe" with no context. loading="lazy" defers the embed until it is near the viewport, the same as images.

Add sandbox to restrict the embed, then selectively restore capabilities with tokens: sandbox="allow-scripts allow-forms" enables JavaScript and form submission but keeps popups and top-navigation blocked. The dangerous combination to avoid is allow-scripts allow-same-origin on a same-origin embed: same-origin content can access the DOM, find the iframe element, and remove the sandbox attribute entirely, defeating it.

The allow attribute controls browser features via Permissions Policy: allow="fullscreen" lets the embed go fullscreen, allow="autoplay" allows media autoplay. YouTube's embed code uses a long allow list because it needs camera, clipboard, encrypted media, and more. Unlike sandbox which starts closed and opens permissions, allow starts with the browser defaults and you explicitly grant extras.