In this section, we will learn what the sandbox attribute is and how to use it.

What is sandbox Attribute in HTML <iframe> Tag?

The sandbox attribute is used to apply a set of restrictions on the content loaded in the body of the target <iframe> element.

Basically, when we use this attribute in an <iframe> element (without using any value for it):

• All form submissions will be blocked by default.
• No script could execute on the content loaded in the <iframe> element.
• All the APIs will be disabled.
• If the content is using a plugin, it will become disabled.
• Any auto triggered features such as video or audio content becomes blocked.

As you can see, if we use this attribute on an <iframe> element without a value, all the restrictions mentioned above will be applied to the content of that <iframe>.

But the sandbox attribute has a set of values that one or more of them could be used (space separated) to remove some of the restrictions mentioned above.

HTML sandbox Attribute in <iframe> Tag Syntax:

<iframe sandbox = “value“> </iframe>

<iframe> Tag sandbox Attribute Values

Name	Description
(No Value)	If we don’t set any value for the sandbox attribute, it will apply all the restrictions to the content of that <iframe> element.
allow-forms	Using this value means forms can be submitted.
allow-modals	Using this value means allowing to open modal windows.
allow-orientation-lock	Using this value means allow locking the screen orientation
allow-pointer-lock	This value allows to use the Pointer Lock API
allow-popups	This value means allowing popups
allow-popups-to-escape-sandbox	This value means allowing popups to open a new window without inheriting the restrictions applied by the sandbox
allow-presentation	This value means allowing to start a presentation session.
allow-same-origin	This value allows the iframe content to be treated as being from the same origin
allow-scripts	This value allows to run scripts
allow-top-navigation	This value allows the iframe content to browse its top level context.
allow-top-navigation-by-user-activation	Allows the iframe content to navigate its top-level browsing context, but only if initiated by user

Example: using sandbox attribute in HTML <iframe> tag

See the Pen using sandbox attribute in HTML <iframe> tag by Omid Dehghan (@odehghan) on CodePen.

In this example, the value set for the sandbox attribute is empty and that means applying all sorts of restrictions. For example, here if we type a username and password and then hit the submit button, nothing will happen because no form submission is allowed here.

But if we change the restriction to “allow-forms” for example, then we’re allowed to submit a form in the body of this <iframe> element.