HTML <iframe> with sandbox Attribute

February 10, 2021 7:26 pm IST

You are Here:

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

Value	Explanation
- (no value)	Applies all restrictions.
allow-forms	Restrict all, except form submission.
allow-scripts	Restrict all, except Javascript.
allow-popups	Restrict all, except opening link with target _blank.
allow-modals	Restrict all, except modals like alert.
allow-same-origin	Restrict 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