How does ClickJacking work?

The hacker embeds a valid page into an <iframe>.

The frame's contents sits in front of the page, and is transparent.

This way the user thinks they are clicking the hacker's web page, while they actually are interacting with the embedded site's contents.

This way the user is tricked into, for example, clicking a Facebook's like button

ClickJacking example

<iframe src=""></iframe>

The page's style hides the iframe:

iframe {
  width: 1200px;
  height: 800px;
  opacity: 0.5; /* in real life this would be 0.0 */
  z-index: -1; /* make if forefront */
  position: absolute;

Preventing the attack

Click Jacking can be prevented with the Content Security Policy header.

Use the frame-ancesters to allow content sources that can embed this page.

If you don't want anyone to frame your site use content source 'none'.

Content-Security-Policy: ...; frame-ancestors 'none';

© 2017 - Peter Himschoot