Framing – Frame Breaking – Anti-Frame Breaking And What It All Means

What exactly is all the fuss about frames, frame breaking and Anti-frame breaking?

If you have been online for any decent amount of time (more then a month for instance), then you most likely understand what a frame is. If you have no clue what a frame is, then perhaps this post may not be for you. But I will include some basics anyways.

 

Frames In Websites

We are talking about HTML and other programming language frames that reside within or above websites. Frames allow many websites to work properly to show content within a page. These were used quite extensively in the early days to allow webmaster to put subsections within their sites.

See W3 page on the specifics of building frames using HTML here:

http://www.w3.org/TR/html401/present/frames.html

Frames were used primarily as a formatting tool to break the website page into sections. This could normally be seen to have a scrolling framed menu for instance on the left and direct content such as the post on the right hand side within it’s own frame.

This meant you could have sections with or without their own scrolling and be more creative with your layouts.

 

Along Came CSS

When CSS began being used to control formatting of website content many people stopped using frames altogether. There were simply more efficient ways to handle on-page elements such as using the div tag and “floating” elements.

Check out the W3Schools Css Tutorials section here for great information on using CSS: http://www.w3schools.com/css/

With CSS gaining ground many webmasters and CMS systems, such as WordPress, switched over to this more efficient method of handling document elements. In truth, you will not likely find too many reasons to add a frame in most newer versions of any CMS at this point. (sure there might be a couple, but you can build hundreds of websites without using a single Iframe tag).

 

The Problem With Frames May Not Be You

The problem is that there is one major use of frames, and even in the early days many people used it for this purpose, including myself.

That one purpose is to “frame” someone else’s content on your own website.

Now you might not think this is too bad, so what if someone wants to frame your content on their website. You still get the traffic right? Well maybe not.

So you might have a legitimate reason to want to frame content, such as Digg using a menu bar or some other site, such as ViralUrl or other link trackers / link-cloaking sites.

Even traffic Exchanges, such as RealHits4U.com, require the use of frames in order to properly promote your website. This is because they will “frame” your website into a smaller section of their own website in order to display their countdown timers, menu, and their own advertisements.

There is however and EXCEPTION and that is “bad guys”.

 

How Bad Sites Are Using Frames Against You – Click-Jacking

If you have never heard the term “click-jacking”, don’t be surprised. Many people and all too many webmasters have never heard the term. This is simply the common term for “Click Hi-Jacking”.

So how does someone hijack your website traffic? Well, unfortunately it is fairly simple. They put your website into a frame on their website. That is step one. Now they can include anything they want in the other frames, such as a banner add to their own affiliate program or even something more malicious such as Trojans or virus sites.

This can be further problematic in that some malicious site owners will use transparent images over your own page links. Since you cannot truly control what is on their site, this means that they can truly cause trouble, such as ruined reputation, stolen affiliate commissions or even stolen account information.

This has been a problem for years, as this post illustrates:

http://www.codinghorror.com/blog/2009/06/we-done-been-framed.html

 

If an evil website decides it’s going to frame your website, you will be framed. Period. Frame-busting is nothing more than a false sense of security; it doesn’t work. This was a disturbing revelation to me, because framing is the first step on the road to clickjacking:

 

A clickjacked page tricks a user into performing undesired actions by clicking on a concealed link. On a clickjacked page, the attackers show a set of dummy buttons, then load another page over it in a transparent layer. The users think that they are clicking the visible buttons, while they are actually performing actions on the hidden page.The hidden page may be an authentic page, and therefore the attackers can trick users into performing actions which the users never intended to do and there is no way of tracing such actions later, as the user was genuinely authenticated on the other page.

For example, a user might play a game in which they have to click on some buttons, but another authentic page like a web mail site from a popular service is loaded in a hidden iframe on top of the game. The iframe will load only if the user has saved the password for its respective site. The buttons in the game are placed such that their positions coincide exactly with the select all mail button and then the delete mail button. The consequence is that the user unknowingly deleted all the mail in their folder while playing a simple game. Other known exploits have been tricking users to enable their webcam and microphone through flash (which has since been corrected by Adobe), tricking users to make their social networking profile information public, making users follow someone on Twitter, etc.

 

How Do You Prevent “Being Framed”?

One of the most common techniques to prevent framing actually lies within the browser itself. This has to do with JS (JavaScript), and how the browser works.

This site give a nice outline of how to “Prevent Framing”: http://dev.fyicenter.com/Interview-Questions/HTML/Is_there_a_way_to_prevent_getting_framed_.html

The basic idea is to block the ability for the browser to “frame your site”.

