Clickjacking
Clickjacking is a deceptive UI-based attack that tricks users into clicking on hidden elements by overlaying transparent iframes. Attackers create a malicious page that loads a legitimate site in an invisible frame, positioning it over a decoy interface to hijack user interactions.
What Is Clickjacking?
Clickjacking, also known as UI redress attack, is a malicious technique where an attacker tricks users into clicking on something different from what they perceive. This is achieved by loading a target website in a transparent or opaque iframe and overlaying it on top of a decoy page. When users interact with what appears to be a harmless button or link, they are actually clicking on hidden elements of the framed page underneath.
The vulnerability arises because web browsers allow any website to embed another website in an iframe unless explicitly prevented. The attacker crafts a page with carefully positioned invisible iframes, often using CSS opacity and z-index properties to make the malicious frame completely transparent while ensuring it captures user clicks. The victim thinks they are clicking on one thing, but their clicks are actually being registered on the hidden iframe content.
Clickjacking has been recognized as a significant threat since its public disclosure in 2008. It remains part of the OWASP Top 10 under the category of security misconfiguration and insufficient access controls. Despite being well-documented, many websites still lack proper frame-busting protections, making clickjacking a persistent attack vector for unauthorized actions, account takeovers, and social engineering campaigns.
How It Works
The attacker builds a webpage that looks innocent and enticing to users. This could be a fake game, a "Click here to win!" button, a video player, or any other interactive element designed to encourage user clicks.
The attacker embeds the victim website (such as a social media site, banking portal, or admin panel) inside an invisible iframe using CSS properties like opacity: 0 or opacity: 0.0001. The iframe is positioned using absolute positioning and z-index layering.
Using CSS positioning, the attacker carefully aligns specific interactive elements from the hidden iframe (like a "Delete Account" button or "Authorize Payment" link) directly over the decoy clickable elements on their malicious page. The user sees only the decoy page.
The victim, believing they are clicking on the harmless decoy button or link, actually clicks on the invisible iframe element underneath. Because the iframe is fully transparent and positioned above the decoy, the click registers on the framed content instead.
The click triggers an action on the victim website, such as changing account settings, authorizing a payment, liking or sharing content, enabling webcam access, or performing any other action the user is authenticated to perform. The victim has no idea their click performed an unintended action on a different site.
Vulnerable Code Example
<!-- Vulnerable page: bank.example.com/transfer -->
<!DOCTYPE html>
<html>
<head>
<title>Transfer Funds</title>
</head>
<body>
<h1>Transfer Money</h1>
<form action="/transfer" method="POST">
<input name="amount" placeholder="Amount" />
<input name="recipient" placeholder="Recipient" />
<button type="submit">Confirm Transfer</button>
</form>
</body>
</html>
<!-- Attacker's malicious page -->
<!DOCTYPE html>
<html>
<head>
<style>
#decoy-btn {
position: absolute;
top: 200px;
left: 300px;
padding: 20px 40px;
font-size: 18px;
cursor: pointer;
}
#victim-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.0001; /* Nearly invisible */
z-index: 9999; /* On top of everything */
}
</style>
</head>
<body>
<h1>Click to Win $1000!</h1>
<button id="decoy-btn">CLAIM YOUR PRIZE</button>
<!-- VULNERABLE: bank.example.com can be framed -->
<!-- The transfer button is positioned over decoy -->
<iframe id="victim-frame"
src="https://bank.example.com/transfer">
</iframe>
</body>
</html>
// User clicks "CLAIM YOUR PRIZE" but actually clicks
// the hidden "Confirm Transfer" button in the iframeSecure Code Example
// SECURE: Express.js server with frame protection
const express = require('express');
const app = express();
// 1. Set X-Frame-Options header to prevent framing
app.use((req, res, next) => {
// DENY: Page cannot be displayed in a frame
res.setHeader('X-Frame-Options', 'DENY');
// Alternative: SAMEORIGIN allows framing only by same origin
// res.setHeader('X-Frame-Options', 'SAMEORIGIN');
next();
});
// 2. Set Content-Security-Policy frame-ancestors directive
app.use((req, res, next) => {
// Modern standard: CSP frame-ancestors
res.setHeader('Content-Security-Policy', "frame-ancestors 'self'");
// For complete protection use:
// res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
next();
});
// 3. Set SameSite cookie attribute
app.use(require('cookie-session')({
name: 'session',
secret: 'your-secret-key',
sameSite: 'strict', // Prevents cookie in cross-origin contexts
secure: true,
httpOnly: true
}));
app.get('/transfer', (req, res) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Transfer Funds</title>
<script>
// 4. Client-side frame-busting script as defense-in-depth
if (window.top !== window.self) {
window.top.location = window.self.location;
}
</script>
</head>
<body>
<h1>Transfer Money</h1>
<form action="/transfer" method="POST">
<input name="amount" placeholder="Amount" />
<input name="recipient" placeholder="Recipient" />
<button type="submit">Confirm Transfer</button>
</form>
</body>
</html>
`);
});
// With these protections, the page cannot be framed
// by external sites, preventing clickjacking attacks.Types of Clickjacking
Classic Clickjacking
The most common form of clickjacking where an attacker loads a target website in a transparent iframe overlaid on top of a decoy page. The attacker uses CSS properties like opacity: 0 and precise positioning to align critical buttons or links from the victim site over enticing decoy elements. Users believe they are clicking on the visible decoy, but their clicks register on the invisible iframe underneath, triggering unintended actions like changing settings, making purchases, or granting permissions.
Likejacking
A specialized variant targeting social media platforms where attackers trick users into liking, sharing, or following content without their knowledge. The attack typically overlays a transparent Facebook "Like" button, Twitter "Follow" button, or similar social media widget over a decoy element such as a video play button or "Continue Reading" link. When executed successfully, this can rapidly spread malicious content, boost fake pages, or manipulate social media algorithms. The viral nature of social sharing amplifies the attack's reach exponentially.
Cursorjacking
An advanced clickjacking technique that manipulates the visual appearance of the mouse cursor to deceive users about where they are actually clicking. The attacker uses custom cursor images, JavaScript-based cursor tracking, or CSS cursor manipulation to make the visible cursor appear offset from its true position. This causes users to click on different elements than they intended. Cursorjacking can be combined with traditional clickjacking to create even more convincing attacks, making it extremely difficult for users to detect that their interactions are being hijacked.
Impact
A successful clickjacking attack can have serious consequences for both users and organizations. The impact depends on what actions the victim is authorized to perform on the target site and the attacker's objectives.
Attackers can trick users into performing any action they are authorized to do, including transferring money, making purchases, changing account settings, deleting data, or authorizing third-party applications. Because the user is already authenticated, the victim website has no way to distinguish between legitimate and coerced actions.
Clickjacking can facilitate account takeover by tricking users into changing their email address, password, or security settings. Attackers can also escalate privileges by causing administrators to grant unauthorized access, create new admin accounts, or disable security features without realizing what they are doing.
Users can be deceived into granting permissions to access sensitive data, enabling webcam or microphone access, sharing location data, or authorizing access to personal information. On social media platforms, likejacking can expose users' activity, interests, and social connections to attackers, leading to targeted phishing or social engineering attacks.
Successful clickjacking attacks, particularly likejacking, can spread virally through social networks. When victims unknowingly like or share malicious content, it appears in their friends' feeds with an implied endorsement, making their connections more likely to fall victim. This creates a chain reaction that can rapidly distribute malware, scams, or propaganda to thousands of users.
Prevention Checklist
Set the X-Frame-Options HTTP response header to control whether your site can be embedded in iframes. Use DENY to prevent all framing, or SAMEORIGIN to allow framing only by pages from the same origin. While this header is older and being superseded by CSP, it is still widely supported and provides important backward compatibility.
Implement the frame-ancestors directive in your Content-Security-Policy header as the modern standard for frame control. Set it to 'none' to prevent all framing, 'self' to allow only same-origin framing, or specify trusted domains. This directive is more flexible and powerful than X-Frame-Options and is the recommended approach for new applications.
Configure session cookies with the SameSite attribute set to Strict or Lax. This prevents cookies from being sent in cross-origin contexts, making it harder for attackers to perform authenticated actions through clickjacking even if they manage to frame your site. This is particularly important for sensitive operations like payments or account changes.
Include client-side JavaScript that detects when your page is loaded in an iframe and either breaks out of the frame or prevents interaction. For example: if (window.top !== window.self) window.top.location = window.self.location;. While not foolproof (attackers can use sandbox attributes to block scripts), this adds an additional layer of protection for older browsers that don't support modern headers.
For critical operations like financial transactions, account deletions, or permission grants, implement additional confirmation steps such as re-entering passwords, solving CAPTCHAs, or confirming via email or SMS. These extra steps make clickjacking attacks significantly more difficult to execute because attackers cannot easily trick users through multiple sequential interactions.
Test your application to ensure frame-busting protections are correctly implemented across all pages. Use browser developer tools to verify that X-Frame-Options and Content-Security-Policy headers are present in HTTP responses. Monitor for unusual patterns of user behavior that might indicate clickjacking attempts, such as rapid sequences of sensitive actions or actions from unusual geographic locations.
Real-World Examples
Facebook Likejacking
Multiple clickjacking attacks targeted Facebook's "Like" button to artificially inflate page popularity and spread malicious content. Attackers created pages with enticing headlines and embedded invisible Facebook Like buttons. When users clicked to read more, they unknowingly liked the malicious page, causing it to appear in their friends' feeds and spread virally across the platform.
Twitter "Don't Click" Worm
A clickjacking worm spread across Twitter by tricking users into posting tweets and following accounts without their knowledge. The attack used an invisible iframe containing Twitter's web interface, positioned over a decoy page. When users clicked anywhere on the page, they unknowingly retweeted the malicious message: "Don't Click," which ironically caused thousands of users to click and spread it further.
Adobe Flash Settings Clickjacking
Security researchers demonstrated clickjacking attacks against Adobe Flash Player's settings panel, which could be embedded in an iframe. Attackers could trick users into enabling webcam and microphone access without their knowledge by overlaying Flash permission dialogs with decoy content. This led Adobe to implement additional protections in Flash's security UI.
Google+ Clickjacking Vulnerability
A clickjacking vulnerability was discovered in Google+ that allowed attackers to trick users into sharing posts or adding people to circles without consent. The vulnerability existed because certain Google+ widgets could be framed and overlaid on malicious pages. Google patched the vulnerability and improved frame-busting protections across their services after the disclosure.
Ready to Test Your Knowledge?
Put what you have learned into practice. Try identifying and fixing clickjacking vulnerabilities in our interactive coding challenges, or explore more security guides to deepen your understanding.