Frame-busting JavaScript code - order of execution

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?

Answer 1

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?