Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Enable an extra set of restrictions for the content in an in HTML?
The sandbox attribute in HTML enables an extra set of restrictions for the content loaded in an <iframe> element. This attribute acts as a security feature that applies various limitations to the embedded content, preventing potentially harmful actions like form submissions, script execution, or navigation to other pages.
The sandbox attribute provides a way to isolate iframe content and control what the embedded page can do, making it safer to embed third-party content on your website.
Syntax
Following is the syntax for the sandbox attribute −
<iframe src="url" sandbox></iframe>
The sandbox attribute can be used in two ways −
<!-- Empty sandbox (most restrictive) --> <iframe src="url" sandbox></iframe> <!-- Sandbox with specific permissions --> <iframe src="url" sandbox="allow-scripts allow-forms"></iframe>
Sandbox Values
The sandbox attribute accepts the following space-separated values to selectively enable specific capabilities −
| Value | Description |
|---|---|
allow-forms |
Allows form submissions within the iframe |
allow-scripts |
Allows JavaScript execution in the iframe |
allow-same-origin |
Treats content as being from the same origin as the parent |
allow-top-navigation |
Allows the iframe to navigate the top-level window |
allow-popups |
Allows the iframe to open popup windows |
allow-pointer-lock |
Allows the iframe to use the Pointer Lock API |
Empty Sandbox (Most Restrictive)
When used without any values, the sandbox attribute applies the most restrictive security policy possible.
Example
Following example shows an iframe with empty sandbox attribute −
<!DOCTYPE html>
<html>
<head>
<title>Empty Sandbox Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Sandboxed Iframe (Most Restrictive)</h2>
<iframe src="data:text/html,<h3>Sandboxed Content</h3><p>This content cannot execute scripts or submit forms.</p>"
sandbox
width="400"
height="150"
style="border: 2px solid #ccc;">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
The iframe displays the content but with maximum security restrictions applied −
Sandboxed Iframe (Most Restrictive) ??????????????????????????????????????? ? Sandboxed Content ? ? This content cannot execute ? ? scripts or submit forms. ? ???????????????????????????????????????
Sandbox with Specific Permissions
You can selectively enable specific capabilities by providing space-separated values to the sandbox attribute.
Example − Allowing Scripts
Following example shows how to allow JavaScript execution in a sandboxed iframe −
<!DOCTYPE html>
<html>
<head>
<title>Sandbox with Scripts</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Sandboxed Iframe with Script Permission</h2>
<iframe src="data:text/html,<script>document.write('<h3>Script Executed!</h3><p>Current time: ' + new Date().toLocaleTimeString() + '</p>');</script>"
sandbox="allow-scripts"
width="400"
height="120"
style="border: 2px solid #4CAF50;">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
With allow-scripts, the iframe can execute JavaScript and display dynamic content −
Sandboxed Iframe with Script Permission ??????????????????????????????????????? ? Script Executed! ? ? Current time: 10:30:45 AM ? ???????????????????????????????????????
Example − Allowing Forms and Scripts
Following example demonstrates an iframe that can handle both forms and scripts −
<!DOCTYPE html>
<html>
<head>
<title>Sandbox with Forms and Scripts</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Sandboxed Iframe with Form and Script Permissions</h2>
<iframe src="data:text/html,<form onsubmit='alert("Form submitted!"); return false;'><input type='text' placeholder='Enter text' style='margin: 5px;'><button type='submit'>Submit</button></form>"
sandbox="allow-scripts allow-forms"
width="400"
height="80"
style="border: 2px solid #ff9800;">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
This iframe can process form submissions and execute JavaScript to show alerts when the form is submitted.
Common Use Cases
The sandbox attribute is particularly useful in the following scenarios −
-
Embedding third-party content − When displaying content from external sources that you don't fully trust.
-
User-generated content − When allowing users to embed HTML content in your application.
-
Advertisement iframes − To prevent ads from interfering with your main page functionality.
-
Content preview − When showing preview of HTML content before publishing.
Browser Compatibility
The sandbox attribute is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It is part of the HTML5 specification and widely adopted across web platforms.
Conclusion
The sandbox attribute provides essential security controls for iframe content by applying restrictions that prevent potentially harmful actions. Use an empty sandbox for maximum security, or combine specific values like allow-scripts and allow-forms to enable only the functionality you need while maintaining safety.
75 Views
