HTML - sandbox Attribute

The sandbox is an HTML attribute that stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows). Or, it enables an extra set of restrictions for the content within the iframe.

Following are the features when the sanbox attribute exists in an iframe element −

  • Treat the content as being from a unique origin

  • Block from submission

  • Block script execution

  • Disable APIs

  • It Prevent links from targeting other browsing contexts.

  • It Prevent content from using plugins (through <embed>, <object>, <applet>, or other)

  • It Prevent the content to navigate its top-level browsing context

  • It Block automatically triggered features (such as automatically playing a video or automatically focusing a form control)

Syntax

Following is the syntax of the sandbox attribute −

<iframe sandbox="value">

Attribute Values

  • allow-forms −re-enables from submission
  • allow-pointer-lock −re-enable APIs
  • allow-popups −re-enables popups
  • allow-same-origin −it allows the content of iframe to be treated as being from same origin
  • allow-scripts −re-enables scripts
  • allow-top-navigation −it allows the content of iframe to navigate its top-level browsing context

Example

In the following example, we are using the sandbox attribute within the <iframe> tag to disable some features on the specified website.

<!DOCTYPE html>
<html>
<head>
   <title>HTML iframe sandbox Attribute</title>
</head>
<body>
   <h1 style="color: green;">tutorials <span style="color: black">point</span>
   </h1>
   <h2>HTML IFrame sandbox Attribute</h2>
   <br>
   <iframe id="tutFrame" src="https://www.tutorialspoint.com/index.htm" width="400" height="200" sandbox></iframe>
</body>
</html>

When we run the above code, it will generate an output consisting of the text along with tutorialspoint iframe on the webpage.

Example

Considering the following example, where we are using the sandbox attribute and its value = "allow-forms" within the <iframe> tag to enable form submission features on the specified website.

<!DOCTYPE html>
<html>
<head>
   <title>HTML iframe sandbox Attribute</title>
</head>
<body>
   <h1 style="color: green;">tutorials <span style="color: black">point</span>
   </h1>
   <h2>HTML IFrame sandbox Attribute</h2>
   <br>
   <iframe id="tutFrame" src="https://www.tutorialspoint.com/market/login.asp" width="400" height="200" sandbox="allow-forms"></iframe>
</body>
</html>

On running the above code, the output window will pop up displaying the tutorialspoint login page on the webpage.

html_attributes_reference.htm
Advertisements