What Is Clickjacking?
Clickjacking — also called UI redress — tricks a user into clicking something different from what they think they are clicking. The attacker overlays the real, sensitive site in an invisible frame on top of decoy content, so a click meant for a harmless button actually activates a control on the hidden page. The user’s genuine click does the attacker’s bidding.
How does the attack work?#
The mechanics are pure browser layering:
- The attacker builds a page with tempting bait (“Click to win”).
- They load the target site (say, a settings page) in an
<iframe>, made invisible with CSS opacity, and position it precisely over the bait. - The victim clicks the visible bait — but the click lands on the invisible framed control.
- Because the victim is logged in, the action executes with their authority.
Note the overlap with CSRF: both cause an unwanted authenticated action. CSRF forges the request directly; clickjacking borrows a real user click.
How do you prevent clickjacking?#
Deny framing by other origins:
| Defense | Notes |
|---|---|
CSP frame-ancestors 'none' | Modern, preferred; also supports an allowlist |
X-Frame-Options: DENY | Legacy fallback for old browsers |
| Framebusting JavaScript | Fragile; not a substitute for headers |
Content-Security-Policy: frame-ancestors 'none'
X-Frame-Options: DENYIf your site legitimately needs to be embedded by specific partners, use
frame-ancestors https://partner.example rather than opening it to everyone.
Clickjacking is defeated at the header layer. More at the Web Security hub.
Frequently asked questions#
What is clickjacking?
Clickjacking, or UI redress, tricks a user into clicking something different from what they perceive. The attacker loads a target site in an invisible frame over their own page, so a click the user thinks lands on a harmless button actually lands on a sensitive control — approving a payment, changing a setting, or granting a permission.
How do you prevent clickjacking?
Tell the browser your site may not be framed by others. The modern way is the Content-Security-Policy frame-ancestors directive (frame-ancestors 'none' or a specific allowlist); the legacy header X-Frame-Options: DENY covers older browsers. Together they stop your pages being embedded in an attacker’s frame.