Clickjacking Explained

Clickjacking, also known as UI redressing, is a web security attack that tricks users into clicking on something different from what they believe they are interacting with. Attackers achieve this by placing a legitimate website inside a transparent or disguised iframe and overlaying deceptive content on top of it. As a result, users unknowingly perform actions on the embedded website while thinking they are interacting with the visible page.

Although clickjacking does not exploit a software bug directly, it takes advantage of user trust and browser behavior. Without proper defenses, attackers may trick users into changing settings, authorizing transactions or revealing sensitive information.

What Is Clickjacking?

Clickjacking is a technique that hides or disguises interactive elements from a trusted website beneath misleading interface elements. When the victim clicks a visible button or link, the click is actually delivered to the hidden page loaded inside an iframe.

Why Clickjacking Works

Browsers normally allow websites to embed other pages inside iframes unless the embedded site explicitly forbids it. If sensitive pages can be framed, attackers may create convincing interfaces that cause users to unknowingly interact with the embedded application.

How a Clickjacking Attack Works

The attacker creates a malicious page containing a transparent or partially hidden iframe that loads a legitimate website. Visible buttons or images are carefully aligned with sensitive controls inside the iframe. When the victim clicks the visible element, the browser sends the click to the hidden page instead.

Victim Opens Malicious Website
↓
Hidden Iframe Loads Trusted Website
↓
Fake Interface Overlays Iframe
↓
Victim Clicks Visible Button
↓
Hidden Website Receives Click

Common Attack Targets

Real-World Examples

Historically, clickjacking has been used to trick users into enabling webcams, granting browser permissions, following social media accounts and performing administrative actions in web applications. Modern browsers and security headers have significantly reduced many of these risks, but proper server configuration remains essential.

Clickjacking vs CSRF

Clickjacking and CSRF both involve unwanted user actions, but they work differently. Clickjacking manipulates what the user clicks, whereas CSRF forges authenticated requests without requiring the victim to intentionally interact with the target website.

Who Is at Risk?

• Banking applications.
• Administrative dashboards.
• Cloud management portals.
• Social networking sites.
• Account settings pages.
• Any website allowing framing of sensitive pages.

How to Prevent Clickjacking

The primary defense against clickjacking is preventing untrusted websites from embedding sensitive pages in iframes. Modern browsers support multiple security mechanisms that instruct the browser whether a page may be framed and under what conditions.

Content Security Policy: frame-ancestors

The Content Security Policy (CSP) frame-ancestors directive specifies which websites are allowed to embed a page inside an iframe, frame or object. It is the modern and recommended defense against clickjacking.

Content-Security-Policy: frame-ancestors 'none'

Using 'none' prevents the page from being embedded by any website. Specific trusted domains may also be listed when framing is required for legitimate integrations.

X-Frame-Options

Before CSP became widely supported, websites commonly used the X-Frame-Options response header. Although still recognized by most browsers, CSP frame-ancestors provides greater flexibility and is generally preferred for new applications.

Frame Busting Scripts

Older applications sometimes used JavaScript frame-busting techniques to escape from iframes. These scripts are no longer considered a reliable primary defense because they can often be bypassed. Security headers should be used instead.

Permissions Policy

Permissions Policy allows websites to control access to powerful browser features such as the camera, microphone and geolocation. While it does not directly prevent clickjacking, restricting unnecessary browser capabilities reduces the potential impact of malicious interactions.

Defense in Depth

Clickjacking protection should be combined with other security mechanisms. Authentication, authorization, CSRF protection and secure session management all help reduce the consequences of successful attacks targeting authenticated users.

• Use CSP frame-ancestors.
• Configure X-Frame-Options for compatibility.
• Protect sensitive actions with user confirmation where appropriate.
• Limit browser permissions using Permissions Policy.
• Combine clickjacking defenses with CSRF protection.

Applications That May Require Framing

Some applications intentionally allow framing for dashboards, embedded widgets or trusted business integrations. In these situations, frame-ancestors should explicitly list only the trusted origins that require embedding rather than allowing framing from any website.

Testing Clickjacking Protection

Developers can verify clickjacking protection by attempting to load application pages inside iframes from unrelated domains. Browser developer tools and HTTP response headers can also be inspected to confirm that the correct security policies are being returned.

Common Mistakes

Clickjacking protection is often overlooked because applications appear to function correctly without it. However, allowing sensitive pages to be embedded by arbitrary websites can expose users to deceptive interface attacks, even when authentication and encryption are properly implemented.

• Allowing sensitive pages to be embedded by any website.
• Relying only on JavaScript frame-busting techniques.
• Forgetting to protect administrative interfaces.
• Using overly permissive frame-ancestors policies.
• Assuming HTTPS prevents clickjacking.
• Ignoring browser security headers during deployment.

Best Practices

• Use the CSP frame-ancestors directive to control framing.
• Configure X-Frame-Options for compatibility with older browsers.
• Prevent framing of administrative and account management pages.
• Restrict browser capabilities with Permissions Policy when appropriate.
• Combine clickjacking protection with CSRF defenses and strong authentication.
• Regularly verify security headers after application updates.

Frequently Asked Questions

Helpful Security Tools

A Security Headers Generator helps create recommended HTTP security headers, a CSP Header Builder generates Content Security Policy directives including frame-ancestors, a Permissions Policy Generator configures browser feature restrictions, an HTTP Header Generator creates custom HTTP response headers for testing, and an HTTP Header Viewer displays the headers returned by a web server for verification and debugging.

Conclusion

Clickjacking is a user interface attack that exploits trust rather than software flaws by tricking users into interacting with hidden web pages. Fortunately, it can be effectively mitigated through browser-enforced security headers such as Content Security Policy frame-ancestors and X-Frame-Options. When combined with secure authentication, CSRF protection and careful application design, these measures significantly reduce the risk of unauthorized user actions caused by deceptive interfaces.