HTML | sandbox Attribute

Last Updated : 06 Feb, 2023

The sandbox attribute permits an additional set of restrictions for the content within the iframe. When the sandbox attribute exists, and it will:
treat the content as being from a singular origin:

It blocks form submission
It blocks script execution
It disables APIs
It also preventing links from targeting other browsing contexts
It stops the content to navigate 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 which will take away the actual restrictions.
Supported tags:

<iframe>

Attribute Values

no-values: applies all restriction
allow-forms: Re-enables form submission
allow-pointer-lock: Re-enables 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:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML sandbox attribute
    </title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML sandbox attribute</h2>
 
    <button onclick="myGeeks()">
        Click Here!
    </button>
 
    <br>
    <br>
 
    <iframe id="GFGFrame"
            src="https://ide.geeksforgeeks.org/tryit.php"
            width="400"
            height="200"
            sandbox>
    </iframe>
 
    <p id="GFG"></p>
 
 
 
 
    <!-- script to access iframe element -->
    <script>
        function myGeeks() {
            var x = document.getElementById("GFGFrame").src;
            document.getElementById("GFG").innerHTML = x;
        }
    </script>
</body>
 
</html>