HTML - attributes - sandbox

revision:


Content

"sandbox" attribute : enables restrictions for the content in iframe syntax some examples


"sandbox" attribute : enables restrictions for the content in iframe

top

The sandbox attribute enables an extra set of restrictions for the content in an iframe. The sandbox attribute can be used on the following element:<iframe>.

When the sandbox attribute is present, it will treat the content as being from a unique origin, block form submission, block script execution, disable APIs, prevent links from targeting other browsing contexts, prevent content from using plugins (through <embed>, <object>, <applet>, or other), prevent the content to navigate its top-level browsing context, block automatically triggered features (such as automatically playing a video or automatically focusing a form control).

The value of the "sandbox" attribute can either be just "sandbox" (then all restrictions are applied), or a "space-separated list" of pre-defined values that will REMOVE the particular restrictions.


syntax

top

<iframe sandbox></iframe >

<iframe sandbox="value"></iframe >

Attribute values:

(no value): applies all restrictions;
allow-forms: allows form submission;
allow-modals: allows to open modal windows;
allow-orientation-lock: allows to lock the screen orientation;
allow-pointer-lock: allows to use the Pointer Lock API;
allow-popups: allows popups;
allow-popups-to-escape-sandbox: allows popups to open new windows without inheriting the sandboxing;
allow-presentation: allows to start a presentation session;
allow-same-origin: allows the iframe content to be treated as being from the same origin;
allow-scripts: allows to run scripts;
allow-top-navigation: allows the iframe content to navigate its top-level browsing context;
allow-top-navigation-by-user-activation allows the iframe content to navigate its top-level browsing context, but only if initiated by user.


some examples

top

In the source document, the video starts playback automatically. But in sandbox mode, the video does not autoplay.

codes:
                    <iframe style="margin-left:3vw;" width="500" height="300" src="../../pics/Wuzhen-20-10_02.mp4" sandbox></iframe>
                    <p class="spec">In the <a href="../pics/Wuzhen-20-10_02.mp4">
                    source document</a>, the video starts playback 
                    automatically. But in sandbox mode, the video does not 
                    autoplay.</p>
                
codes:
                    <iframe style="margin-left:3vw;" width="500" height="300" src="../../pics/Wuzhen-20-10_02.mp4" 
                    sandbox="allow-same-origin"></iframe>