What is the iframe sandbox attribute in HTML5?

The sandbox attribute in HTML5 restricts iframe capabilities to enhance security by isolating untrusted content. 1) By default, it blocks JavaScript, form submissions, popups, parent access, plugins, and autoplay. 2) Restrictions can be selectively lifted using tokens like allow-scripts, allow-forms, allow-same-origin, allow-top-navigation, allow-popups, allow-pointer-lock, allow-fullscreen, allow-orientation-lock, and allow-presentation. 3) Combining allow-scripts and allow-same-origin reduces security, so it should be avoided unless the content is trusted. 4) Common use cases include embedding user-generated content, ads, or third-party widgets securely. 5) The attribute is widely supported and essential for safely embedding external content, effectively creating a controlled environment where privileges are explicitly granted, ensuring safer web interactions.

The sandbox attribute in HTML5 is a security feature applied to an <iframe></iframe> element that restricts what content inside the iframe can do. It helps isolate untrusted content—like third-party websites or user-generated content—by limiting its capabilities, reducing the risk of malicious behavior such as script injection or phishing.

By default, when you add the sandbox attribute without any values, it applies a strict set of restrictions. This means the embedded page is treated as if it's from a different origin, and many actions are blocked unless explicitly allowed.

How It Works

You apply the sandbox attribute directly to the <iframe></iframe> tag:

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

With just sandbox (no value), the following restrictions are enforced:

• JavaScript is disabled.
• Forms cannot be submitted.
• Links with target="_top" or target="_blank" are blocked from changing the parent page.
• The iframe content cannot access the parent document or window object (prevents DOM access).
• Plugins (like Flash) are disabled.
• Automatic features like autoplay for media are usually blocked.

Relaxing Restrictions with Tokens

You can selectively lift certain restrictions by adding specific allowance tokens as the value of the sandbox attribute. These are space-separated keywords.

Common tokens include:

• allow-scripts – Allows JavaScript execution.
• allow-forms – Permits form submission.
• allow-same-origin – Lets the content be treated as being from the same origin (dangerous if misused).
• allow-top-navigation – Allows the iframe to navigate the top-level page.
• allow-popups – Enables window.open() and target="_blank" links.
• allow-pointer-lock – Permits using the Pointer Lock API.
• allow-fullscreen – Allows entering fullscreen mode.
• allow-orientation-lock – Allows locking screen orientation.
• allow-presentation – Allows starting a presentation session (e.g., via Presentation API).

Example: Allow Scripts and Forms

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

This allows the iframe to run JavaScript and submit forms, but still blocks popups and access to the parent page.

Security Considerations

Using sandbox without allow-scripts and allow-same-origin provides strong protection. However, be cautious:

• Avoid allow-scripts and allow-same-origin together unless you fully trust the content—this combination can nearly eliminate the sandbox’s protection.
• Even with allow-scripts, the iframe remains isolated from the parent unless allow-top-navigation or access to parent is possible through other means.

Practical Use Cases

• Embedding user-submitted HTML (e.g., in a code playground).
• Displaying ads or third-party widgets securely.
• Previewing external websites in a controlled environment.

The sandbox attribute is well-supported in modern browsers and is a key tool for improving web security when dealing with embedded content.

Basically, it's a way to run untrusted pages in a "jail" — you decide what privileges to give back.

The above is the detailed content of What is the iframe sandbox attribute in HTML5?. For more information, please follow other related articles on the PHP Chinese website!