Securing Your Site: Clickjacking and X-Frame-Options

Clickjacking is one of the malicious attacks used against people on the web. Back in 2009 Microsoft came out with a new measure in IE8 to fight against clickjacking that’s since been adopted by Firefox, Chrome, Safari, Opera, and others. This is through servers setting a http header of X-Frame-Options and browsers following the settings.

While The security conscious players like Google, Microsoft, Dropbox, Stackoverflow, Apple, and many others have all implemented this in appropriate places, many of the sites we regularly visit have not yet done so. Some sites not implementing frame protections include drupal.org, wordpress.com (though Wordpress itself has it for login and admin pages), reddit, Evernote, and many others. Since Drupal doesn’t have support by default for X-Frame-Options I assume most Drupal sites have not yet implemented this.

If you are interested in learning how to implement X-Frame-Options keep reading as we’ll dive into a few ways to do this.

The Basics

A great place to learn the basics is on the Mozilla Developer page about X-Frame-Options. For the purposes here we’ll only look into the options that have wide adoption. These are:

  • DENY: When the X-Frame-Options http header is set to this value a page can never be embedded in a frame/iframe.
  • SAMEORIGIN: In this case only the originating domain can embed pages in a frame/iframe. This is specific to a domain including the subdomain. Pages on foo.example.com cannot embed pages from bar.example.com if this value is used.

Apache Setup

Apache can be setup to use one of these values by default. If mod_headers is installed than this setting can be used:

Header always append X-Frame-Options SAMEORIGIN

Nginx Setup

For nginx in the server or location configuration you can use something like:

add_header X-Frame-Options SAMEORIGIN;

In PHP

In any PHP application the header can be set before page content is sent. This is done using the header function.

header('X-Frame-Options: SAMEORIGIN');

Drupal

I want to touch on Drupal for a moment because it’s the second most widely used CMS. I would talk about Wordpress, but they already covered their basis on this. Drupal has a custom way to deal with headers through the use of drupal_add_http_header. Using this function you could do:

drupal_add_http_header('X-Frame-Options', 'SAMEORIGIN');

This could be used for specific paths or site wide. If you are using the Overlay module you’ll want to use SAMEORIGIN rather than DENY or the overlay will not work.

Alternately, the module seckit provides some security options including this one. I have not used this module and make sure you thoroughly check it out before using it.