Sandboxed iframes
The read-only sandbox property of the HTMLIFrameElement returns a live DOMTokenList object indicating extra restrictions on the behavior of the nested content. It reflects the <iframe> element's sandbox content attribute.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 17 | 5 | 18 | 4 | |
| HTML attribute | ||||||
sandbox | 5 | 12 | 17 | 5 | 18 | 4 |
| Other | ||||||
html.elements.iframe.sandbox.allow-downloads `sandbox="allow-downloads"` | 83 | 83 | 82 | 17 | 83 | 17 |
html.elements.iframe.sandbox.allow-forms `sandbox="allow-forms"` | 5 | 79 | ≤49 | 5 | 18 | 4 |
html.elements.iframe.sandbox.allow-modals `sandbox="allow-modals"` | 46 | 79 | 49 | 11.1 | 46 | 11.3 |
html.elements.iframe.sandbox.allow-popups `sandbox="allow-popups"` | 17 | 12 | 28 | 6 | 18 | 6 |
html.elements.iframe.sandbox.allow-popups-to-escape-sandbox `sandbox="allow-popups-to-escape-sandbox"` | 46 | 79 | 49 | 11.1 | 46 | 11.3 |
html.elements.iframe.sandbox.allow-same-origin `sandbox="allow-same-origin"` | 5 | 79 | ≤49 | 5 | 18 | 4 |
html.elements.iframe.sandbox.allow-scripts `sandbox="allow-scripts"` | 5 | 79 | ≤49 | 5 | 18 | 4 |
html.elements.iframe.sandbox.allow-top-navigation `sandbox="allow-top-navigation"` | 6 | 79 | ≤49 | 5 | 18 | 4.2 |
html.elements.iframe.sandbox.allow-top-navigation-by-user-activation `sandbox="allow-top-navigation-by-user-activation"` | 58 | 79 | 79 | 11.1 | 58 | 11.3 |
html.elements.iframe.sandbox.allow-top-navigation-to-custom-protocols `sandbox="allow-top-navigation-to-custom-protocols"` | | | 101 | 16 | | 16 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Before Chrome 50, this property returned the deprecated child `DOMSettableTokenList` instead of `DOMTokenList`.
Notes 1 item(s)
Implementation note
- Previously, the type of `sandbox` was a `DOMString` instead of a `DOMSettableTokenList`. This has been fixed with Firefox 29. Other browsers may still implement the property as `DOMString` since it was a late change in the specification.
Notes 1 item(s)
Implementation note
- Before Chrome Android 50, this property returned the deprecated child `DOMSettableTokenList` instead of `DOMTokenList`.
Notes 1 item(s)
Implementation note
- Chrome 70 and earlier block script execution without `allow-scripts`, even if `allow-same-origin` is set. For example, any bound handlers for click events of nodes inside an iframe throw an error for blocked script execution.
Notes 1 item(s)
Implementation note
- Edge 79 and earlier block script execution without `allow-scripts`, even if `allow-same-origin` is set. For example, any bound handlers for click events of nodes inside an iframe throw an error for blocked script execution.
Notes 1 item(s)
Implementation note
- Safari blocks script execution without `allow-scripts` even if `allow-same-origin` is set. For example, any bound handlers for click events of nodes inside an iframe throw an error for blocked script execution.
Notes 1 item(s)
Implementation note
- Chrome Android 70 and earlier block script execution without `allow-scripts`, even if `allow-same-origin` is set. For example, any bound handlers for click events of nodes inside an iframe throw an error for blocked script execution.
Notes 1 item(s)
Implementation note
- Safari blocks script execution without `allow-scripts` even if `allow-same-origin` is set. For example, any bound handlers for click events of nodes inside an iframe throw an error for blocked script execution.
Syntax
HTML
<iframe src="https://untrusted.example.com"
sandbox="allow-scripts allow-same-origin"
width="600" height="400">
</iframe>Live demo
sandbox effect confirm
is skript that Run (allow-scripts none. case). with Sandbox with. iframe
PreviewFullscreen
Use cases
-
Untrusted embeds
Limit the capabilities of third-party or user-generated content placed inside an iframe.
-
Constrained demos
Run previews or educational examples in a more restricted document context.
Cautions
- Adding sandbox tokens should be deliberate because each permission relaxes isolation in a meaningful way.
- Embedded functionality may break if the sandbox is tighter than the content expects, so capability design matters.
Accessibility
- Restricted embeds still need a clear title and understandable purpose so users know what they are entering.