See this section of code listed below:

<script type="text/javascript">
if (top.frames.length!=0) {
    if (window.location.href.replace)
top.location.replace(self.location.href);
    else
top.location.href=self.document.href;
}
</script>

Here is another example:

<script type="text/javascript">
function breakOut() {
    if (self != top)
        window.open("my URL","_top","");
}
</script>
</HEAD>
<BODY onLoad="breakOut()">

One note of interest here is that this will only work “when the users browser has JS enabled”. Seems pretty obvious as it is a JavaScript, but people ask.

The basic objective is to cause your framed page to break out into a top level page of it’s own. Effectively preventing the site from being framed at all.

This code should be added to your site header for every page.

Another option, for those of us who love plugins is this simple plugin to do just this:

Frame Buster Plugin – http://wordpress.org/plugins/sem-frame-buster/faq/

 

Beware The Frame Breaker

Here is an important note. Much like locking your car only “deters” car theft and does not prevent it entirely, neither will frame breaking prevent anyone who is intent on stealing your content or clicks if they are truly determined to do so.

Also consider that you are not alone, and sites even as big as Twitter have been attacked in the past: http://dsandler.org/wp/archives/2009/02/12/dontclick

We will work on other methods to prevent and secure your content but just be warned, nothing is ever truly safe. Don’t think that just because you are using frame breakers that no one can use your content in a framed site or browser. technology and techniques are constantly changing.

 

Building Better Mouse Traps – Anti Frame Breaker

Like anything, because things change, there will always be a case of someone building a better mouse trap. It is often even those who built the fix in the first place. For you see, even frame breakers are not perfect in that they can often still be prevented, such as this code below:

Here’s a very simple way around “frame-breaking” which works in both FF and IE7: (update, a way to work around this prevention here)

1
2
3
4
5
6
7
8
varprevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
  if(prevent_bust > 0) {
    prevent_bust -= 2
    window.top.location = 'http://server-which-responds-with-204.com'
  }
}, 1)

The author’s write up touched on the subject that browser requests will leave you on the same page, such as a 204 (No Content) HTTP, which can “override the previous frame busting attempt, rendering it useless”. 

This means that even though you might have a “frame-buster” in place, such as the WordPress plugin, there is no guarantee that someone smarter or more persistent comes along to outsmart your security measures.

The author here goes on to continue  with a method to prevent click-jacking in “most cases”. See below:

First, have your page load with all content hidden using CSS. Something along the lines of:

1
<bodystyle="display:none"...>

Then use some variant of the frame busting code, but instead of busting, use it to determine whether or not to display your content:

1
2
3
4
5
6
7
8
try{
  if(top.location.hostname != self.location.hostname)
    throw1;
  document.body.style.display = 'block';
} catch(e) {
  // possible clickjack attack, leave content hidden
}

The above method basically hides your content from a standard browser window, Until such time as the window has tested whether or not your page is being loaded from your hosted web-server.

While we like this approach, this may still not account for sites hosting a frame from the same web-server, such as the case with shared hosting. It may also not account for peoples ability to “spoof” server information in some manner.

 

ANTI – (Anti – Frame Breaker) – What the heck?

If you build a security measure, some preventative structure or a method of keeping things secure, it will never fail that someone WILL eventually come along and find a manner around those measures.

So to clear this up:

  1. Frames Come First (Frame someones content)
  2. Frame Breakers came next (Keeping your content from being framed)
  3. Anti-Frame Breakers (Keeping frames when people don’t want you to frame their content)
  4. ANTI-(Anti-Frame-Breaker) (REALLY preventing someone from framing your content)

