How to hack #3 – Clickjacking

Today, I will show you one of the most common tricks that are used to force users to click on something we do not want. I developed a simple jQuery plugin to make it simpler.

What is clickjacking?

It’s described very on Wikipedia but in a very simple sentence: users click on something different than they think they do. Example? Do you remember pop-ups with an X and when you click on it and another website shows up? Facebook is protected against this attack but imagine: you are on an interesting website, you click a “Read more” button and… you liked a Facebook profile. Then, you click one more time (because you think something did not work) and you go to the page you wanted. In very many cases you would not realize you added a Like somewhere. Sounds interesting?

How does it work?

The idea behind it is very simple: add an iframe with the website (in your example Facebook’s profile page) resize the iframe to the sizes of the Like button, add transparency to 100% and set position absolute to the iframe (and it will follow the mouse). When the user clicks on the button (actually button in the iframe) the iframe is going to the background. It allows triggering the click by the page in the iframe and the user now can use the website he expects. Simple, isn’t it?

Need an example?

Some time ago I developed a simple jQuery plugin called clickjacking. Using it is extremely simple. Below you have a simple usage of the plugin. To make it easier to understand I set opacity to 50% to let you see how it works.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Clickjacking demo</title>
  <!--[if lt IE 9]>
    <script src=""></script>
  <iframe id="clickjacking" src=""></iframe>
  <script src="" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src=""></script>
      opacity: 0.5,
      width: 200,
      height: 100,
      coursor: {
        x: 50,
        y: 30


How to protect against this attack?

There are few ways of doing it. I can recommend the easiest one -add the X-Frame-Options header to your responses. There are three possible values for the X-Frame-Options header: DENY, SAMEORIGIN and ALLOW-FROM.

  • X-Frame-Options: DENY – it disallows embedding the page in iframes at all. It means you cannot add the page into an iframe even from the same domain.
  • X-Frame-Options: SAMEORIGIN – same as above but it allows embedding only from the same domain.
  • X-Frame-Options: ALLOW-FROM – it allows using iframes only from specified URIs.

Facebook uses the first header – it disallows doing it at all!


It is a very simple attack which can be used in very, very different ways. The protection is extremely simple but we (common users of the Internet) are exposed to this and only disabling javascript in the browser can protect as in 100% but be honest – who does it? Anyway, if you do not expect to embed your website remember adding the suitable header to the response!