Breakout - The Frame Game


Just like the days of bell-bottoms, flower painted VW’s and the game of Breakout itself, fads seem to come back; and the Internet is no different. There was a time when using frames was the only way to make a large website easier to navigate and to this day quite a few websites still use frames.

Once DHTML and other navigation scripts began to take a hold, webmasters utilized all of their newfound space as ways of advertising. Just take one look at and you’ll see what I’m talking about.

Our problem lies in how do we protect our content or site from being trapped inside frames and believe it or not, visa versa.

When we talk of website security, we consistently talk about hot linking and bandwidth stealing and how to put a halt to it, or at least protect ourselves the best way that we can. All too often we see articles concerning .htaccess with Allow/Deny and re-write rules that do a pretty solid job of stopping all but the savviest of thieves. While these are effective, some have rediscovered the old trick of capturing a website or page within a frameset either by accident, or by design. Most of us have come across one of these sites at one time or another; you click on a link and someone else’s site loads in the main window frame. For those of you that haven’t, click here for a working example. If you’re a web master that has had this happen to your site, then you know the frustration of not being able to do anything about it, or at least you may not have thought so.

Today, we look for increased opportunities to promote our sponsors or up sell our sites. One of the newest practices (but still an old trick) is webmasters beginning to place their gallery images within actual web pages. By doing so, you can add banners, Meta tags and text to lure search engine bots and promote your sponsors. While this is an excellent idea, it’s these kinds of things that gets a site or yourself noticed; by both the good and the unscrupulous. By now you’re probably thinking just what does security, the use of frames, and putting content into web pages all have in common. During the times of heavy frame use, bandwidth and content thieves found standard sites easy pickings. All they had to do was to simply place a link within the main frameset to an outside site or page, the surfers would click on the link and Poof; there’s a page containing someone else’s content.

Our problem lies in how do we protect our content or site from being trapped inside frames and believe it or not, visa versa. While we always think of our content being caught in the throws of frames, there are those out there that will link to a page that was specifically built to be viewed within frames. Which poses an even bigger question, how can we keep our pages safe (forced) within our frameset? Let’s take a look at some snippets of code and answer these questions...

Our first tidbit is for those that run a standard non-framed site. In order to "Breakout" of a framed site within the same window, all we have to do is place the code below after the <HEAD>

if (window!= top)
// -->

In many cases the above code will be just fine and preferred for those that use other Java scripts within their page. A second more effective way of breaking out of unwanted framesets uses a <BODY OnLoad="CheckStatus()";>
snippet. Some of you may run into a problem with this especially having multiple OnLoad events. There’s a very simple solution to that problem which I’ll post to the forum for all to see. To use the more effective version, we have two steps:

• Step 1: Paste this code into your head tag

function checkStatus() {
page = self.location.href;
if (page != top.location.href) {
top.location.href = page;
return true;

• Step 2: paste this into your body tag

<BODY onLoad="checkStatus()";>

If your body tag includes background color, etc. You’ll want to paste the new text at the end of the beginning <BODY>
tag. Example:

<BODY bgcolor="#FFFFFF" background="path/file.gif" onLoad="checkStatus()";>
In other words, the offending site will be completely gone and the browsers back button isn’t going to bring it back.

As I mentioned before, both codes above will effectively break your page out of a frameset. The use of them will not only do so, but it will use the initial window in which your page was initially called. In other words, the offending site will be completely gone and the browser's back button isn’t going to bring it back. If you don’t want to blow out the offending site and just want to make sure your page or site breaks out of the frameset in a new window, then use the code below. Again, just paste the code into the head tag of your pages.

<SCRIPT language="JavaScript">

if (self != {;

Now, with all of that said, what about those that use sites with frames and don’t want standard sites to link to your separate pages? As in the examples above, our first step is to copy the code exactly as it below and paste it into the head tag. The second step is to change the location.href url ‘index.html’ to the url of your frameset page. This effectively forces that page to load your site (frameset) in the window and "breakout" of the offending non-frame site.


<!-- Begin
if (parent.location.href == self.location.href) {
// change the index.html below to the url of
// your frameset page...
window.location.href = 'index.html';
// End -->

Confused yet? Still with me? While none of the above is completely fool proof for breaking out of frames or even forcing your page back into them, they are a heavy deterrent and will work effectively against all but the most advanced scripting. With all of the security scripts and talk, just a simple piece of code can save you a ton of headaches.

And as I sit here reading back over the article, my son walks by and comments, "Hey dad, I remember that game, Breakout right? I use to play it!" and I replied, "I still do…." ~ Shiprekd