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:
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.
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
IFRAMEare 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
IFRAMElinks and scripts to the
It is not a good idea to set both the
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.
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
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.
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:
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
IFRAMEwill open in the parent window, unless the
IFRAMEpage has the target
- CSS in the
IFRAMEwill be added to the cascade of the entire document.
- The root element of the
IFRAMEpage is considered a child of the
- The width and height of the
IFRAMEare 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
IFRAMEwould be read without announcing it as a separate document.
- Any scripts on the parent document would affect the
IFRAMEdocument in the same way. For example, if a script listed all the frames on the page, the links in the
IFRAMEwould 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.