Navigation
7 facts about sandbox attribute • HTML5 iFrame

7 facts about sandbox attribute • HTML5 iFrame


Wojtek Andrzejczak
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

Links


  • Contact Me
    Contact me if you need advice or if you need help. Would you please choose the most suitable contact channel for you?
  • My Services
    If you need a technical specialist to technical support to fix your problems, you are in the right place.
  • Who I am
    Hello, my name is Wojtek, I’m an experienced Software Engineer, with many many years of experience in the advertising industry.

Subscribe to receive updates about new articles.

[newsletter_form button_color=”#E74C3C”]
Show Comments (0)

Comments

Related Articles

3 most common HTML5 creatives performance mistakes
Guidelines for creatives

3 most common HTML5 creatives performance mistakes

Learn how to improve HTML5 creatives loading performance and avoid common mistakes.

Posted on by Wojtek Andrzejczak
Dynamic Creatives for Programmatic DOOH
Programmatic

Dynamic Creatives for Programmatic DOOH

Since Programmatic Digital-Out-Of-Home (DOOH) is getting more popular, it also brings questions about how we could take an advance it. One of those advantages can be Dynamic...

Posted on by Wojtek Andrzejczak