HTML sandbox Attribute

The HTML sandbox attribute applies security restrictions to content loaded in an <iframe>. An empty sandbox attribute enables the full set of sandbox restrictions, while specific space-separated tokens can be added to relax selected restrictions.

Elements That Use the sandbox Attribute

The sandbox attribute is used with the <iframe> element.

Element	Description
`<iframe>`	Applies a set of security restrictions to the content loaded in the inline frame.

sandbox Value

The sandbox attribute can be specified with no value to apply all sandbox restrictions, or its value can contain space-separated tokens that remove particular restrictions.

<iframe src="page.html" sandbox></iframe>

An empty sandbox attribute applies the sandbox without granting any of the permissions represented by the available tokens.

<iframe src="page.html" sandbox="allow-forms allow-scripts"></iframe>

In the second example, the iframe remains sandboxed, but forms and scripts are allowed.

How sandbox Works

Sandboxing restricts capabilities that framed content would otherwise have. Depending on the tokens that are omitted, restrictions can affect scripts, forms, downloads, popups, navigation, origin treatment, presentation, and other browser features.

The tokens do not specify which restrictions to enable. Instead, the sandbox attribute enables the restrictions, and each allow-* token removes a particular restriction.

<iframe
  src="page.html"
  sandbox="allow-forms allow-scripts">
</iframe>

This iframe is still sandboxed even though two capabilities have been allowed. Restrictions not relaxed by the specified tokens remain in effect.

Sandbox Tokens

The sandbox attribute supports tokens that selectively relax sandbox restrictions. The following table lists the available tokens and their general purpose.

Token	Description
`allow-downloads`	Allows downloads initiated by the sandboxed content.
`allow-forms`	Allows form submission.
`allow-modals`	Allows modal dialogs such as those created with certain JavaScript dialog functions and permits related modal behavior.
`allow-orientation-lock`	Allows the content to lock the screen orientation where supported.
`allow-pointer-lock`	Allows the Pointer Lock API to be used.
`allow-popups`	Allows the content to open popup browsing contexts.
`allow-popups-to-escape-sandbox`	Allows newly opened browsing contexts to avoid inheriting the sandbox restrictions.
`allow-presentation`	Allows the Presentation API to be used where supported.
`allow-same-origin`	Prevents the sandbox from forcing the framed document into an opaque origin.
`allow-scripts`	Allows scripts to run in the sandboxed content.
`allow-storage-access-by-user-activation`	Allows the framed content to request access to unpartitioned cookies and storage through the Storage Access API where supported.
`allow-top-navigation`	Allows the framed content to navigate the top-level browsing context.
`allow-top-navigation-by-user-activation`	Allows top-level navigation when initiated by user activation.
`allow-top-navigation-to-custom-protocols`	Allows navigation of the top-level browsing context to custom protocols under the applicable conditions.

Using Multiple Tokens

Multiple sandbox tokens are separated by spaces. Include only the permissions that the framed content actually needs.

<iframe
  src="contact.html"
  sandbox="allow-forms allow-scripts">
</iframe>

This example allows forms and scripts while keeping the other applicable sandbox restrictions in place.

Security Considerations

The sandbox attribute can reduce the capabilities of embedded content, but the restrictions should be relaxed carefully. Grant only the permissions needed for the framed content to function.

Using both allow-scripts and allow-same-origin can substantially weaken the protection provided by sandboxing when the embedded document is from the same origin as the parent page. In that situation, script running in the framed document may be able to remove the sandbox attribute from its own <iframe> element and reload without the sandbox restrictions.

Content that is not trusted is generally safer when it is served from a separate origin in addition to using appropriate sandbox restrictions.

Common Mistakes

Do not assume that the allow-* tokens enable sandbox restrictions. The sandbox attribute enables the restrictions, while the tokens relax specific restrictions.

Do not add every available token automatically. Doing so can remove many of the protections that sandboxing is intended to provide.

Do not assume that an empty sandbox attribute means no restrictions. An empty value applies the sandbox with the full set of restrictions.

Be cautious when combining allow-scripts and allow-same-origin, particularly for same-origin content, because this combination can significantly reduce the security benefit of the sandbox.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The sandbox attribute on the <iframe> element is widely supported in current core browsers. Support for individual sandbox tokens can vary, particularly for newer permissions.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the sandbox Attribute

The example loads content into an iframe with the sandbox attribute. The framed page can be displayed, but capabilities restricted by the sandbox remain unavailable unless the corresponding permissions are added.

Play in Editor

Summary

The HTML sandbox attribute applies security restrictions to content loaded in an <iframe>. An empty attribute applies the full set of sandbox restrictions, while space-separated allow-* tokens selectively relax individual restrictions. Grant only the permissions that the embedded content needs, especially when displaying content that is not fully trusted.