What Is a Clickjacking Attack? How It Works and How to Stop It

What Is Clickjacking?

Clickjacking — also called UI redressing — is an attack where a malicious web page tricks a user into clicking something on a target site that they did not intend to interact with. The victim believes they are clicking a button or link on the attacker's page, but they are actually clicking a hidden element from a legitimate site that has been overlaid invisibly on top.

The technique works by embedding the target website inside a transparent `<iframe>` positioned over a decoy interface. The user sees the attacker's page and interacts with it, but their clicks are captured by the invisible target underneath.

---

How a Clickjacking Attack Works

A typical clickjacking attack proceeds like this:

1. The attacker creates a webpage with a compelling call-to-action — "Click here to claim your prize" or a fake CAPTCHA button.

2. The attacker embeds the target site (for example, a banking portal or social media platform) in a transparent `<iframe>` positioned over the decoy button.

3. The user visits the attacker's page and clicks what appears to be the prize button.

4. The click is actually delivered to the invisible `<iframe>` — triggering a real action on the target site, such as confirming a money transfer, changing an email address, or posting content.

5. The user has no idea what happened.

Here is a simplified example of the attack code:

```html <style> iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 10; } #decoy-button { position: absolute; top: 200px; left: 150px; z-index: 5; } </style>

<button id="decoy-button">Claim your prize</button>

<iframe src="https://victim-bank.com/transfer?amount=500&to=attacker"></iframe> ```

The user clicks "Claim your prize." The click lands on the invisible bank transfer button underneath. If the user is already authenticated with their bank in the same browser, the transfer executes.

---

What Clickjacking Can Be Used For

The impact depends entirely on what action the attacker positions under the invisible overlay:

- **Financial fraud** — Triggering a bank transfer or purchase confirmation - **Account compromise** — Changing an email address or password reset address - **Social media manipulation** — Invisible "Like", "Share", or "Follow" actions at scale (a technique historically called "likejacking") - **Permission grants** — Tricking users into granting a malicious OAuth application access to their account - **Webcam or microphone activation** — On Adobe Flash historically; now possible with browser permission prompts that can be obscured

---

Which Sites Are Vulnerable?

A site is vulnerable to clickjacking if it can be embedded in an `<iframe>` on another domain. Specifically, sites that:

- Do not set the `X-Frame-Options` HTTP response header - Do not set the `Content-Security-Policy: frame-ancestors` directive - Rely on JavaScript frame-busting code instead of server-side controls (JavaScript frame-busting can be defeated)

---

How to Prevent Clickjacking

Clickjacking is one of the easiest vulnerabilities to fix. Two HTTP headers handle it:

**Option 1: X-Frame-Options header**

``` X-Frame-Options: DENY ```

This prevents the page from being embedded in any `<iframe>` on any domain. Use `SAMEORIGIN` instead if you need to embed the page within your own site.

**Option 2: Content-Security-Policy frame-ancestors directive**

``` Content-Security-Policy: frame-ancestors 'none' ```

This is the modern replacement for `X-Frame-Options`, supported by all current browsers. Use `'self'` instead of `'none'` to allow embedding from the same origin only.

Both headers can be set in your web server configuration:

**Nginx:** ```nginx add_header X-Frame-Options "DENY"; add_header Content-Security-Policy "frame-ancestors 'none'"; ```

**Apache:** ```apache Header always set X-Frame-Options "DENY" Header always set Content-Security-Policy "frame-ancestors 'none'" ```

**Express (Node.js):** ```javascript app.use((req, res, next) => { res.setHeader("X-Frame-Options", "DENY"); res.setHeader("Content-Security-Policy", "frame-ancestors 'none'"); next(); }); ```

---

Why JavaScript Frame-Busting Is Not Enough

Some older sites use JavaScript to detect when they are loaded inside a frame and break out of it:

```javascript if (top !== self) { top.location = self.location; } ```

This approach is unreliable. Attackers can bypass it using the `sandbox` attribute on the iframe:

```html <iframe src="https://victim.com" sandbox="allow-forms allow-scripts"></iframe> ```

The `sandbox` attribute without `allow-top-navigation` prevents the frame-busting script from redirecting the parent page. Server-side headers are the only reliable prevention.

---

Testing Your Site for Clickjacking

Check whether your site is vulnerable by opening browser developer tools and running:

```javascript var iframe = document.createElement('iframe'); iframe.src = 'https://yoursite.com'; document.body.appendChild(iframe); ```

If the iframe loads your site, you are vulnerable. If the browser blocks it with a console error referencing `X-Frame-Options` or `frame-ancestors`, you are protected.

Yrzo AI automatically tests for missing `X-Frame-Options` and `Content-Security-Policy` frame directives as part of every scan and flags vulnerable pages in the report.