The clickjacking attack

The “clickjacking” attack allows an evil page to click on a “victim site” on behalf of the visitor. Many sites were hacked this way, including Twitter, Facebook, Paypal and other sites. They have all been fixed, of course.

The idea

The idea is very simple. Here’s how clickjacking was done with Facebook: 1. A visitor is lured to the evil page. It doesn’t matter how. 2. The page has a harmless-looking link on it (like “get rich now” or “click here, very funny”). 3. Over that link the evil page positions a transparent with src from facebook.com, in such a way that the “Like” button is right above that link. Usually that’s done with z-index. 4. In attempting to click the link, the visitor in fact clicks the button.</p> <h2>The demo</h2> <p>Here’s how the evil page looks. To make things clear, the <iframe> is half-transparent (in real evil pages it’s fully transparent): The full demo of the attack: [codetabs src=“clickjacking-visible” height=160] Here we have a half-transparent <iframe src="facebook.html">, and in the example we can see it hovering over the button. A click on the button actually clicks on the iframe, but that’s not visible to the user, because the iframe is transparent. As a result, if the visitor is authorized on Facebook (“remember me” is usually turned on), then it adds a “Like”. On Twitter that would be a “Follow” button. Here’s the same example, but closer to reality, with opacity:0 for <iframe>: [codetabs src=“clickjacking” height=160] All we need to attack – is to position the <iframe> on the evil page in such a way that the button is right over the link. So that when a user clicks the link, they actually click the button. That’s usually doable with CSS.</p> <h2>Old-school defences (weak)</h2> <p>The oldest defence is a bit of JavaScript which forbids opening the page in a frame (so-called “framebusting”). That looks like this: That is: if the window finds out that it’s not on top, then it automatically makes itself the top. This not a reliable defence, because there are many ways to hack around it. Let’s cover a few.</p> <h3>Blocking top-navigation</h3> <p>We can block the transition caused by changing top.location in beforeunload event handler. The top page (enclosing one, belonging to the hacker) sets a preventing handler to it, like this: When the iframe tries to change top.location, the visitor gets a message asking them whether they want to leave. In most cases the visitor would answer negatively because they don’t know about the iframe - all they can see is the top page, there’s no reason to leave. So top.location won’t change! In action: [codetabs src=“top-location”]</p> <h3>Sandbox attribute</h3> <p>One of the things restricted by the sandbox attribute is navigation. A sandboxed iframe may not change top.location. So we can add the iframe with sandbox=“allow-scripts allow-forms”. That would relax the restrictions, permitting scripts and forms. But we omit allow-top-navigation so that changing top.location is forbidden. Here’s the code: There are other ways to work around that simple protection too.</p> <h2>X-Frame-Options</h2> <dl> <dt>DENY</dt> <dd><p>Never ever show the page inside a frame. SAMEORIGIN</p></dd> <dd><p>Allow inside a frame if the parent document comes from the same origin. ALLOW-FROM domain</p></dd> <dd><p>Allow inside a frame if the parent document is from the given domain. For instance, Twitter uses X-Frame-Options: SAMEORIGIN. <iframe src="https://twitter.com">

Showing with disabled functionality

The X-Frame-Options header has a side effect. Other sites won’t be able to show our page in a frame, even if they have good reasons to do so. So there are other solutions… For instance, we can “cover” the page with a

with styles height: 100%; width: 100%;, so that it will intercept all clicks. That

is to be removed if window == top or if we figure out that we don’t need the protection. Something like this: The demo: [codetabs src=“protector”]

Samesite cookie attribute

The samesite cookie attribute can also prevent clickjacking attacks. A cookie with such attribute is only sent to a website if it’s opened directly, not via a frame, or otherwise. More information in the chapter info:cookie#samesite. If the site, such as Facebook, had samesite attribute on its authentication cookie, like this: …Then such cookie wouldn’t be sent when Facebook is open in iframe from another site. So the attack would fail. The samesite cookie attribute will not have an effect when cookies are not used. This may allow other websites to easily show our public, unauthenticated pages in iframes. However, this may also allow clickjacking attacks to work in a few limited cases. An anonymous polling website that prevents duplicate voting by checking IP addresses, for example, would still be vulnerable to clickjacking because it does not authenticate users using cookies.

Summary

Clickjacking is a way to “trick” users into clicking on a victim site without even knowing what’s happening. That’s dangerous if there are important click-activated actions. A hacker can post a link to their evil page in a message, or lure visitors to their page by some other means. There are many variations. From one perspective – the attack is “not deep”: all a hacker is doing is intercepting a single click. But from another perspective, if the hacker knows that after the click another control will appear, then they may use cunning messages to coerce the user into clicking on them as well. The attack is quite dangerous, because when we engineer the UI we usually don’t anticipate that a hacker may click on behalf of the visitor. So vulnerabilities can be found in totally unexpected places.

It is recommended to use X-Frame-Options: SAMEORIGIN on pages (or whole websites) which are not intended to be viewed inside frames.
Use a covering
if we want to allow our pages to be shown in iframes, but still stay safe.

<style>
iframe { /* iframe from the victim site */
  width: 400px;
  height: 100px;
  position: absolute;
  top:0; left:-20px;
*!*
  opacity: 0.5; /* in real opacity:0 */
*/!*
  z-index: 1;
}
</style>

<div>Click to get rich now:</div>

<!-- The url from the victim site -->
*!*
<iframe src="/clickjacking/facebook.html"></iframe>

<button>Click here!</button>
*/!*

<div>...And you're cool (I'm a cool hacker actually)!</div>

Example:

Follow the lesson from Microsoft Web-Dev-For-Beginners course

Tags: web,development

Back to web-development-basics Back to Home