1. Technology

New HTML5 Attributes of the IFRAME Element

Content, Security, and Design Attributes for IFRAME

By

HTML5 Logo on Screen
DavidMartynHunt/Flikr/CC BY 2.0

The IFRAME element allows you to embed other web pages directly into your web page. But when using iframes there are some security and design issues that were not addressed in HTML 4.01. HTML5 brings three new attributes to this element to help address these concerns:

The sandbox Attribute

The sandbox attribute of the IFRAME element is a very useful security feature of iframes. When you place it in an IFRAME element, you are instructing the user agent to disallow features that might cause a security risk to the site and its users.

For example:

<iframe sandbox="">

Tells the browser to disallow all features that might be a security risk. Specifically:

  • plugins are disallowed
  • forms cannot be submitted
  • scripts will not run
  • links outside of the IFRAME are not allowed
  • access to cookies, local storage, and other pages on the same domain (origin) are not allowed

Then, using the sandbox keyword values, you can 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

It is not a good idea to set both the allow-scripts and allow-same-origin keywords together on the same IFRAME. If you do this, the embedded page can then completely remove the sandbox attribute, negating any security benefits.

The srcdoc Attribute

The srcdoc attribute is an attribute that 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.

At first, you might be thinking, “how is this any different than putting the HTML right in the page?” And in some ways, it isn't terribly different. But you have to keep in mind one of the functions of the IFRAME element, which is to keep untrusted data separate from the rest of the site.

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. For example, blog comments. Most blogs have 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 proof against all malicious sites. If the malicious site can convince a user to access the hostile content directly (such as by typing the URL into their browser) they can still be attacked.

If possible it's best to 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:

<iframe seamless>

But making the IFRAME seamless is more than just the look, it's also how the page interacts with the frame. For example:

  • 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.

©2014 About.com. All rights reserved.