Clickjacking / UI Redressing

Clickjacking or UI redressing is one of the common cybersecurity attacks. In this attack, the end user is given a webpage which looks legit and he/she is tricked to click something in the UI. But behind the scenes, a specifically crafted page is loaded behind the legitimately looking page.

To the end user it feels like, the component in the UI is being clicked, but unfortunately the click is made on the invisible component in the hidden page and the action mapped for that button click will be performed.

In this example, the user is given a spam page iphone.php, in which he/she is tempted to click the Free iPhone button. But the actual page loaded behind iphone.php is transfer.php which could be a webpage from your bank website. The target website can be hidden using CSS.

The user only sees the iphone.php in the interface and would have no idea on transfer.php which is rendered exactly behind iphone.php but the background page is hidden. Click on iphone.php could be mapped to a click on transfer.php where defined action to transfer funds from an account, that might make the end user lose money.

One page can be loaded into other using iframe html tag. The target website which the attacker intends to load inside his page is given in the src attribute. In this case, the target website could be https://mybankwebsite.com/transferFunds.do and the transfer fund action will be performed when the user clicks the button from iphone.php

Clickjacking is purely based on mouse click events and it is a very simple attack to carry out. Basic knowledge of HTML is enough to try clickjacking attack in a site. There are many active bug bounty programmes run by various companies to give ethical hackers a platform to test and report potential security loopholes in their product. But most of these programmes do not consider this a serious vulnerability except very few.

Protection from Clickjacking –

Make sure contents from the website are non-frameable (Should not be loaded inside an iframe element). This can be achieved by setting an appropriate response header in the webpage. The name of response header is X-Frame-Options. Based on the value that is set on this header, the page may or may not render in a frame element.

The header could have three possible values:

• X-Frame-Options : DENY
  Setting X-Frame-Options to DENY will stop the page from getting loaded in any other webpage including the ones hosted in your own site.
• X-Frame-Options : SAMEORIGIN
  Setting X-Frame-Options to SAMEORIGIN will stop the page from getting loaded in any other webpage except the ones hosted in the site, in other words, this will allow framing inside your domain only.
• X-Frame-Options : ALLOW-FROM : URI
  Setting X-Frame-Options to ALLOW-FROM : URI gives the option to allow a specific domain to load intended page in a frame.

Though there is no standard way to allow multiple domains in ALLOW FROM Headers, there are some workarounds. You may provide unique endpoints/URLs to each domain/organization, and set XFRAME-OPTION [Allow-From] header with particular domain name.

As End-user, one should always be careful while clicking components in an ad/spam pages and while opening emails from untrusted sources.
 
References:

• Clickjacking – Wikipedia
• XFrame Options – Mozilla