Skip to content
Related Articles

Related Articles

Improve Article

How to enable extra set of restrictions for content in an iframe element in HTML5 ?

  • Last Updated : 14 Apr, 2021

Approach : The approach of this article is to learn how to enable an extra set of restrictions for the content in an iframe element in HTML5. The task can be done by using the sandbox attribute of the <iframe> element. It is used to permits an additional set of restrictions for the content within the iframe. 

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Below are the list of pre-defined values that sandbox attribute have –

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

Syntax:



<iframe sandbox="value">

 

Example:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>
        How to enable an extra set of
        restrictions for the content in
        an iframe element in HTML5?
    </h2>
  
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <br><br>
  
    <iframe id="GFGFrame" src=
        width="400" height="200" sandbox>
    </iframe>
</body>
  
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :