What is Clickjacking? | NOC.org

Understanding Clickjacking

Clickjacking (also known as UI redressing) is an attack technique where a malicious website tricks a user into clicking on something different from what they perceive. The attacker loads the target website in a transparent or disguised iframe and overlays it on top of a decoy page. When the user clicks what they believe is a button on the decoy page, they are actually interacting with the hidden target website underneath.

This attack exploits the way browsers allow pages to embed other pages using iframes. Because the target site is loaded in a legitimate browser context with the user's active session, any click interaction is treated as an authenticated action. The user has no visual indication that they are interacting with a different website than the one they see.

How the Attack Works

A typical clickjacking attack involves these steps:

1. The attacker creates a malicious web page with an enticing call to action, such as "Click here to claim your prize" or a fake video play button.
2. The target website (such as a banking site, social media platform, or admin panel) is loaded in an invisible iframe positioned precisely over the decoy button.
3. The iframe is made transparent using CSS properties like opacity: 0 and positioned using absolute or fixed positioning.
4. When the victim clicks the visible decoy button, they are actually clicking a button on the target website in the hidden iframe.
5. Since the victim is authenticated on the target site (their session cookies are sent automatically), the action is performed with their credentials.

The CSS to create a clickjacking overlay might look like this:

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    opacity: 0;       /* invisible */
    z-index: 10;      /* on top of everything */
}

Types of Clickjacking

Classic Clickjacking

The basic form described above where a single click is hijacked. The attacker aligns a specific button or link on the target site with the visible decoy element. This can be used to perform actions like following a social media account, liking a post, or clicking a "Delete Account" button.

Likejacking

A specific form of clickjacking targeting social media platforms. The attacker tricks users into "liking" or "sharing" content on Facebook, Twitter, or similar platforms. This is used to artificially boost engagement or spread links to malicious content through the victim's social network.

Cursorjacking

The attacker replaces the user's cursor with a custom image that is offset from the actual cursor position. The user sees the cursor in one location but clicks in a different location. This is accomplished using CSS cursor property with a custom image and careful offset calculations.

Drag-and-Drop Clickjacking

More advanced attacks use the HTML5 drag-and-drop API to trick users into dragging content from the hidden iframe to the visible page (or vice versa). This can be used to extract text content, inject content into forms, or move files.

Multi-Step Clickjacking

Some actions require multiple clicks (such as confirming a deletion). The attacker guides the user through multiple steps, repositioning the invisible iframe after each click to align with the next required interaction point. This often uses game-like interfaces where the user clicks repeatedly in specific locations.

Real-World Consequences

• Account takeover: Changing account settings like email address or password through clicked buttons the user cannot see.
• Financial transactions: Initiating bank transfers, purchases, or payment approvals.
• Permission grants: Enabling webcam or microphone access through browser permission dialogs.
• Social engineering amplification: Spreading malicious links through the victim's social media accounts.
• Administrative actions: Creating new admin users or changing configuration settings on CMS platforms.

Prevention Methods

X-Frame-Options Header

The X-Frame-Options HTTP response header tells browsers whether your page can be displayed in an iframe. It supports three values:

• DENY - The page cannot be displayed in any iframe, regardless of the origin.
• SAMEORIGIN - The page can only be displayed in an iframe on pages from the same origin (same domain, protocol, and port).
• ALLOW-FROM uri - The page can be displayed in an iframe only from the specified origin (deprecated and not supported in modern browsers).

To configure this on Apache:

Header always set X-Frame-Options "SAMEORIGIN"

On Nginx:

add_header X-Frame-Options "SAMEORIGIN" always;

Content Security Policy: frame-ancestors

The CSP frame-ancestors directive is the modern replacement for X-Frame-Options and provides more flexibility. It specifies which origins are allowed to embed the page in an iframe, frame, object, or embed element:

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

This is equivalent to X-Frame-Options: SAMEORIGIN but supports multiple origins:

Content-Security-Policy: frame-ancestors 'self' https://trusted-partner.com;

To completely prevent framing:

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

The frame-ancestors directive takes precedence over X-Frame-Options in browsers that support both. However, setting both headers provides coverage for older browsers.

JavaScript Frame-Busting (Legacy)

Before X-Frame-Options was widely supported, websites used JavaScript to detect and break out of iframes:

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

This approach is considered insufficient today because it can be defeated by attackers using the sandbox attribute on the iframe to disable JavaScript or using the X-Frame-Options header on the attacker's page to prevent the redirect. Always use HTTP headers instead of JavaScript for clickjacking protection.

SameSite Cookie Attribute

Setting cookies with the SameSite=Strict or SameSite=Lax attribute prevents them from being sent in cross-site iframe contexts. This means even if your page is loaded in an attacker's iframe, the user's session cookie is not included, so authenticated actions cannot be performed.

Summary

Clickjacking is a deceptive attack that exploits the browser's ability to embed pages in iframes. The most effective defense is setting the X-Frame-Options header and CSP frame-ancestors directive to control which origins can embed your pages. Combined with SameSite cookie attributes, these measures make clickjacking attacks against your site practically impossible. Every website that handles authenticated actions should implement these headers as a baseline security measure.