Frame-busting JavaScript code - order of execution

StackOverflow https://stackoverflow.com/questions/23408583

Question

We have a problem in our code where a previous developer attempted to put in preventative measures for frame-busting (to stop clickjacking), which is a term I'm not that switched on about. Anyhow, they put the following code in the top of all of our .aspx pages, not even within the head element, above it.

<script type="text/javascript">    
if (self == top) {
    var theBody = document.getElementsByTagName('body')[0]
    theBody.style.display = "block"
} else {
    top.location = self.location
}

So apparently it is important for security the problem is we are getting an issue because theBody above is undefined because the body tag hasn't loaded yet. So to stop the js code break we cut and paste the above script into the bottom of the page. This is a fix of sorts. We just wondered if this approach invalidates the actual reason for having the code in the first place. Could anyone give me some advise on this?

Was it helpful?

Solution

The most effective way to prevent Clickjacking is to output the X-Frame-Options response header with a suitable value, such as DENY:

X-Frame-Options: DENY

Browsers check for this and will prevent the page from being framed, depending on the value.

Frame busting JavaScript is used as a fall back for old browsers that don't support the X-Frame-Options header (IE7 and lower for example).

As for your body error, the body element only becomes available after the browser interprets it in the HTML and creates it in the DOM. This is why your code shows the error when executed before the body tag. You would have to ask the developer why they are setting the body to display:block with this code. Perhaps the body is display:none by default in your CSS?

OTHER TIPS

I was researching on the same and found this additional information. Specifying the option DENY will prevent the pages to be framed. We can use the SAMEORIGIN option if we want to frame a page in another web page of the same origin. Same origin means having same URI scheme, hostname, and port number. However, DONT use SAME ORIGIN if you have any page on your domain which accepts an arbitrary URL to frame. It will not be able to mitigate the attack. Refer this article for further details.

Well, as others have explained correctly, 'X-Frame-Options' response header would be the effective way to handle it. But, if you want to have the frame bursting code as a fall back, you could do this in the HEAD element.

  1. Apply styles first
  2. Delete the style or keep it based on if the current window is the topmost one or not (way to know if the page is framed)

<head>
    <!-- other tags -->
    <style id="theBody">
      body{display:none !important;}
    </style>
    <script type="text/javascript">
      if (self === top) {
        var theBody =document.getElementById("theBody");
        theBody.parentNode.removeChild(theBody);
      } else {
        top.location = self.location;
      }
    </script>   
</head>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top