Content framing has a long history on the WWW, first being introduced by Netscape Navigator 2 in 1996. Not to be outdone in the browser war, Internet Explorer countered a year later with a new element of their own, the inline frame, or <iframe>. Iframes are more flexible than the regular kind since they can be placed anywhere within the body.
Nowadays, old-school (Netscape style) frames have fallen out of fashion, but iframes are more popular than ever. They’re used for advertising, social plugins (e.g. Facebook “like” buttons and “Share on Twitter” functionality), webpage widgets, and so on.
3D Social Media Icons © 2012 by ragtech. Licensed by CC BY 3.0
Iframes are the only way to sandbox a portion of the displayed content on a page from other elements. Want to include ready-made buttons on your site for sharing to various social media without risking them screwing with your layout, CSS or javascript? Iframes are most likely your safest bet.
Prevalance
Just how popular are iframes? Not all websites have them but those that do tend to have quite a lot. To find out, I recently crawled the top ranking sites on the web and counted the iframes. Most iframes are dynamically generated by javascript, so you need to use a crawler which evaluates js. I wrote about the method I used in a follow-up post.
72% of the Alexa top 5000 sites have iframes on their landing pages. Of those, each has on average 7.1 iframes. Some sites have well over 50 frames.
Of all these 25,849 iframes on the top 5000 sites, only 10 use the HTML5 sandbox security attribute. That’s a whopping 0.04%! We’ll learn more about this attribute in a bit.
Examining the top 50 sites, there are a lot fewer iframes. But no one is using the aforementioned sandbox attribute. Of the top 1000, only two sites employ it.
Security Concerns
So iframes are the way to go to add third-party content and widgets to websites and they’re wildly popular. However, external content is completely beyond your control. It can control the browser and the user experience to a degree. Unrestricted iframes can run javascript, Flash and other plugins, open pop-up windows, and even navigate from the containing page. If the site is just intended to display an ad or social button, does it really need to be able to do all (or even any) of these things?
The options for exploitation are numerous. The cute social button you found somewhere online may be useful now, but the author might abandon it later on. When the domain serving the button iframe expires, someone might register it and serve malware instead of the button. This would suddenly make your site spew out malware, mildly annoying your visitors. Ads can also be dangerous. They are supposedly reviewed by ad networks but misbehaving ones have been known to slip through.
The New York Times was hit by a rogue ad.
This is not just a hypothetical possibility. Rogue ads have appeared on mainstream sites, for instance trying to infect users with malware or redirecting browsers to dodgy corners of the net.
HTML5 Security Attributes
HTML5 introduced new attributes which help restrict allowed actions for iframed content. The sandbox attribute allows fine grained control of javascript, forms, popups, same origin policy and top navigation. It’s even supported by all the latest browsers.
Eventbrite uses the sandbox attribute.
Great! So how do you enable the sandbox for ads displayed on your site? Well… the sad answer is you probably can’t. The ad-serving iframe markup on your site is generated by a javascript from the ad network - javascript which you don’t control.
Actually there is a trick you can use - wrapping the ad-generating code in your very own iframe and sandboxing that one. Unfortunately, this might be considered a violation of the ad networks’ policy. AdSense discourages users from “manipulating the ad targeting using hidden keywords, IFRAMEs, or any other method”.
The Way Forward
How can we start fixing up the iframe security hole? HTML5 Rocks has an example of how to add the sandbox attribute to Twitter’s tweet button. The same process can - and should - be applied to all the iframes you place on your website. And if you aren’t allowed to modify the iframe code, as is the case for many advertising networks? Carefully consider whether the payoff is worth the risk of granting control of your website to an external party.
Photo credit: Suðureyri, Iceland. Own photo.