What Is Clickjacking

Clickjacking is an attack technique that uses transparent or invisible iframes to overlay a legitimate web page on the user's screen, tricking the user into performing unintended click actions. It is also known as UI Redressing.

The attacker creates a trap page and overlays the target site on top of it using a transparent iframe. The user sees the buttons and links of the trap page, but what they actually click are elements of the target site within the transparent iframe. This allows actions like pressing "Like" buttons, changing settings, or approving transfers to be executed without the user's awareness.

How the Attack Works

Clickjacking is executed in the following steps.

The attacker creates a trap web page with attractive content (video play button, game, sweepstakes form, etc.)
The target site is loaded in an iframe and set to opacity: 0 (completely transparent) with CSS
The transparent iframe is precisely positioned over the clickable elements of the trap page
When the user clicks a button on the trap page, they actually click a button on the target site within the transparent iframe

Advanced Techniques

Drag & drop exploitation: Uses the user's drag operations to input data into forms within the transparent iframe
Cursorjacking: Shifts the displayed cursor position from the actual position, causing the user to click unintended locations
Multi-step attacks: Guides multiple clicks, even getting the user to click the "OK" button on confirmation dialogs

When combined with XSS or CSRF, more complex attack scenarios can be constructed.

Implementing Defenses

The core of clickjacking defense is preventing your site from being embedded in another site's iframe.

CSP frame-ancestors Directive

The CSP frame-ancestors directive controls which parent page origins can embed your site in an iframe. This is the most recommended countermeasure.

frame-ancestors 'none': Does not allow iframe embedding on any site
frame-ancestors 'self': Allows embedding only from the same origin
frame-ancestors https://trusted.example.com: Allows embedding only from a specific origin

X-Frame-Options Header

A countermeasure that predates CSP and is still widely supported.

X-Frame-Options: DENY: Rejects all iframe embedding
X-Frame-Options: SAMEORIGIN: Allows embedding only from the same origin

Setting both CSP frame-ancestors and X-Frame-Options ensures compatibility with older browsers while applying the latest protection.

JavaScript Defense (Frame Busting)

A technique using scripts like if (top !== self) { top.location = self.location; } to escape to the top frame when loaded inside an iframe. However, since attackers can restrict JavaScript execution with the sandbox attribute, this should only be used as a supplement to HTTP header-based defenses.

Practical Countermeasure Checklist

A checklist for reliably implementing clickjacking countermeasures.

Verify security header configuration: Confirm that all page responses include X-Frame-Options: DENY (or SAMEORIGIN) and CSP frame-ancestors
Identify pages that need iframe embedding: For pages with legitimate reasons to allow iframes (such as payment form embedding), strictly limit the allowed origins
Protect critical operations: For critical operations like password changes, transfers, and account deletion, require re-authentication (password re-entry) in addition to CSRF tokens
Combine with HSTS: Enforce HTTPS and prevent security header removal through man-in-the-middle attacks
Regular testing: Regularly test whether your site can be embedded in an iframe. Verify using browser developer tools or security scanners

Clickjacking may not appear to cause major damage on its own, but combined with social engineering, it is a powerful attack technique that can execute critical operations without the user's awareness. Since it can be defended with just HTTP header configuration, it is a security measure with very high effectiveness relative to its implementation cost.

To learn more about this topic, see HTTP Security Headers: 5 Essential Headers to Protect Your Website.

Common Misconceptions

Clickjacking is an old attack technique and no longer a threat: First reported in 2008, but many sites still do not set X-Frame-Options or CSP frame-ancestors, and the attack remains effective. Attacks targeting SNS 'Like' buttons and OAuth authorization screens continue to be reported.
JavaScript frame busting alone is sufficient defense: Attackers can restrict JavaScript execution with the iframe's sandbox attribute or block frame escape with the onbeforeunload event. HTTP header-based defense (X-Frame-Options, CSP frame-ancestors) is essential, and JavaScript is only a supplementary measure.

Clickjacking