sandbox

Restricts iframe capabilities by default, then selectively re-enables permissions. Essential for embedding untrusted third-party content safely.

Overview

The sandbox attribute on <iframe> applies a strict security policy to embedded content. When present with no value, it enables all restrictions: no scripts, no form submission, no popups, no navigation, no plugins, and the content is treated as a unique origin (blocking same-origin API access).

You then selectively re-enable capabilities by adding space-separated permission tokens. This "deny by default, allow by exception" model makes it far harder for embedded content to do something unexpected.

Values

Token	Permission Granted
`allow-scripts`	Run JavaScript inside the iframe
`allow-same-origin`	Treat content as same-origin (access cookies, localStorage, DOM APIs)
`allow-forms`	Submit forms
`allow-popups`	Open new windows/tabs via `window.open()` or `target="_blank"`
`allow-popups-to-escape-sandbox`	Opened popups are not sandboxed themselves
`allow-top-navigation`	Navigate the top-level browsing context
`allow-top-navigation-by-user-activation`	Navigate the top-level context only after a user gesture
`allow-top-navigation-to-custom-protocols`	Navigate to non-HTTP protocols (e.g. `mailto:`)
`allow-modals`	Use `alert()`, `confirm()`, `prompt()`
`allow-orientation-lock`	Lock screen orientation
`allow-pointer-lock`	Use the Pointer Lock API
`allow-presentation`	Use the Presentation API
`allow-downloads`	Trigger file downloads

When sandbox is present with no value, all of the above are denied. The attribute value is a space-separated list of tokens to allow.

Examples

Basic Sandboxing

<iframe src="https://untrusted-widget.com/embed" sandbox title="Third-party widget"></iframe>  <iframe src="https://forms.example.com/survey" sandbox="allow-scripts allow-forms" title="Survey form"></iframe>

Common Configurations

<iframe src="https://player.example.com/embed/abc123" sandbox="allow-scripts allow-same-origin" title="Video player"></iframe>  <iframe src="https://pay.example.com/checkout" sandbox="allow-scripts allow-forms allow-top-navigation" title="Payment checkout"></iframe>  <iframe src="https://ads.example.com/banner" sandbox="allow-scripts allow-popups" title="Advertisement"></iframe>

Inline Content with srcdoc

Combine sandbox with srcdoc to sandbox inline HTML without needing an external URL.

<iframe sandbox="allow-scripts" srcdoc="<p>Hello from a sandboxed inline document.</p>" title="Sandboxed inline content"></iframe>

Security Considerations

The allow-scripts + allow-same-origin Escape

Warning: Combining allow-scripts and allow-same-origin on content from your own origin allows the iframe to remove its own sandbox attribute via JavaScript. The embedded page can access frameElement and call removeAttribute('sandbox'), effectively escaping all restrictions.

<iframe src="https://example.com/untrusted" sandbox="allow-scripts allow-same-origin" title="This can escape its sandbox"></iframe>

This combination is safe only when the iframe content is from a different origin (the browser's same-origin policy blocks frameElement access). For same-origin content, avoid granting both tokens.

Silent Failure

Sandboxed actions fail silently. A blocked form submission, popup, or navigation simply does not happen — no error is thrown, no console warning appears. This makes debugging difficult. If embedded content seems broken, check whether a missing sandbox token is the cause.

Limitations

Silent failures: Blocked actions produce no errors, making it hard to diagnose issues during development.
No granular script control: allow-scripts is all-or-nothing. You cannot allow specific scripts or APIs while blocking others.
Unique origin side effects: Without allow-same-origin, the iframe gets a unique opaque origin. This breaks localStorage, cookies, service workers, and any API that depends on origin.
Not a substitute for CSP: Sandbox restricts what the iframe can do; Content Security Policy restricts what resources it can load. Use both for defense in depth.