Preventing JavaScript Clickjacking: Essential Security Techniques

5 min readOct 3, 2024

Clickjacking, also referred to as a “UI redress attack,” is a malicious web attack where an attacker tricks users into clicking on a webpage element that they are unaware of, often by hiding or layering an invisible element over the content the user sees. In JavaScript, this form of attack can lead to severe consequences, as it allows the attacker to take advantage of user interactions, leading to unintended actions such as changing settings, performing transactions, or granting permissions. In this article, we will break down the mechanics of clickjacking attacks in JavaScript, highlight real-world examples, and provide practical strategies to prevent these attacks.

What is Clickjacking?

Clickjacking is a form of attack where a malicious actor deceives a user into clicking on an unintended UI element by overlaying it with something that appears legitimate. The term “clickjacking” stems from combining “click” (user interaction) with “hijacking” (taking over control). When this technique is used, the attacker is essentially hijacking the user’s action, leading them to inadvertently perform actions such as authorizing payments, liking content on social media, or sharing private information without realizing it.

How Clickjacking Works in JavaScript

Clickjacking in JavaScript works by layering a transparent iframe over visible content that users interact with. The JavaScript code enables the attacker to alter the positioning and visibility of elements, creating an illusion of interacting with legitimate content, while in reality, users are interacting with hidden malicious interfaces. This can be particularly dangerous if the hidden content includes sensitive actions such as submitting forms or clicking confirmation buttons.

Clickjacking Example with a Hidden iframe

<!-- Attacker’s webpage -->
<div style="position: relative;">
    <iframe src="https://trustedsite.com" style="opacity: 0; position: absolute; width: 100%; height: 100%;"></iframe>
    <button style="z-index: 1;">Click Me!</button>
</div>

In this example, the iframe from a legitimate site is hidden over the button. When the user clicks the visible button, the interaction is actually registered on the underlying hidden iframe, leading to unintended actions like submitting a form or confirming a transaction.

Types of Clickjacking Attacks

Clickjacking comes in various forms, each targeting different elements of user interaction. Below are some of the most common types of clickjacking attacks:

1. UI Redressing Clickjacking

UI redressing is the most typical form of clickjacking, where a malicious actor tricks the user into clicking something they didn’t intend to. This is often done by embedding an iframe or other hidden content over visible elements like buttons or links, leading to unintended actions such as submitting forms or sharing data.

2. Likejacking

Likejacking refers to tricking users into “liking” content, such as a social media post, without their consent. An invisible button is placed over a visible element on the page, and when the user clicks on the visible content, the like action is triggered in the background.

3. Cursorjacking

Cursorjacking manipulates the user’s cursor, causing the pointer to appear at a different location on the screen. This can confuse the user into clicking on the wrong element, potentially leading to security breaches, such as unintentionally activating links or downloading malicious files.

4. Cookie Theft via Clickjacking

Attackers may also use clickjacking to steal cookies or session data. By manipulating the browser and executing hidden JavaScript, an attacker can capture cookies, enabling them to hijack user sessions and access sensitive data.

Real-World Examples of Clickjacking

Clickjacking has affected several high-profile platforms over the years. Below are a few notable examples:

1. Facebook Likejacking

One of the most prominent cases of clickjacking occurred on Facebook, where attackers tricked users into liking pages or posts without their consent. This was achieved by embedding invisible “like” buttons on websites, which were clicked when users attempted to interact with unrelated visible content.

2. Clickjacking on Payment Gateways

There have been cases where payment platforms were targeted by clickjacking, where users were manipulated into confirming transactions or transferring funds by interacting with a seemingly unrelated web interface.

3. Clickjacking in Online Banking

Clickjacking attacks have also targeted online banking platforms, where users inadvertently granted access to their accounts or initiated payments by interacting with invisible elements layered on top of a legitimate interface.

Preventing Clickjacking in JavaScript

Developers can mitigate the risks of clickjacking by employing various security techniques. Below are several best practices for preventing clickjacking in JavaScript:

1. X-Frame-Options Header

By setting the X-Frame-Options HTTP header to DENY or SAMEORIGIN, developers can prevent their site from being embedded in iframes, which is the main technique used in clickjacking attacks.

Header always set X-Frame-Options "SAMEORIGIN"

2. Content Security Policy (CSP)

The Content-Security-Policy (CSP) is another effective method for preventing clickjacking attacks. Setting the frame-ancestors directive in a CSP header controls which origins are allowed to frame a webpage, ensuring that unauthorized sites cannot embed your content.

Content-Security-Policy: frame-ancestors 'self';

3. Frame Busting in JavaScript

Frame busting techniques in JavaScript can be used to prevent a page from being embedded within a frame. One common approach involves checking whether the page is being loaded in a top-level window and redirecting it if it’s inside an iframe.

if (window.self !== window.top) {
    window.top.location = window.self.location;
}

4. Secure UI Design

Building a secure and intuitive UI can help users recognize potential threats. For example, avoid using large, clickable areas or interactive buttons that could be easily manipulated with overlays. Always ensure that important actions are confirmed by users, either through double-click or confirmation pop-ups.

Conclusion

Clickjacking represents a serious security threat, particularly in JavaScript-driven applications. Attackers can manipulate user interfaces to trick users into taking unwanted actions, which can result in unauthorized transactions, account compromises, or data theft. By implementing preventive measures like X-Frame-Options, CSP headers, and frame-busting techniques, developers can mitigate these risks and safeguard their users from such attacks.

Source: https://www.dopethemes.com/preventing-javascript-clickjacking-essential-security-techniques/

We’ve tried our best to explain everything thoroughly, even though there’s so much information out there. If you found our writing helpful, we’d really appreciate it if you could buy us a coffee as a token of support.

Also, if you’re interested in learning more about WordPress, Javascript, HTML, CSS, and programming in general, you can subscribe to our MailChimp for some extra insights.