ClickJacking: Clickjacking word comes from the term “Click Hijacking”. This attack is also known as User Interface redress attack, UI redress attack or UI redressing. In this attack, attacker hijacks the users click. This attack is tricking a user to click on a link which is different to what the user is clicking. It means a user will try click on a different link, but the action will be performed on different link. Attacker uses iFrames and CSS to create a good looking page to fool the victim. I know it’s confusing but I am trying to explain the attack in simple words.
Suppose there is webpage A which is created by the attack. In this web page, attacker has included an IFRAME which loads some other website B. And the frame is included in a way that only a button of the page B is visible on the page A. And the border and frame is not visible. The content on Page A around this frame in put i a way that the button on the frame seems to be the part of the page A. Now think the page B is the Facebook and the button is the like button of a page, but it is included on the page A in a way that it does not look like a like button. Misleading User Interface implies that the button serves a different purpose and is a part of site A. On the page A, attacker is claiming something else and requesting users to click on the button. But user needs to be login on the website B to perform the attack. If the user is not logged in on Facebook, then clicking on the like button will ask him to login and the attack will fail.
Example: There is a web page with a video of a song and a button to play the song. But there is a Amazon affiliate button just inside the play button. As the user clicks on the play, the click will be transformed to the affiliate button. In real, the user tries to "play" the video but actually he/she "buys" the product from Amazon.
I think now it’s clear why this attack is known as click hijacking. But sometimes layers are not exactly the layers. They are the frames which are used to load the external pages on a clickjacked web page. So hackers can use frames or layers to trick a user.
How this attack is performed:
First of all we need to prepare the page where we will load the element from the target website. In this attack we use 2 iframes. First of all we will create a inner page on which we position the button (which we want to be clickjacked) at the top right corner of the page. Then we will load this inner page in a second page suppose it is outer. In the outer page we will keep the frame too small to show only the button from the page.
While creating and loading the target website in the inner page, use the frame code given below.
<head>
<style> body { display : none;} </style>
</head>
<body>
<script>
if (self == top) {
var theBody = document.getElementsByTagName('body')[0];
theBody.style.display = "block";
} else {
top.location = self.location;
}
</script>
We have given the ID inner to this frame. Scrolling=“no” will remove the scroll bars from the frame and frameborder=”none” will remove the border from the frame. This makes the frame look like the part of some page elements. No one can tell that the content is being loaded from an iframe.
Now position this page with CSS to make sure that the subscribe button (which we want to clickjack on some other page) is at the top left. Change the left and top positions to change to location of the frame content on the page.
#inner { position: absolute; left: -600px; top: -600px ;}
After positioning the button at the top left corner of the page, now we will add this page to any page where we want to add this button. Also on the target page, we will use same rules of scrolling and borders. This will force users to think that the button is the part of the page. Add text and other contents around the button. Design a proper layout and theme and add texts according to your button. You can also request visitors to click on the button by posting some request messages.
Some popular clickjacking incidents: These are some popular incidents of the attack which attracts security researchers attention.
- Adobe vulnerability which allows attackers to trick enable their webcam and microphone. It was later patched by Adobe.
- Likejacking attack on Facebook to increase fan page likes.
- Facebook dislike button scam which posts false messages from the affected profiles.
- Trick users to follow someone on twitter. It is used by spammers to increase twitter followers.
- Most of the strange video posts on Facebook which spreads automatically on friend's wall.
Other variants of the attack:
Cursorjacking: Cursorjacking is another type of attack in which the cursor of the users screen is displaced from the position user perceives. So user thinks cursor some other place while it is not there. Thus attacker managed to hijack user’s actions on the webpage.
See the nice demo of cursorjacking attacks on the links below.
http://koto.github.com/blog-kotowicz-net-examples/cursorjacking/
http://www.mniemietz.de/demo/cursorjacking/cursorjacking.html
In these demos, you will see how in actual the attack works.
The most important fact about this attack is that no successful prevention methods have been implemented yet. You can also create your demo page to learn more about the attack. See the java script code below.
<body style="cursor:none;height: 1000px;">
<img style="position: absolute;z-index:1000;" id=cursor src="cursor.gif" />
<button id=fake style="font-size: 150%;position:absolute;top:100px;left:630px;">Please click me</button>
<div style="position:absolute;top:100px;left:30px;">
<a href="#" onclick="alert(/you tried to click on button but you actually clicked on the link /)">Want to click here</a>
</div>
<script>
var oNode = document.getElementById('cursor');
var onmove = function (e) {
var nMoveX = e.clientX, nMoveY = e.clientY;
oNode.style.left = (nMoveX + 600)+"px";
oNode.style.top = nMoveY + "px";
};
document.body.addEventListener('mousemove', onmove, true);
</script>
</body>
NOTE: In the code given above, change the fake cursor icon’s URL at cursor.gif
You will see that the original cursor is not on the page and the fake cursor is moving. When you try to click on the “Please Click Me” button, the fake cursor clicks on the link at the left side of the page. The code is easy to understand. Use of NoScript addon can prevent the attack upto a good level. So always try to use that add-on on your firefox web browser.
Likejacking: Likejacking is used for those clickjacking attacks which are related to facebook. In Likejacking attack, attackers tricks website visitors to like a facebook page and post the status message about the website on their wall. This attack was on the peak more than a year ago when After that facebook has managed to get the solution to reduce the attack up-to a level in Facebook's hackathons. Although, Facebook has implemented some security techniques to prevent the attack, but the attack is still possible on the social networking website. And we see a new type of clickjacking or likejacking attack on the facebook which goes viral in few days and flood our walls.
Prevention:
This attack can be prevented from both server and client side. Users can also use some tools and scripts to protect themselves from the attack. And web masters can also use some security measures to protect their visitors and users from the attack.
Client side methods to prevent the attack
NoScript
NoScript is a nice Firefox addon which works on both desktop and mobile version of the browser. It This firefox addon prevents execution of unauthorized malicious scripts on the client browser. It also prevents users from clicking on invisible or "redressed" page elements of embedded documents or applets. This is the best security tool available for free in the market which protects against clickjaking and cursorjacking attacks. Each new update of the scripts adds more security level to the add-on. It is recommended to use No-Script if you use Firefox web browser.
Ghostery
Ghostery is also a nice browser extension which is widely used as a protection against clickjacking attack. This is a privacy browser extension which is available for all the major web browsers. This nice extension enables users to detect and control tags, web bugs, pixels, and beacons on the webpage which can collect data from their web browsers.
GuardedID
GuardedID is a commercial paid product. Users need to buy this which works on FireFox and Internet explorer. This tool includes client-side clickjack protection for users on their Internet Explorer and Firefox browsers. This tool forces all the frames to be visible on the page. This tool does not interfering with the operation of legitimate iFrames.
Server side methods to prevent the attacks:
X-FRAME-OPTIONS:
This was added with the release of RC1 of Internet Explorer 8. After this website developers have an option to add a page header to detect and prevent frame-based UI redressing. This new added X-Frame Options is used to mark the response that the page should not be framed. There are two options with the tag.
DENY: It prevents everyone to frame the web page
SAMEORIGIN: It only allows the current site to frame the content.
Many web browsers have also adopted this. But this has some limitations. In this method, web developers need to deploy the header policy in each page which can make the development part complicated. Many web proxies also modify header add strip some part. If a web proxy strips the X-FRAME-OPTIONS header then use of this method is waste and website will lose its framing protection.
Defending with Frame Breaking Scripts:
In this method, we embed a script on the web page which we do not want to be framed. Although there are many methods and scripting have been suggested to protect with this method. In these scripts, developers try to force loading the parent page on all the attached frames. So that attacker couldn’t load any attacking buttons or links from some other websites.
All the protection scripts are browser dependent so no proper security mechanism have been deployed yet.
But the best and secure script it this.
<head>
<style> body { display : none;} </style>
</head>
<body>
<script>
if (self == top) {
var theBody = document.getElementsByTagName('body')[0];
theBody.style.display = "block";
} else {
top.location = self.location;
}
</script>
Conclusion: This is an advance attack and most of the web developers and users do not know about the attack. This attack is already famous on Facebook. There are various popular video clickjacking scams. Most of the developers also think that protection against CSRF will also fix the clickjacking issue. But this is not the true fact. As you can see that it is just a framing and uses the same page. So referrer checking and token is not going to protect against the attack.
As I have already discussed common and popular defenses against the attack, we developers must use any of the server side method. Users are not too technical to use all these prevention methods. But all these methods can be bypassed with some targeted attacks. As we have already seen that facebook is much affected by this attack while it spends millions on the security.
It is my personal advice to use NoScript add-on while using Firefox web browser. NoScipt add-on is the only successful prevention. NoScript add-on protects users from the clickjacking and other variants of the attack.
Additional reading:
http://www.sectheory.com/clickjacking.htm
http://noscript.net/faq#qa7_1
https://www.owasp.org/index.php/Clickjacking
http://www.contextis.com/research/white-papers/clickjacking/Context-Clickjacking_white_paper.pdf
