New HTML5 Attributes of the IFRAME Element

Three new attributes improve the security of this versatile HTML element

HTML5 logo on screen

DavidMartynHunt / Flikr / CC BY 2.0

The iframe element embeds other web pages directly into the current page. HTML5 introduces three new attributes to this element to help address the security and usability concerns of the HTML4 iframe implementation.

The 'sandbox' Attribute

The sandbox attribute of the iframe element is a useful security feature for iframes. When you place it in an iframe element, the user agent disallows features that might present a security risk to the site and its users.

For example:

<iframe sandbox=

instructs the browser to disallow all features that might be a security risk — so no plugins, forms, scripts, outbound links, cookies, local storage, and same-site page access.

Then, using the sandbox keyword values, re-enable some of the features. These keywords are:

  • allow-forms: Allow form submission.
  • allow-same-origin: Allow scripts to access content like cookies from the same origin domain.
  • allow-scripts: Allow scripts to run in this IFRAME.
  • allow-top-navigation: Allow the iframe links and scripts to the "_top" target

Don't set both the allow-scripts and allow-same-origin keywords together on the same iframe. If you do, the embedded page can then remove the sandbox attribute, negating its security benefits.

The 'srcdoc' Attribute

The srcdoc attribute gives the web designer more control over the iframes as well as more security. Instead of linking to a web page at a different URL, the web designer places the HTML that is to display in an iframe inside the srcdoc attribute.

By placing HTML that is created by an untrusted source, such as a form, into an iframe you can sandbox the untrusted content and still display it on the page. Blog comments are an example. Most blogs offer only a limited number of HTML tags commenters can use in their comments. But by placing those comments in a sandboxed iframe using the srcdoc attribute, the comments can be more robust while still protecting the site as a whole.

Security and Iframes

The above two attributes provide security for your iframe elements, but they are not a defense against all malicious sites. If the malicious site can convince your site visitors to access the hostile content directly (such as by typing the URL into their browser) they can still be attacked.

If you can, set the content that is in the sandboxed iframe as the text/html-sandboxed MIME type.

The 'seamless' Attribute

The seamless attribute is a boolean attribute that tells the browser to display the iframe as though it were a part of the parent document. If you want your iframe to display seamlessly, just include this attribute in the element:

<ifr

But making the iframe seamless is more than just the look, it's also how the page interacts with the frame. Some tips:

  • Links in the iframe will open in the parent window unless the iframe page has the target "_SELF" set.
  • CSS in the iframe will be added to the cascade of the entire document.
  • The root element of the iframe page is considered a child of the iframe.
  • The width and height of the iframe are set in a similar fashion to how other block-level elements would be set.
  • When the parent document is viewed by a speech-rendering tool like a screen reader, the iframe would be read without announcing it as a separate document.

Any scripts on the parent document would affect the iframe document in the same way. For example, if a script listed all the frames on the page, the links in the iframe would be listed as well.

In other words, the seamless attribute does a lot more than just remove the borders from the iframe. If you are going to set an iframe to be seamless, you should be very sure of the contents so that you don't add any security risk to your website by embedding a malicious site.