HTML <iframe> with sandbox Attribute

❮ PrevNext ❯

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>
Run

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>
Run

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>
Run

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>
Run

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>
Run

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>
Run

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