What Is Clickjacking and How Frame-Busting Works

Clickjacking, also known as a user interface (UI) redressing attack, is a web security vulnerability where malicious actors trick users into performing unintended actions by embedding a legitimate website inside a hidden layer. This article explains how clickjacking works, how frame-busting JavaScript functions to prevent these attacks by preventing framing, and the modern security standards that complement or replace legacy frame-busting techniques.

Understanding Clickjacking (UI Redressing)

Clickjacking occurs when an attacker renders a trusted, authenticated webpage inside an invisible <iframe> on a malicious site. The attacker overlays tempting or deceptive visual elements—such as a “Claim Prize” button or a decoy game—directly over sensitive UI elements on the framed target site (such as “Delete Account,” “Transfer Funds,” or “Authorize App”).

When an unsuspecting visitor clicks on the visible decoy element, their click is actually registered by the hidden, underlying iframe. Because the browser automatically includes the user’s active session cookies with the request, the target application processes the unauthorized action as a legitimate command from the authenticated user.

How Frame-Busting JavaScript Works

Frame-busting, also referred to as framekilling, is a client-side defense mechanism implemented in JavaScript. Its purpose is to ensure that a web page cannot be loaded within a frame or iframe controlled by an external website.

A standard frame-busting script checks whether the current page is running inside a frame by comparing the current window object (self or window) with the topmost window object (top or parent).

A fundamental frame-busting script looks like this:

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

When this script executes inside a frame: 1. Condition Check: The script evaluates if the current frame (self) is the top-level window (top). 2. Breakout Execution: If top.location does not match self.location, the script detects that the page is embedded in an iframe. 3. Redirection: It immediately forces the top-level window to navigate directly to the target URL (self.location), breaking out of the malicious wrapper and exposing the real website to the user.

Advanced Frame-Busting and Modern Defenses

While legacy frame-busting relies on redirection, attackers developed workarounds such as utilizing the HTML5 sandbox attribute (sandbox="allow-scripts") or interfering via the onBeforeUnload event to block top-level navigation.

To create a more robust defense using JavaScript, developers often combine script checks with CSS to hide page content by default until the frame check verifies that the page is not framed:

<style id="antiClickjack">
    body { display: none !important; }
</style>
<script>
    if (self === top) {
        var antiClickjack = document.getElementById("antiClickjack");
        antiClickjack.parentNode.removeChild(antiClickjack);
    } else {
        top.location = self.location;
    }
</script>

Today, while frame-busting scripts remain a useful fallback for older environments, server-side HTTP response headers are the primary defense against clickjacking: