Menu Search Me

Clickjacking Attack and Defense

What Is Clickjacking Attack?

A clickjacking attack, also known as a "UI redress attack", is an attack where the attacker uses iframes, CSS stylesheets, and texts to trick a user into clicking on a button or link on the hidden, iframed page when the user thinks that he is clicking on the top level page that he is veiwing.

What Is Iframe?

Iframe, or "Inline Frames", is defined in W3C HTML 4.0. Before HTML 4.0, Internet Explorer included a proprietary tag designated <iframe> in the v3.0 release to place a frame within a page. This technique, called inline frames or floating frames, originally worked only with Internet Explorer. The World Wide Web Consortium (W3C) included the iframe feature in HTML 4.01. Virtually all current browsers support inline frames(iframe).
 
In HTML, the syntax of iframe is: 
 
<iframe>...</iframe>
 
There are a couple of iframe attributes to adjust its appearance and behavior:
 
src="(URL of initial iframe content)"
name="(name of frame, required for targeting)"
longdesc="(link to long description)"
width=(frame width, % or pixels)
height=(frame height, % or pixels)
align=[ top | middle | bottom | left | right | center ] (frame alignment, pick two, use comma)
frameborder=[ 1 | 0 ] (frame border, default is 1)
marginwidth=(margin width, in pixels)
marginheight=(margin height, in pixels)
scrolling=[ yes | no | auto ] (ability to scroll)
 
An iframe example is shown here:
 
<iframe name="inlineframe" src="float.html" frameborder="0" scrolling="auto" width="500" height="180" marginwidth="5" marginheight="5" ></iframe>

A Clickjacking Example

Let's go through a clickjacking example to understand how it works.
 
The clickjack.html page:
 
<!DOCTYPE HTML>
<html>        
  <body>
    <div>Click on the link below to get your million dollar prize:</div>    
    <iframe src="clicktarget.html" style="width:300px;height:80px;position:absolute;top:0px;left:0px;filter:alpha(opacity=0);opacity:0"></iframe>
    <a href="http://www.google.com" target="_blank" style="position:relative;left:20px;font-size:15px;z-index:-1">CLICK ME FOR FUN!</a>
  </body>
</html>
 
The clicktarget.html page:
 
<!DOCTYPE HTML>
<html> 
<body style="margin:10px;padding:10px">
 
<input type="button" onclick="alert('I like it clicked!')" value="I LIKE IT !">
 
</body>
</html>
 
When the user loads the clickjack.html into his browser, he will see the following:
 
 
If the user is lured by the million dollar prize to actually click the link, instead of clicking on the http://www.google.com link, the user is actually clicking on the button in the clicktarget.html page, which in our example, will display a message box to the user:
 
 
The user is tricked into clicking on a button in the hidden, iframed page, clicktarget.html, because the user only sees the displayed link and text on the top loaded page, clickjack.html.

Security Risks of Clickjacking

Clickjacking can be used by the hackers to achieve cross site request forgery (CSRF), which forces or coaxes an end user to execute unwanted actions on a web application in which he/she is currently authenticated.
 
For example, there was once a Facebook incident where attackers tricked logged-in Facebook users to arbitrarily like fan pages, links, groups, etc. 
 
Clickjacking also made the news in the form of a Twitter worm. This clickjacking attack convinced users to click on a button which caused them to re-tweet the location of the malicious page, and have the malicious page propagated massively. 
 
One of the most notorious examples of Clickjacking was an attack against the Adobe Flash plugin settings page. By loading this page into an invisible iframe, an attacker could trick a user into altering the security settings of Flash, giving permission for any Flash animation to utilize the computer's microphone and camera. 

Clickjacking Defense

To defend against clickjacking attack, you need to ensure that your web page will not be included into an iframe. This can be done in different ways:

X-Frame-Options HTTP response header

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame> or <iframe>. A web application can use this header to avoid clickjacking attacks, by ensuring that their content cannot be embedded into other frames or iframes.
 
There are three possible values for X-Frame-Options header:
  • DENY The page cannot be displayed in a frame
  • SAMEORIGIN The page can only be displayed in a frame or iframe on the same origin as the page itself.
  • ALLOW-FROM uri The page can only be displayed in a frame or iframe on the specified origin.
In other words, if you specify DENY, not only will attempts to load the page in a frame fail when loaded from other sites, attempts to do so will fail when loaded from the same site. On the other hand, if you specify SAMEORIGIN, you can still use the page in a frame as long as the site including it in a frame is the same as the one serving the page.
 
As an example, to configure Apache to send the X-Frame-Options header for all pages, add the following line somewhere in your httpd.conf (or in one of your included configuration files).
 
Header always append X-Frame-Options SAMEORIGIN
 
Not all browsers support the X-Frame-Options header. As of this writing, only Chrome 4.1, firefox 3.6.9, IE 8.0, Opera 10.5 and Safari 4.0 or above support X-Frame-Options header.

Framebuster

A framebuster (or framekiller or framebreaker) is a defensive code technique used by web applications to prevent their web pages from being displayed within a frame without permission as part of the clickjacking attack.
 
The framebuster technique is basically a JavaScript snippet that can be included in those pages that the developers do not want to be included inside iframes from different sources. Below is an example. You can actually include it onto your web page to prevent it from being iframed:
 
<style> html{display:none;} </style>
<script>
   if(self == top) {
       document.documentElement.style.display = 'block'; 
   } else {
       top.location = self.location; 
   }
</script> 

Busting Frame Buster

The above JavaScript-based protection, unfortunately, is not always reliable. In IE, for example, it can be circumvented by the hackers by including the targeted page inside an <IFRAME SECURITY=restricted> element.
 
Another way of busting the above frame buster is by manually cancelling the redirection attempt made by frame busting code, as in the following example:
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
<script>
    //top.location = "";
    window.onbeforeunload=function() {
    return "want to leave?";
}

</script>
</HEAD>
<!--this frame-busting prevention code is only working for IE-->
<iframe id="frame_id" name="frame_name" width="1" height="1" security="restricted" src="clickjacking_target.html">
</iframe>
</HTML>