HTML iframe Tag sandbox Attribute Tutorial

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



(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.


Using this value means forms can be submitted.


Using this value means allowing to open modal windows.


Using this value means allow locking the screen orientation


This value allows to use the Pointer Lock API


This value means allowing popups


This value means allowing popups to open a new window without inheriting the restrictions applied by the sandbox


This value means allowing to start a presentation session.


This value allows the iframe content to be treated as being from the same origin


This value allows to run scripts


This value allows the iframe content to browse its top level context.


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.


Top Technologies