Clickjacking
In short
Clickjacking is an attack that hides a legitimate website inside an invisible frame on a malicious page, tricking users into clicking buttons they cannot see.
What is clickjacking?
Clickjacking, also called UI redressing, tricks a user into clicking something different from what they think they are clicking. The attacker's page loads the target site, such as a bank or a social network where the victim is signed in, inside an iframe, makes that frame fully transparent, and places it exactly over a harmless-looking button like Play or Claim prize. When the victim clicks, the click actually lands on the hidden site, for example on a Transfer, Delete account, or Allow camera button.
The attack works because the framed site loads with the victim's cookies, so it treats the click as a genuine action by the signed-in user. Variants include likejacking on social media buttons, cursorjacking, which draws a fake cursor offset from the real one, and multi-step attacks that guide the victim through several clicks. Because the user really does click, defenses that check for a valid session or a CSRF token do not help.
The main defense is to tell browsers that your pages must not be framed by other sites. The modern way is the Content Security Policy directive frame-ancestors 'none' or frame-ancestors 'self', and the older X-Frame-Options: DENY or SAMEORIGIN header is still sent for compatibility; SameSite cookies add another layer, since cross-site frames then load without the user's session. It is like signing what looks like a delivery receipt while a hidden sheet of carbon paper copies your signature onto a different document underneath.
Clickjacking is often confused with CSRF and XSS. In CSRF, the attacker's page sends a forged request without the user touching the target site, and in XSS, the attacker's script runs inside the target site. In clickjacking, no code is injected and no request is forged: the victim really clicks the target site's own button while it is disguised.
Key takeaways
- Clickjacking hides a real site in a transparent frame over a decoy page.
- The victim's click lands on the hidden site and runs with their session.
- CSRF tokens don't stop it, because the user really performs the click.
- Block framing with the CSP
frame-ancestorsdirective and theX-Frame-Optionsheader. SameSitecookies add defense in depth by leaving cross-site frames signed out.
Example
// Tell browsers never to show these pages inside a frame on another site
app.use((req, res, next) => {
// Modern standard: the Content Security Policy frame-ancestors directive
res.setHeader("Content-Security-Policy", "frame-ancestors 'none'");
// Older header, still sent for legacy browsers
res.setHeader("X-Frame-Options", "DENY");
next();
});
// If your own pages must frame the site, use 'self' and SAMEORIGIN insteadReaders ask
How do I prevent clickjacking?
Send the Content-Security-Policy: frame-ancestors 'none' header, or 'self' if your own pages need to frame the site, and also send X-Frame-Options: DENY for older browsers. These headers tell the browser to refuse to display your pages inside frames on other sites.
Is X-Frame-Options deprecated?
It has been superseded by the CSP frame-ancestors directive, which is more flexible and takes priority in browsers that support both. Many sites still send both headers for maximum compatibility.
What is the difference between clickjacking and CSRF?
In CSRF, the attacker's page silently sends a forged request to a site where the victim is signed in. In clickjacking, the victim is tricked into clicking a real button on that site, hidden in an invisible frame, so anti-CSRF tokens don't help.
See also
- iframeWeb Development, p. 23An iframe is an HTML element that embeds another web page inside the current page, commonly used for videos, maps, payment forms and third-party widgets.
- Content Security PolicySecurity, p. 7A Content Security Policy is an HTTP response header that tells the browser which scripts, styles, and other resources a page may load, blocking injected code.
- CSRFSecurity, p. 8CSRF is an attack that tricks a logged-in user's browser into sending an unwanted request to a trusted site, which treats it as a genuine user action.
- XSSSecurity, p. 48XSS is a vulnerability that lets an attacker inject malicious JavaScript into a trusted website so that it runs in other users' browsers.
- Same-Origin PolicySecurity, p. 35The same-origin policy is a browser security rule that stops scripts on one website from reading data from another site unless that site explicitly allows it.
- CookieWeb Development, p. 6A cookie is a small piece of data a website asks the browser to store and send back with later requests, often used to keep users logged in.
Spotted a mistake or something missing on this page?Suggest an edit