A sandbox attribute on a element. The attribute prevents JavaScript from executing. Without sandbox an alert box would display.
Using sandbox
The sandbox attribute adds a group of restriction to the element's content, like so:
- prevents form submission
- disabled all script
- disable APIs
- display content as if it's from unique origin
- disabled links from targeting new tab or window
- prevents content to navigate to the iframe's page
- disable automatic triggered events [e.g. playing video or audio, focusing elements at load]
Certain sandbox restrictions can be lifted with one or more attribute values [see below].
Syntax
Note: These sandbox values remove certain restrictions. If not specified, all restrictions will be applied. To remove all restrictions the sandbox attribute itself should be removed.
Values
Value Description empty or no value set Implements all restrictions. allow-forms Allows form to be submitted. allow-modals Allows opening of modals. allow-orientation-lock Allows screen orientation to be locked. allow-pointer-lock Allows pointer lock API. allow-popups Allow popups. allow-popups-to-escape-sandbox Allow popup to open in new tab or window. allow-presentation Allow a presentation to be started. allow-same-origin Allows frame content to be treated as same origin. allow-scripts Enables script to execute. allow-top-navigation Allows frame content to navigate on the frame's page. allow-top-navigation-by-user-activation Allows content to be opened in new tab or window -- if allowed by the user.
Over time, we have gotten used to integrate more and more content on our web pages. Sometimes these content come from third parties [social networks widgets, advertising, etc]. It implies two consequences: the , and we display to the users some content that we can’t fully control.
Some of these external content are integrated via the tag, and you should pay special attention to these elements for your website’s security. To limit the risks, the W3C added the , allowing to restrict the actions available from an iframe [supported by ].
Sandbox: principle
In terms of security, a best practice when you manipulate elements that you don’t control, is to “compartmentalize” the environment of these elements: only authorize what is strictly necessary, to limit the potential impacts.
So, the sandbox attribute has been created to limit the action available from an iframe within your page.
Once you specify this attribute on a iframe:
the following restrictions apply:
- No script is executed, the browser behaves as if it couldn’t handle JavaScript
- AJAX requests can’t be initiated [the iframe has its own “origin”, different from your page, and thus violated the standard CORS mechanism respected by default by modern browsers]
- You limit the storage capabilities on the browser [eg: using cookies or localStorage is impossible]
- It’s impossible to create a new window, a popup
- Sending a form is prohibited
- Flash, Silverlight plugins, or Java applets are not loaded
- The Pointer Lock API [that provides information related to mouse movements] is blocked
Remove some restrictions
The sandbox attribute accepts multiple values that will allow you to relax the default policy as needed:
- allow-forms: form submission is allowed
- allow-scripts: scripts are executed
- allow-same-origin: the iframe uses the same “origin” that the page, so it no longer faces to CORS mechanism restrictions [permission to use AJAX requests, localStorage, cookies…]
- allow-top-navigation: the iframe can navigate to its top-level browsing context
- allow-popups: you can open a new window/a popup
- allow-pointer-lock: the Pointer Lock API is operable
Note that you can’t reauthorize plugins execution.
For example, if your iframe needs to open a popup to a third service, and requires authentication to access this service, you’ll have to add these values:
- allow-popup
- allow-same-origin
- allow-forms [the restriction applies to the iframe, but also to elements resulting]
Note that it’s not advisable to add both values allow-scripts and allow-same-origin: these two values will allow the iframe to access and modify your DOM. In this case, a malicious iframe could perform all sorts of operations, and could even remove its own sandbox attribute!
What is sandbox allow
Values of the sandbox Attribute 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.
What allows the iframe content to be treated as being from the same origin?
The allow-same-origin keyword allows the content to be treated as being from the same origin instead of forcing it into a unique origin, the allow-top-navigation keyword allows the content to navigate its top-level browsing context, and the allow-forms and allow-scripts keywords re-enable forms and scripts respectively ...
Are iFrames still used?
Finally, the element appeared [along with other ways of embedding content, such as , , etc.] This provides a way to embed an entire web document inside another one, as if it were an or other such element, and is used regularly today.
What is the sandbox attribute?
Definition and Usage. The sandbox attribute enables an extra set of restrictions for the content in an iframe. When the sandbox attribute is present, and it will: treat the content as being from a unique origin. block form submission.