Clickjacking Protection


Clickjacking is a method where a user is tricked into clicking a concealed link meaning that user's could be tricked into doing something they did not intend. For commercial sites and social networking sites this can often have disastrous consequences.

According to security researching sites even the top 500 sites ranked by Alexa are vulnerable to clickjacking despite their attempts at blocking it. One of the more well known clickjacking attempts was in embedding Twitter on a site which would post status updates without the user's knowledge. Even after they closed up that vulnerability they had left open the vulnerability in their mobile version of the page which meant further attacks.

It's important to remember that this isn't about protecting your site, it's about protecting your users which does of course benefit your site as well. One of the most common ways of protecting against clickjacking is to use a "framekiller" JavaScript which will break the site out of a frame if it has been embedded inside one. A very simple example of this is as follows:

<script type="text/javascript">
  if (top != self) top.location.replace(location);

However this is very easy to work around so there are ways in which you can improve this. The problem though is that as long as you're only using JavaScript there will always be ways of working around it. For instance, if the end-user is using Internet Explorer then you could use the following to break the framekiller:

<iframe security="restricted">

This will prevent the JavaScript in the embedded website from working so any framekiller JavaScript you add to the page will not work. There are also ways of tricking the browser into thinking that the framekiller JavaScript is a cross-site scripting attack.

So there has to be a better way to do this, without using JavaScript. Fortunately browser developers have also been thinking the same and have introduced a new header, X-FRAME-OPTIONS, which specifies the behaviour for a page when it is inside a frame. This has the following options:

  • SAMEORIGIN: can only be embedded inside frames on pages within the same domain,
  • DENY: can not be embedded within a frame on any page no matter what the source.

You can either send this header on per-script basis or for all resources on your site. If you're using PHP then a simple way of sending the header is to use:

   header('X-FRAME-OPTIONS: sameorigin');

If instead you want to send the header for all resources then in Apache you will need to ensure you have mod_headers included so that you can add the following to either a virtual host or your httpd.conf:

Header always append x-frame-options SAMEORIGIN

With IIS you can also send this header by right-clicking on your site and going to properties. From the window that appears click on the HTTP Headers tab and then add this as a custom header.

Unfortunately as this is a new standard it is not supported by all browsers. At present it is supported by:

  • IE8+
  • Firefox 3.6.9+ (or with the NoScript addon)
  • Opera 10.50+
  • Safari 4.0+
  • Chrome

So the browsers which are listed above or newer will have the best protection, but for those not listed the best alternative is to fall back to the less effective framekiller methods.

your comments - Post a comment

blog comments powered by Disqus