You’ve been Framed- how to break free!

I started building websites in around 1997. The web was a fun tool to play with, but we were all learning and not really thinking about the consequences of what we were doing. Frames were used across the board- it was a convenient way of showing multiple pages and content on one page. From around 2003 frames started to be frowned upon. They were bad for SEO (search engines would spider each frame separately), bad for accessibility and just, well, bad. CSS had started to become much more popular and supported by the major browsers and so it became easier to place content on the page in a similar way to what frames offered.

It’s 2012, so you’d have thought frames had long gone. But no- they’re back and I’m starting to see them popping up everywhere. It’s frustrating because you can spend so much time on making your website look beautiful and then someone frames it in another page- all that work down the drain. StumbleUpon and Visibili are the most notable culprits here.

How to break out of a frame

I’m not saying anything new here. This method has been around for more than 15 years! However, since frames are becoming more common, I think it’s time for a refresher. It is really easy to do, but I’d like to spend a bit of time explaining how it works. If you’d rather not know, just scroll down to the bottom of this article…

We need to detect whether our web page has been put in a frame or not. The only way to do this is by checking using Javascript. Since Javascript runs on the visitor’s computer, it can tell us this information easily. Server side languages such as PHP and ASP can’t give us this information because they run on the server.

Top O’ The Mornin’ to ya…

Javascript has a special property called “top“. This can tell us the location of the “top” window in the browser. If the page is not in a frame, then this will be the url of the page, if it is in a frame, it will return the parent page (the horrible nasty page that is framing us!). The location can be found by using or top.location for short.

There is another property called “self” which can tell us the location of the current window in the browser. So by asking if top equals self we can find out whether we’re framed or not:

if (!=window.self.location)
alert("Agggh, I\’ve been framed!")
alert("Ah, I feel as free as a bird…")

If you’re not familiar with Javascript or other programming languages then all you need to know is that “!=” means “not equal to” and the “alert()” bit opens an alert window in the browser with the text.

So, how do we actually break out of the frame? This sounds like it could be the complicated part? We could redirect the page to the location of the top, and this is in effect what we need to do, but it is really simple. All we need to do is make = window.self.location. Javascript then takes care of the rest. Also, you don’t need to include the word “window”, so you can just say top.location = self.location and you’re done!

Here is the finished script:

if (top.location != self.location)
top.location = self.location;

All you need to do is add this to your javascript file and you’ll be as free as a bird. If you use WordPress there are plugins to do this for you- check out the WP Frame Breaker.