Lab 5: Clickjacking with Social Engineering

Difficulty: High

Lab Overview

This lab demonstrates clickjacking vulnerabilities combined with social engineering techniques. Attackers can use psychological manipulation and deceptive content to trick users into performing unintended actions through clickjacking attacks.

Objective: Understand how social engineering can be combined with clickjacking to create more effective attacks.

Vulnerable Application

Social Media Platform

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

Social Engineering Clickjacking Tester

Social Engineering Attack Vectors

These actions can be exploited via social engineering clickjacking:

Like Post - Social media manipulation
Follow User - Unwanted following
Share Content - Unwanted sharing
Delete Account - Account deletion
Change Password - Password changes
Make Donation - Financial fraud

Social Engineering Clickjacking Demo

Social Engineering Techniques

Social Engineering Scenarios

Action Results

Action Results:

No actions performed yet

Vulnerability Details

Type: Social Engineering Clickjacking
Severity: High
Method: Psychological manipulation
Issue: Social engineering + clickjacking

Attack Vectors

Psychological Manipulation: Emotional triggers
Deceptive Content: Fake notifications
Urgency Tactics: Time pressure
Authority Exploitation: Fake authority

Social Engineering Clickjacking Examples

Use these techniques to exploit social engineering clickjacking vulnerabilities:

1. Urgency-based Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Urgency-based 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: #dc3545;
            color: white;
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
            margin: 20px;
            animation: pulse 1s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .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>⚠️ URGENT SECURITY ALERT</h1>
            <p>Your account will be deleted in 5 minutes!</p>
            <p>Click below to secure it immediately!</p>
            <button class="fake-button">SECURE NOW</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('delete_account')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

2. Authority-based Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Authority-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;
        }
        .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>🔒 Official Security Notification</h1>
            <p>From: IT Security Department</p>
            <p>Your account requires immediate verification.</p>
            <button class="fake-button">VERIFY ACCOUNT</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('change_password')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

3. Emotional Trigger Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Emotional Trigger 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: #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>💝 Help Save a Child's Life</h1>
            <p>Your small donation can make a big difference.</p>
            <p>Click below to help now!</p>
            <button class="fake-button">HELP NOW</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('transfer_money')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

4. Fake Prize Clickjacking:

<!DOCTYPE html>
<head>
    <title>Fake Prize 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: #ffc107;
            color: #212529;
            padding: 20px 40px;
            border: none;
            border-radius: 8px;
            font-size: 20px;
            cursor: pointer;
            margin: 20px;
            animation: bounce 1s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        .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 $1000!</p>
            <p>Click below to claim your prize!</p>
            <button class="fake-button">CLAIM PRIZE</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('like_post')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

5. Social Proof Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Social Proof 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: #17a2b8;
            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>👥 Join 50,000+ Users</h1>
            <p>This is the most popular choice!</p>
            <p>1,000+ people liked this today!</p>
            <button class="fake-button">JOIN NOW</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('follow_user')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

6. Fear-based Clickjacking:

<!DOCTYPE html>
<html>
<head>
    <title>Fear-based Clickjacking</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: linear-gradient(45deg, #dc3545, #fd7e14);
        }
        .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;
            animation: shake 0.5s infinite;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        .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>🚨 SECURITY BREACH DETECTED</h1>
            <p>Your account is at risk!</p>
            <p>Immediate action required!</p>
            <button class="fake-button">SECURE NOW</button>
        </div>
        <div class="hidden-content">
            <button onclick="performAction('admin_action')">Hidden Button</button>
        </div>
    </div>
</body>
</html>

Real-World Attack Scenarios

Social media manipulation and unwanted actions
Financial fraud and payment manipulation
Account takeover and password changes
Charity fraud and donation manipulation
Compliance violations and security breaches
Cross-site attacks and data exfiltration

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
Educate users about social engineering
Implement user awareness training