What is clickjacking?

Clickjacking, also known as UI redressing,  is when an attacker uses multiple transparent or opaque layers to trick a user into clicking on a button or link on another page when they were intending to click on the top level page. Thus, the attacker is “hijacking” clicks.

OWASP

Icon made by Freepik and DinosoftLabs from www.flaticon.com

Impact

Clickjacking attacks usually do not have much impact. The most used attack was abusing the Facebook like button functionality. Where attackers could trick logged in Facebook users to like their own page.

Clickjacking could also be used as a gateway to more severe vulnerability types such as DOM XSS.

Examples

Clickjacking attacks rely on CSS to create multiple layers on a webpage. A base layer with displaying the vulnerable website and a top layer which overlays the website: Here is an example:

<head>
  <style>
  #clickjack_overlay {
      position:relative;
    width:150px;
    height:150px;
      opacity:0.00001;
      z-index:2;
      }
  #decoy_website{
      position:absolute;
    width:350px;
    height:500px;
      z-index:1;
      }
  </style>
</head>
...
<body>
  <div id="decoy_website">
  ...decoy web content here...
  </div>
<iframe id="clickjack_overlay" src="https://vulnerable-website.com">
  </iframe>
</body>

The clickjack overlay iframe should be placed exactly on top of the decoy website so the targeted button will be under your iframe. Absolute and relative position values are used to ensure that the clickjack overlay accurately overlaps the decoy regardless of screen size, browser type and platform. Z-index is used to determine the stacking order of the objects on the page.

Exercises

Portswigger has a great course on clickjacking to learn about this type of vulnerability or to test your skills. 

How to prevent clickjacking?

The main ways to prevent clickjacking are:

  1. Using the frame-ancestors directive in a Content-Security-Policy (CSP) HTTP response header. Do this to validate whether a browser should be allowed to render a page in a frame or iframe tag.
    Common uses of CSP frame-ancestors:
    Content-Security-Policy: frame-ancestors 'none';
    Content-Security-Policy: frame-ancestors 'self';
    Content-Security-Policy: frame-ancestors 'self' *.somesite.com https://myfriend.site.com;
  2. Not all browsers support CSP frame-ancestors yet, in that case X-Frame-Options HTTP response headers should be used. There are three possible values:
    "DENY",  "SAMEORIGIN", "ALLOW-FROM uri",
  3. Using defensive code in your application to ensure that the current frame is the most top level window.

More information on defending against clickjacking can be found on here!

 

Follow us on twitter and don’t forget to subscribe to our weekly Bug Bytes, a newsletter curated by Pentester Land & powered by intigriti containing more write-ups and helpful resources.