HTML sandbox Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The HTML sandbox attribute is a powerful feature used in conjunction with <iframe> elements to enhance security and control over the content loaded within the iframe. This attribute enables webpage authors to impose a set of extra restrictions on the content hosted inside the iframe, effectively creating a "sandboxed" environment for the embedded content.

When an <iframe> is marked with the sandbox attribute, it operates in a secure and restricted mode. By default, this mode blocks form submissions, prevents script execution, disables plugins, and restricts the content from navigating the top-level browsing context. This helps protect the main page (and its users) from potentially malicious content or code injection attacks that could be embedded within the iframe.

The sandbox attribute can be used without any value, applying all restrictions, or it can be set with one or more space-separated tokens to selectively enable certain capabilities, values can be seen below.

The sandbox attribute thus offers a fine-grained control over what an embedded document can and cannot do, enhancing both the security and integrity of the main website. It's particularly useful for embedding third-party content or untrusted sources while minimizing potential risks.

Syntax

<iframe sandbox="allow-forms | allow-modals | 
     allow-orientation-lock | allow-pointer-lock | 
     allow-popups | allow-popups-to-escape-sandbox |
     allow-presentation | allow-same-origin | allow-scripts |
     allow-top-navigation | allow-top-navigation-by-user-activation" />

Values

allow-formsAllows form submissions.
allow-modalsLets the content open modal windows.
allow-orientation-lockPermits the content to lock the screen orientation.
allow-pointer-lockAllows pointer lock to be requested.
allow-popupsEnables popups (such as window.open, target="_blank", or showModalDialog). This includes opening new windows or tabs.
allow-popups-to-escape-sandboxAllows the sandboxed document to open new windows or tabs without imposed restrictions.
allow-presentationPermits the content to start presentation sessions.
allow-same-originAllows the content to be treated as being from the same origin instead of forcing it into a unique origin.
allow-scriptsEnables JavaScript execution.
allow-top-navigationPermits the content to navigate its top-level browsing context.
allow-top-navigation-by-user-activationAllows the content to navigate its top-level browsing context, but only if initiated by a user.

Applies To

The sandbox attribute can be used on the following html elements.

<iframe>

Example

HTML

&lt;iframe src="https://example.com/restricted_content.html" sandbox&gt;&lt;/iframe&gt;

Result

Editor

Browser Support

The following table will show you the current browser support for the HTML sandbox Attribute.

Desktop

12	4	17	15	5

Tablets / Mobile

18	17	14	4.2	1	4.4

Last updated by CSSPortal on: 29th March 2024

Support Us