Where does building better mouse traps end? Someday, somewhere, someone will develop the Anti-(anti-(anti-frame-breaker) Breaker Frame. Who knows what the future will bring. But until that happens, let’s take a look at what the author offers to prevent content framing:

You can see the entire article here: http://coderrr.wordpress.com/2009/06/18/anti-anti-frame-busting/

 

See updates below for latest/best solution

 

But, due to some extra motivation from his post today (which links to my original post), I may have just come up with something.

 

1
2
3
4
if (top != self) {
  top.location.replace(document.location)
  alert('busting you out, please wait...')
}

It’s so stupid simple, but it seems to actually work. If you present an alert() box immediately after changing top.location you prevent the browser from running any more JS, either from your framed site or from the framing site.

 

But you don’t prevent the browser from loading the new page.

 

So as long as the alert box stays up for a few seconds until the browser has loaded enough of the new page to stop running scripts on the old page, then the anti frame busting code never runs and you successfully are busted out once the user clicks OK on the alert.

 

I’ve just done a preliminary test of this in FF3 and IE7 and it worked in both. So I’m calling it, anti-anti-frame-busting is here!

 

Update: Jason brought up in a comment the issue of a user clicking OK before the page finished loading in which case the anti-frame-bust will still prevent you from busting. One thing you can do to make sure that the page loads extremely quickly so that no user will be able to click OK before that is to (pre-)cache it. Here’s an example:

 

1
2
3
4
5
6
7
8
9
10
11
12
<!-- this is the page being framed -->
  <script>
    function bust() {
      if (top != self) {
        // this page is now cached and will load immediately
        top.location.replace("http://page-with-expires-headers.com/")
        alert('busting you out, please wait...');
      }
    }
  </script>
  <!-- cache it! -->
 

You should have these headers on the page to bust out with.

1
2
Expires: Sun, 19 Aug 2012 14:10:44 GMT    <-- far enough in the future
Last-modified: Fri, 19 Jun 2009 04:24:20 GMT    <-- now

First the framed page will do the initial load of the cached page in an iframe (which you can make hidden). Now that page will be cached and the next time you visit it the browser should make no network requests, loading the page completely from its local cache.

 

For this technique to work you’ll probably want to use it with a blank page which contains only a JavaScript/meta redirect to the actual page that was being framed. For example:

 

1
2
3
4
<html><body>
  redirecting...
  <script> if (self == top) top.location='http://site-to-redirect-to.com/'; </script>
</body></html>

Update: On IE7 this caching technique alone is good enough to prevent anti-frame-busting. Meaning no alert() is required after the top.location change. At least this is true for a simple page which only consists of a javascript redirect:

 

1
2
3
4
5
6
7
8
9
<html>
  <body>
    we've busted out!  redirecting...
    <script>
      // only redirect if we're busted out
      if (top == self)  top.location = "http://original-page.com";
    </script>
  </body>
</html>

Update: The holy grail of anti-anti-frame-busting: This code, along with the caching technique described above, works in both FF3 and IE7 and has no negative user-experience (ie. alert boxes or frozen browsers):

 

1
2
3
4
5
6
7
8
<script>
  function bust() {
    if (top != self)
      setInterval("top.location.replace('http://cached-bust-out-page.com/with/redirect')",1);
   }
</script>
<!-- cache it! -->

Even this above script codes may not be perfect into the future. Again, only time will tell. Using such items as alert boxes and user dialog boxes may be a great method to implement this technique, but it may also present confusion issues to users.

Also, as technologies change, such as the case with all programming languages that have evolutionary progress, so to will change how users interact with your websites. Even now, mobile browsers are an entirely new set of browsers to work with. Perhaps they will not share all the same intricacies as their desktop counterparts.

 

What All The Framing and Breaking Mean To You

You might at first glance notice the age of the article as being from 2009. But please note that many, many users who are surfing the net are using out-dated computers with considerably older versions of Windows to surf the Internet.

Perhaps you were not even aware of “frames” being used in this manner, or had not even heard of “click-jacking”. Either way, you should be aware of what they are and how they can be used maliciously in order to take preventative measures to protect yourself and your websites.

To be honest, I was not originally planning an article about this topic, but during normal daily checks through the site logs I noticed “non-traditional” pages reloads. Since it had been a while sinc eI had done any major JavaScripting, and I knew the site should not have any normal reason to be using different JS reload patterns, as well as those refreshes coming from IP Addresses outside of the country (Yes I check these things out), I figured I would do this write-up.

In case your not aware, there are over 500 different manners of which to refresh a page in a browser. And this is just with JavaScript.

http://stackoverflow.com/questions/7014796/535-ways-to-reload-the-page-with-javascript-what-are-the-consequences

Now the point is why does it matter how many ways there are to refresh a page? Well, because when a page refreshes it can provide users with content. The question becomes is it your content or someone else’s. Once someone else frames your site they can manipulate the interaction with that content.

It is quite common to see your own content frame by another site, altered, passed off as someone else’s, affiliate links changed (which means lost sales and commissions), and who knows what else.

In general, we now take the viewpoint that someone “framing” our content means they likely have malicious intent: attempting to steal bandwidth resources or cause trouble in some manner (overloading a website).

Frames can be an integral tool of any webmaster and like any tool they can be used for both good and bad intentions. Will you ever likely be a victim of framing? No one really knows, however you can be aware of it as a potential treat to your sites in the event you do become a target.

While we feel these approaches listed above will make an impact in frame blocking for you, this issue of framing and clickjacking still needs further review and testing to find more effective methods of prevention in the future.