HTML | <iframe> sandbox Attribute

Last Updated : 26 Mar, 2024

The HTML <iframe> tag’s sandbox attribute restricts the behavior of the embedded content for added security. It allows or disallows specific capabilities such as form submission and scripting within the iframe.

When the sandbox attribute exists, it will:

treat the content as being from a singular origin
It blocks form submission
It blocks script execution
It disables APIs
It also prevents links from targeting other browsing contexts
It stops the content from navigating its top-level browsing context
block automatically triggered features (such as automatically playing a video or automatically focusing a form control)

The value of the sandbox attribute will either be simply sandboxed (then all restrictions are applied) or a space-separated list of pre-defined values that will take away the actual restrictions.

Syntax:

<iframe sandbox="value">

Attribute Values :

Attribute	Description
no-values	Applies all restrictions, effectively disabling most capabilities of the embedded content.
allow-forms	Re-enables form submission within the iframe.
allow-pointer-lock	Re-enables pointer lock APIs within the iframe.
allow-popups	Re-enables popups within the iframe.
allow-same-origin	Allows the content of the iframe to be treated as being from the same origin as the parent page.
allow-scripts	Re-enables scripts within the iframe.
allow-top-navigation	Allows the content of the iframe to navigate its top-level browsing context.

Example: In this example we displays GeeksforGeeks heading, iframe with sandbox attribute, and source set to GeeksforGeeks IDE. Basic structure without sandbox attribute values.

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML Iframe sandbox Attribute
        </title>
    </head>

    <body>
        <h1>GeeksforGeeks</h1>

        <h2>HTML IFrame sandbox Attribute</h2>

        <br />
        <br />

        <iframe
            id="GFGFrame"
            src="https://ide.geeksforgeeks.org/tryit.php"
            width="400"
            height="200"
            sandbox
        >
        </iframe>
    </body>
</html>