7 facts about sandbox attribute • HTML5 iFrame


Wojtek Andrzejczak
7 facts about sandbox attribute • HTML5...

Learn three facts about the iFrame sandbox attribute. What HTML5 iFrame tag is and how you can use the sandbox attribute.

What is the HTML5 iFrame tag?

Inline Frame allows embedding interactive documents and content from different sources. In advertising, IFrames are used to embed tracking pixels to count user impressions or visits.

HTML5 iFrame / Example tag preview
HTML5 iFrame / Example tag preview

Why can iFrame be a problem?

Unfortunately, iFrames are very often used by attackers to extract user information from the website or inject different vulnerabilities like malware.

What is sandbox attribute?

Sandbox attribute allows restricting access to the iFrame content and what iFrame contents is allowed to access website content.

When the sandbox attribute is added to the iFrame tag, by default it will:

  • Treat the content as being from a unique origin.
  • Prevent form submission.
  • Prevent script execution.
  • Disable all available API’s.
  • Avoid links from targeting other browsing contexts.
  • Restrict the content from navigating its top-level browsing context.
  • Block automatically triggered features like video autoplay.

We can reduce the restrictions mentioned above by adding additional parameters to the used sandbox attributes:

  • allow-same-origin – Allows the iFrame content to be treated as being from the same origin.
  • allow-forms – allows sending forms.
  • allow-scripts – enables running scripts to run.
  • allow-modals – enables to open modal windows.
  • allow-popups – enables to open popups.
  • allow-top-navigation – allows the iFrame content to navigate its top-level browsing context.
HTML5 iFrame / Sandbox attribute / Example tag preview
HTML5 iFrame / Sandbox attribute / Example tag preview

Do browsers support it?

Yes, except Opera Mini.

HTML5 iFrame / Sandbox attribute / Browser support
HTML5 iFrame / Sandbox attribute / Browser support

Why would we like to use it?

To make sure 3rd party resources embedded on your website have restricted or limited access to the website resources.

How to detect if the sandbox attribute makes problems?

If a browser or iFrame scripts try to execute or access restricted resources, you can find this information in the console log.

HTML5 iFrame / Sandbox attribute / Chrome security error
HTML5 iFrame / Sandbox attribute / Chrome security error

Google Chrome plugins problems

Chrome plugins have an option to be injected into all iFrames on the currently loaded page. Plugin configuration manifest file defines this behavior.

Some plugins like LastPass require access to iFrames content to check, for example, if no form needs filling login and password.

HTML5 iFrame / Chrome extension manufest file
HTML5 iFrame / Chrome extension manufest file

Subscribe to receive updates about new articles.

Links

Show Comments (0)

Comments

Related Articles

Troubleshooting

HTTP Cache-Control • what should you know

Caching resources of our application or website is very important. We want to deliver content to the user in the shortest possible time.

Posted on by Wojtek Andrzejczak
Troubleshooting

MySQL & Mongo DB problem • slow database connection

If your website is slow, and it takes a few seconds to load a single page event. It could indicate MySQL or Mongo DB database problem with your configuration.

Posted on by Wojtek Andrzejczak