Clickjacking. The hidden flaw hijacking your UI

1. The Visual Deception: What is Clickjacking?

Clickjacking, also known as a UI Redress Attack, is a malicious technique where an attacker uses multiple transparent or opaque layers to trick a user into clicking on a button or link on another page when they were intending to click on the top-level page.

Imagine you are on a website promising “Win a free iPhone”. The “Claim Prize” button is there, bright and tempting. However, what you don’t see is that the attacker has loaded, invisibly (with opacity: 0), your bank’s transfer confirmation page or your Amazon checkout right on top of it. When you click “Claim Prize”, you are actually clicking “Confirm Transfer” or “Buy Now”.

The Illusion of Control

Unlike XSS, where an attacker injects code, in Clickjacking the attacker uses your own legitimate site against the user. The browser believes the user is interacting voluntarily with your site because, technically, the click occurs on your legitimate element.

2. The Two Sentinels: XFO vs. CSP frame-ancestors

To stop clickjacking, we must tell the browser: “Do not let ANYONE load my page inside an iframe unless I explicitly authorize them.” We have two primary tools for this.

X-Frame-Options (The Classic Sentinel)

Introduced over a decade ago, the X-Frame-Options (XFO) header is simple. It only has two values that matter today:

• DENY: Total prohibition. No one can embed your page, not even yourself. This is the maximum security default.
• SAMEORIGIN: Only pages on the same origin can load this page in an iframe. Useful for complex apps with internal frames.

Content Security Policy: frame-ancestors (The Granular Successor)

XFO had a major limitation: you couldn’t authorize a specific third party (e.g., a partner site) without opening the door to everyone. frame-ancestors fixes this by allowing a whitelist of specific domains.

IMPORTANT: If a browser detects both headers, frame-ancestors takes absolute precedence according to the CSP Level 2 standard.

3. Business Impact: Beyond the Tech

Failing to implement clickjacking protection isn’t just a technical oversight; it’s a GDPR compliance vulnerability. Data Protection Authorities (DPAs) across Europe are increasingly penalizing companies for failing to control the integrity of user interactions.

If an attacker uses clickjacking to make your users “accept” new privacy terms or grant consent for data sharing, that consent is null and void. As a company, you are responsible for ensuring the environment where consent is given is legitimate and untampered with.

The Invisible Contract Analogy

It’s like a customer coming into your office to sign a contract, but you place a blank sheet of paper over a different contract using a lighting trick. The customer thinks they’re signing one thing, but their signature is recorded on the other. In the digital world, CSP and XFO are the bulletproof glass that prevents this trick.

For a multi-layered defense, ensure your site is also HSTS compliant to enforce encrypted tunnels.

4. Evolving Attacks: Cursorjacking and Drag-and-Drop

The classic “invisible click” is just the beginning. Modern attackers use more sophisticated variants:

1. Cursorjacking: The attacker hides the user’s real cursor (via CSS cursor: none) and draws a fake cursor image offset by a few pixels. The user thinks their cursor is over a safe element, but the real click happens on a critical button.
2. Drag-and-Drop Clickjacking: Traces of sensitive data (like session tokens or emails) are “dragged” by the user from an invisible iframe into an attacker-controlled input field. frame-ancestors blocks this by preventing the sensitive page from being loaded in a malicious context.

5. Implementation in Modern Frameworks

Next.js Integration

In Next.js, the cleanest way is to use next.config.js or a middleware.ts to inject these headers globally.

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none';" }
        ],
      },
    ]
  },
}

The Edge Case: Membership Sites & Dashboards

If your site provides a “Widget” that your clients must embed in their own sites (like a support chat or video player), you CANNOT use DENY. This is where CSP shines:

Content-Security-Policy: frame-ancestors 'self' https://client-domain.com;

6. Frequently Asked Questions (FAQ) about Clickjacking