Understanding Clickjacking: Attack Techniques and Effective Defenses
This article explains what clickjacking (UI redressing) is, demonstrates how attackers craft hidden iframe layers to hijack user clicks, and outlines both client‑side and server‑side mitigation strategies such as frame‑busting scripts, X‑Frame‑Options, and Content‑Security‑Policy directives.
What Is Clickjacking?
Clickjacking is a UI‑based attack that tricks users into clicking hidden, dangerous elements on a malicious page. An attacker typically embeds the target site in an iframe and overlays a decoy element, causing the user to perform unintended actions such as payments.
Constructing a Basic Clickjacking Attack
Attackers use CSS to create layered elements. The target site is placed in an invisible iframe while a visible decoy covers it. Minimal HTML/CSS example:
<head>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
...
<body>
<div id="decoy_website">
...decoy web content here...
</div>
<iframe id="target_website" src="https://vulnerable-website.com"></iframe>
</body>The z-index determines stacking order, and opacity near zero makes the iframe invisible. Browsers may block extremely low opacity (e.g., Chrome 76), but the value can be adjusted to avoid detection.
Pre‑Filling Form Inputs
When a site accepts GET parameters to pre‑populate form fields, an attacker can craft a URL with desired values and overlay a transparent submit button on the decoy page, causing an unintended submission.
Frame‑Interception Scripts
Client‑side defenses often rely on scripts that detect and block malicious frames. Typical checks include:
Ensuring the current window is the top‑most window.
Making all frame elements visible.
Blocking clicks on invisible frames.
Flagging potential clickjacking attempts.
These scripts can be bypassed using the HTML5
iframesandboxattribute. Example that disables top‑navigation checks:
<iframe id="victim_website" src="https://victim-website.com" sandbox="allow-forms"></iframe>Combining Clickjacking with DOM XSS
If an attacker first discovers a DOM XSS vulnerability, they can embed the malicious URL inside the hidden iframe. The victim’s click on the decoy triggers the XSS payload, amplifying impact.
Multi‑Step Clickjacking
Complex attacks may require a sequence of actions, such as adding an item to a cart and then completing a purchase. Attackers chain multiple iframes or view changes, requiring precise alignment and timing.
Server‑Side Defenses
Browsers respect HTTP response headers that restrict iframe embedding.
X‑Frame‑Options
The X-Frame-Options header controls whether a page may be framed. Common directives: X-Frame-Options: deny Rejects all framing attempts. X-Frame-Options: sameorigin Allows only same‑origin framing. X-Frame-Options: allow-from https://trusted.com Whitelists a specific origin (not supported by all browsers).
Content Security Policy (CSP)
The CSP header can include a frame-ancestors directive to control which origins may embed the page.
Content-Security-Policy: frame-ancestors 'self';or
Content-Security-Policy: frame-ancestors trusted-site.com;Using frame-ancestors 'none' is equivalent to X-Frame-Options: deny. Proper CSP configuration, combined with X-Frame-Options, provides layered defense against clickjacking and related XSS attacks.
System Architect Go
Programming, architecture, application development, message queues, middleware, databases, containerization, big data, image processing, machine learning, AI, personal growth.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.