<iframe sandbox="">
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
- Attribute of
- Using The HTML Tag To Create Inline Frames: Here's How
- What does
<iframe sandbox="">do? - Places a set of security and usability restrictions on the iframe.
Contents
Code Example
<iframe width="100%" height="600" src="/code-samples/autoplay-flamingo/" sandbox></iframe>
<p>In the <a href="/code-samples/autoplay-flamingo/">source document</a>, the video starts playback automatically. But in sandbox mode, the video does not autoplay.</p>In the source document, the video starts playback automatically. But in sandbox mode, the video does not autoplay.
Restricting and re-enabling
Adding the sandbox attribute to an <iframe> element places the element into sandbox mode, which adds the following restrictions to how the browser treats the document inside the iframe:
- iframe content is treated as being from a different origin than the primary document
- blocks form submission
- block JavaScript execution
- disable Pointer Lock API (mouse movement capture)
- prevents anchor links from targeting other browsing contexts (opening in a new tab or window)
- prevents use of plugins (
<embed>,<object>,<applet>, or other) - prevent the content from navigating its top-level browsing context
- blocks auto playback of media
These sandbox precautions can help maintain browser security, which is especially useful if the <iframe> is embedding a third-party document over which you have no control.
Each of these restrictions can be lifted individually using attribute values.
Values of the sandbox Attribute
| Value Name | Notes |
|---|---|
| allow-top-navigation | Allows a sandboxed iframe to navigate its top-level browsing context |
| allow-scripts | Re-enables JavaScript in a sandboxed iframe. |
| allow-same-origin | Allows the content of a sandboxed iframe to be treated as having the same origin as the primary document. |
| allow-popups | Re-enables popups in a sandboxed iframe. |
| allow-pointer-lock | Re-enables the Pointer Lock API (mouse movement capture) in sandboxed a iframe. |
| allow-forms | Re-enables form submission in a sandboxed iframe. |
All Attributes of iframe Element
| Attribute name | Values | Notes |
|---|---|---|
| sandbox | allow-top-navigation allow-scripts allow-same-origin allow-popups allow-pointer-lock allow-forms | Places a set of security and usability restrictions on the iframe. |
| scrolling | Was used to toggle scrolling on iframes. Deprecated in HTML5. Use CSS instead. | |
| name | Specifies the name of an iframe. | |
| align | Was used to set the alignment of an inline frame relative to surrounding elements. Deprecated. Use CSS instead. | |
| frameborder | Was used to toggle the display of a border around an iframe. Deprecated in HTML5. Use CSS instead. | |
| longdesc | Was used to specify URL containing a long description of an iframe. Deprecated in HTML5. Use CSS instead. | |
| marginwidth | Was used to control the width of margins around an iframe. Deprecated in HTML5. Use CSS instead. | |
| src | Specifies the URL of a document to display in an iframe. | |
| vspace | Was used to control the vertical spacing around an iframe. Deprecated in HTML5. Use CSS instead. | |
| width | Specifies the width of an iframe. |
Browser Support for sandbox
 |  |  |  |  |  |
| 10 | 43 | 45 | 13 | 9 | 34 |