What Is Clickjacking?

Clickjacking is a cyberattack that tricks users into clicking a webpage element that is invisible or disguised as something else. It may lead users to unknowingly download malware, disclose credentials or sensitive information, or perform unwanted actions.

This cheat sheet aims to guide developers in defending against clickjacking, also known as user interface redressing attacks.

Types of Clickjacking Attack

1. Unauthorised Iframes

Attackers embed the target webpage in an iframe on their own page. Users visiting what appears to be the original page may actually click buttons inside the malicious page.

2. Invisible Iframes

The attacker embeds the target webpage in an iframe but makes the frame invisible. Users may unknowingly perform malicious actions while visiting what they believe is the original page.

3. Button Overlays

Attackers place a fake button over the original webpage. The button actually performs malicious actions, which users may trigger unintentionally.

4. Flash Clickjacking

The attacker places the target webpage inside a Flash object. Users visiting the original page may perform unwanted actions through the Flash content.

5. CSS z-index Manipulation

Attackers embed the original page in their own page and use CSS z-index to position an overlay above it. Although users appear to click the original page, they may actually perform malicious actions.

Clickjacking poses a serious risk to user security. Web developers should take precautions and strengthen their defences.

Defending Against Clickjacking

There are three main defensive mechanisms:

The X-Frame-Options HTTP Header

X-Frame-Options plays an important role in modern web security. It determines whether a webpage may be displayed in another site's frame, controlling whether the browser allows the page to load within a frame. It helps reduce exposure to malicious framing and strengthens page security.

What Is X-Frame-Options?

X-Frame-Options is an HTTP header used to determine whether web applications may appear in another site's frame. It controls whether the browser may load a page in a frame. The header can take three values:

1. DENY: Prevents the page from appearing in any frame. The browser does not allow it to load inside another frame.
2. SAMEORIGIN: Allows the page to appear only in frames within the same origin, meaning frames embedded under the same domain.
3. ALLOW-FROM uri: Allows the page to be displayed under a specific URI. This can be useful for allowing it on a particular website.

Why Does X-Frame-Options Matter?

The header is an important website security measure. Like Cross-Origin Resource Sharing (CORS), it reduces browser vulnerabilities and prevents malicious use. In particular, it helps prevent attacks such as clickjacking.

Frame-Busting Techniques

Frame busting prevents a webpage from being displayed within another frame. It is typically implemented with JavaScript or by manipulating CSS z-index. When the browser detects a frame surrounding the original page, frame busting directs the user to the full browser window to prevent clickjacking.

Using JavaScript

JavaScript is the most common method. A simple script sends the browser back to the homepage, preventing the page from being shown in another frame. For example:

JavaScript

if (window.top !== window.self) {
  window.location.replace('https://www.example.com/');
}

This sends the browser back to the homepage, preventing the page from being displayed within another frame.

Manipulating CSS z-index

CSS z-index manipulation can also be used for frame busting. If a surrounding frame is detected, the page's z-index is adjusted to bring it to the front. When displayed inside another frame, the user is then directed to the full browser window.

Frame-busting techniques help web developers provide an effective defence against attacks such as clickjacking.

Content Security Policy (CSP)

CSP controls how webpage resources should load. It tells the browser which sources may be loaded and prevents potentially malicious content. Its use can help prevent clickjacking.

Advantages of CSP

1. Blocking malicious content: By defining allowed sources, CSP prevents malicious content from loading, improves page security and protects users.
2. Preventing clickjacking: CSP can prevent a page from being displayed in another frame, protecting users from malicious clicks.
3. Defining trusted sources: Developers can specify trusted sources so the page loads content only from them, reducing vulnerabilities.
4. Reducing application errors: Strict control over permitted resources can help identify potential security vulnerabilities and reduce application errors.

Correct CSP configuration can improve webpage security and provide protection against potential attacks.