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

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.

Leave a Reply