HTML <iframe> with sandbox Attribute

HTML <iframe> with sandbox Attribute

The sandbox attribute is used to enable an extra set of restrictions for the content in an <iframe>.

The following example will no attribute (sandbox) value will apply all restrictions.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <iframe src="/test/date" sandbox> <p>Your browser does not support iframes.</p> </iframe> </body> </html>

Attribute Value

ValueExplanation
- (no value)Applies all restrictions.
allow-formsRestrict all, except form submission.
allow-scriptsRestrict all, except Javascript.
allow-popupsRestrict all, except opening link with target _blank.
allow-modalsRestrict all, except modals like alert.
allow-same-originRestrict all, except AJAX request of same origin.

allow-forms

Restrict all, except form submission.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <h2>iframe allow form submit</h2> <iframe src="/test/form" sandbox="allow-forms"> <p>Your browser does not support iframes.</p> </iframe> <h2>iframe restrict all</h2> <iframe src="/test/form" sandbox=""> <p>Your browser does not support iframes.</p> </iframe> </body> </html>

allow-scripts

Restrict all, except Javascript.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <h2>iframe allow script</h2> <iframe src="/test/date" sandbox="allow-scripts"> <p>Your browser does not support iframes.</p> </iframe> <h2>iframe restrict all</h2> <iframe src="/test/date" sandbox=""> <p>Your browser does not support iframes.</p> </iframe> </body> </html>

allow-popups

Restrict all, except opening link with target _blank.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <h2>iframe allow popups</h2> <iframe src="/test/popup" sandbox="allow-popups allow-scripts"> <p>Your browser does not support iframes.</p> </iframe> <h2>iframe Restrict all</h2> <iframe src="/test/popup" sandbox=""> <p>Your browser does not support iframes.</p> </iframe> </body> </html>

allow-modals

Restrict all, except modals like alert.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <h2>iframe allow modals</h2> <iframe src="/test/modals" sandbox="allow-modals allow-scripts"> <p>Your browser does not support iframes.</p> </iframe> <h2>iframe Restrict all</h2> <iframe src="/test/modals" sandbox=""> <p>Your browser does not support iframes.</p> </iframe> </body> </html>

allow-same-origin

Restrict all, except AJAX request of same origin.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <h2>iframe allow Same Origin</h2> <iframe src="/test/same-origin" sandbox="allow-same-origin allow-scripts"> <p>Your browser does not support iframes.</p> </iframe> <h2>iframe restrict all</h2> <iframe src="/test/same-origin" sandbox=""> <p>Your browser does not support iframes.</p> </iframe> </body> </html>

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author