In this article, we will learn how to enable an extra set of restrictions for content in an iframe element in HTML5. Below are the approaches for enabling the set of instructions.
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 permit 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.
Below is the list of pre-defined values that sandbox attributes have –
- no-values: applies all restrictions.
- 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 the iframe to be treated as being from the same origin.
- allow-scripts: Re-enables scripts.
- allow-top navigation: It Allows the content of the iframe to navigate its top-level browsing context.
Syntax:
<iframe sandbox="value">
Example: In this example, we will enable an extra set of restrictions for content in an iframe.
<!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: