What is HTML <iframe> sandbox Attribute
An <iframe> with extra restrictions.
Definition and Usage
The sandbox attribute enables an extra set of restrictions for the content in the iframe.
When the sandbox attribute is present, and 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 empty (then all restrictions are applied), or a space-separated list of pre-defined values that will REMOVE the particular restrictions.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<iframe sandbox="value">
Attribute Values
| Value | Description |
|---|---|
| (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 |
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe sandbox attribute</h1>
<iframe src="https://horje.com/" sandbox>
<p>Your browser does not support iframes.</p>
</iframe>
<p>The "Get date and time" button will run a script in the inline frame.</p>
<p>Since the sandbox attribute is set, the content of the inline frame is not allowed to run scripts.</p>
<p>You can add "allow-scripts" to the sandbox attribute, to allow the JavaScript to run.</p>
</body>
</html>
Output should be:
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |