HTML | <iframe> sandbox Attribute

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



Syntax:

<iframe sandbox="value">

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM IFrame Object Property
    </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>DOM IFrame Object Property</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>

chevron_right


Output:

Supported Browsers:The browsers supported by HTML video preload Attribute are listed below

  • Google Chrome 4.0
  • Firefox 4.0
  • Apple Safari 4.0
  • Opera 10.5
  • Edge

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.