In this post I presented a way to prevent a site you were (i)framing from frame busting out. Jeff Atwood recently contacted me to see if I knew a way to get around the prevention (to prevent sites from framing stackoverflow.com), which of course I didn’t, but I told him I’d think about it and see if I could come up with something. A week later I had come up with a few ideas but none actually worked.
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.
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:
<!-- 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.
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 probly 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:
<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:
<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):
<script>
function bust() {
if (top != self)
setInterval("top.location.replace('http://cached-bust-out-page.com/with/redirect')",1);
}
</script>
<!-- cache it! -->
