🛡️ Clickjacking Vulnerability Explained

🕵️‍♂️ What is Clickjacking?

Clickjacking (short for “Click Hijacking”) is a User Interface (UI) redress attack. In this attack, a malicious site tricks the user into clicking something different from what they perceive—effectively hijacking their clicks.

It’s commonly used to trick users into performing actions they didn't intend, such as transferring money, liking a page, or giving access to camera/mic.


đź§  How It Works

An attacker uses a transparent iframe to load a legitimate website (like a bank or social media platform) behind fake UI elements on their own malicious site.

The user believes they’re clicking a harmless button (e.g., “Play Game” or “Get a Prize”), but they’re actually clicking a real button on the hidden iframe.


đź’» Technical Example

Suppose a bank website has the following button:

<button id="transfer">Transfer $1000</button>

The attacker creates this malicious HTML:

<style>
  iframe {
    position: absolute;
    opacity: 0;
    z-index: 2;
    top: 50px;
    left: 100px;
    width: 200px;
    height: 50px;
  }

  #fake-button {
    position: absolute;
    z-index: 3;
    top: 50px;
    left: 100px;
    background: red;
    color: white;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }
</style>

<iframe src="<https://legitbank.com/transfer>"></iframe>
<div id="fake-button">Get Free iPhone!</div>

➡️ What really happens:

The user thinks they're clicking on Get Free iPhone!, but they're actually clicking Transfer $1000.


🧨 Real-World Examples

  1. Facebook Like-jacking

    Users unknowingly "Like" a page thinking they’re pressing a different button.

  2. Permission Hijacking

    Trick users into clicking "Allow" on browser permission prompts (camera, location, etc).