The sandbox attribute of an iframe is a mechanism in HTML5 used to enhance the security of embedded content, and by default restricts behavior within an iframe. It sets parameters such as allow-scripts, allow-forms, etc. to release permissions as needed to prevent malicious code from affecting the main page. It is recommended to always enable sandbox, minimize permission opening, combine CSP, test compatibility, and be suitable for embedded advertising, user content, code preview and other scenarios.

If you embed third-party content into your web page, especially through iframes, you will definitely want to control the behavior of this part of the content as much as possible to prevent it from adversely affecting your home page. HTML5 provides some security properties, where sandbox is specifically used to enhance iframe security.

What is the sandbox property of an iframe?

sandbox is an attribute provided in HTML5 for <iframe></iframe> tags to impose additional security restrictions on embedded pages. By default, as long as this property is set, the browser will treat the iframe as a "sandboxed" environment. Even if the specific value is not specified, the content in the iframe will be subject to a series of strict restrictions.

These limitations include, but are not limited to:

• Cannot submit a form
• No new window or navigation to top pages can be displayed
• Cannot execute scripts
• Cannot access the DOM or cookie of the parent page

Simply put, it is like adding a transparent protective cover to the iframe.

How to use the sandbox attribute?

You can write a basic iframe like this and enable sandbox:

 <iframe src="https://example.com" sandbox></iframe>

But usually you will want to selectively release some permissions based on your needs. For example, if you want to allow scripts to run and form submissions, you can write this:

 <iframe src="https://example.com" sandbox="allow-scripts allow-forms"></iframe>

Common optional values ??include:

• allow-same-origin : Allows the same origin as the parent page
• allow-top-navigation : allows iframes to control the entire page jump
• allow-scripts : allows script execution
• allow-forms : Allow submission of forms
• allow-popups : Allow popups
• allow-modals : allows display of modal dialogs (such as alert)
• allow-orientation-lock : Allows lock screen orientation
• allow-pointer-lock : Allow pointer lock (commonly used in games)
• allow-presentation : Allow to enter presentation mode
• allow-storage-access-by-user-activation : allows access to storage (such as cookies) after user interaction

You don't need to turn it on, just open it as needed.

Suggestions in practical applications

1. Always enable sandbox

   • Even if the content you don't trust is just a static resource, it is recommended to add sandbox even if you don't set any value. This can help you avoid many potential problems.

2. Delegate permissions as little as possible

   • For example, if you only need to display a static advertising image, there is no need to open allow-scripts .
   • If you do need scripts, but only partial functions, consider whether you really want to allow it to access the entire page or initiate a jump.

3. Pay attention to using it with CSP

   • Content Security Policy (CSP) is another important front-end security mechanism. Used in conjunction with sandbox, a more comprehensive line of security can be built.

4. Test behavior under different configurations

   • Support for some sandbox features varies slightly in different browsers, especially in older versions. It is best to do compatibility tests before going online.

Which scenarios are suitable for sandbox?

• When embedding third-party ads, gadgets, or plug-ins
• Show user submissions in a forum or CMS
• Create a preview window for online code editor
• Develop a multi-tenant platform to isolate resources from different customers

This kind of scenario involves uncontrollable external content. At this time, sandbox is like a firewall to prevent malicious code from "crossing the boundaries".

Basically that's it. Rational use of sandbox can effectively improve the security of iframes. Although it seems to be a small detail, it is very important in modern web development.

The above is the detailed content of HTML5 security attributes like sandbox for iframes. For more information, please follow other related articles on the PHP Chinese website!