Description
Clickjacking, also known as a UI redressing attack, exploits the browser's ability to render third-party web pages inside <iframe> elements. An attacker creates a malicious page that loads the target application in a transparent or partially transparent iframe, then overlays decoy UI elements positioned precisely over sensitive controls—a "Confirm Transfer" button, an account deletion link, or a permission grant dialog. The victim believes they are interacting with the attacker's page, but their clicks are captured by the hidden iframe and processed as authenticated actions on the target application.
CWE-1021 (Improper Restriction of Rendered UI Layers) directly describes this class of vulnerability. The root cause is the absence of browser directives that instruct the browser to refuse to render the page inside a frame controlled by a foreign origin. Without these directives, any page can embed any other page in an iframe, regardless of the sensitivity of the embedded content.
Clickjacking is most impactful on applications that perform state-changing operations with GET requests or single-click actions, and on pages that handle OAuth authorization flows, where a single click can grant an attacker's application access to a user's account. Social media platforms have historically been targeted to force involuntary follows, shares, and likes at scale.
How It Works
An attacker builds an HTML page that iframes the target, then positions the iframe behind a convincing decoy element:
<!DOCTYPE html>
<html>
<head>
<style>
#decoy-btn {
position: absolute; top: 320px; left: 210px;
z-index: 2; padding: 10px 20px;
background: #4CAF50; color: white;
font-size: 16px; border: none; cursor: pointer;
}
#target-frame {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
opacity: 0.0; /* set to 0.3 during development to align */
z-index: 1;
}
</style>
</head>
<body>
<button id="decoy-btn">Click to claim your prize!</button>
<iframe id="target-frame"
src="https://bank.example.com/transfer?to=attacker&amount=500"
sandbox="allow-forms allow-scripts allow-same-origin">
</iframe>
</body>
</html>
The attacker tests frameability using Burp Suite's Clickjacking PoC generator (found under the Clickbandit tool), which automates the overlay construction and alignment process, or by manually checking for the absence of X-Frame-Options and Content-Security-Policy: frame-ancestors headers.
# Check for missing frame protection headers
curl -sI https://example.com | grep -iE "x-frame-options|content-security-policy"
Impact
- Unauthorized transactions — Users are tricked into confirming financial transfers, purchases, or account changes without awareness.
- Account takeover — OAuth permission grants are silently approved, giving attacker-controlled applications access to the victim's account.
- Privilege changes — Administrative actions such as adding users, changing email addresses, or disabling MFA are performed unknowingly.
- Social engineering amplification — Forced social media interactions (likes, follows, shares) are used to spread malicious content at scale.
- Data exposure — Drag-and-drop clickjacking variants can exfiltrate data by tricking users into pasting content into attacker-controlled fields.
Detection
- Issue a
curl -I https://target.comrequest and verify whetherX-Frame-Options(DENY or SAMEORIGIN) orContent-Security-Policy: frame-ancestors 'none'orframe-ancestors 'self'is present in the response headers. - Build a proof-of-concept HTML file that iframes the target page; open it in a browser and confirm whether the target page renders inside the frame.
- Use Burp Suite's Clickbandit tool (Burp menu > Burp Clickbandit) to automatically generate and test a clickjacking PoC against the target.
- Test pages that perform state-changing single-click or form-submit actions specifically, as these represent the highest-risk targets.
- Check that the header is returned consistently across all application paths, including admin pages, OAuth endpoints, and API responses that return HTML.
Remediation
Set Content-Security-Policy: frame-ancestors. This is the modern, recommended control. Use frame-ancestors 'none' to prohibit all framing, or frame-ancestors 'self' to allow only same-origin framing:
Content-Security-Policy: frame-ancestors 'none';
Set X-Frame-Options as a fallback. Older browsers that do not support CSP frame-ancestors respect this header. Use DENY or SAMEORIGIN:
X-Frame-Options: DENY
Apply to all responses. Configure these headers at the web server or reverse proxy level (Nginx, Apache, CloudFront) so they apply globally, not only to specific routes.
Do not rely on JavaScript frame-busting. Frame-busting scripts are bypassed by the sandbox attribute and should not be used as a primary control.