There are a plethora of techniques that attackers use to redirect site visitors and harvest sensitive information on compromised websites. But when most webmasters think about securing their website, they often don’t think about how attackers can inject clicks on it from another site.

In today’s article, we’ll explain what clickjacking is, outline the types of clickjacking attacks, describe some examples of what clickjacking looks like, and provide tips on how to prevent clickjacking on your site.

Content:

• What is clickjacking?
• What does clickjacking look like?
• What are the types of clickjacking attacks?
• How to check if a website is vulnerable to clickjacking
• How to prevent clickjacking

What is clickjacking?

Clickjacking occurs when an attacker tricks an unsuspecting user into interacting with an invisible element hidden under the user interface.

Also known as a UI redress attack or UI redressing, the goal of a clickjacking attack is to essentially lure a site visitor into clicking on the attackers website, which triggers an action on a different, iframed website. This click can trigger an action such as deleting a user, updating the permissions, or any other action normally done via clicks on the targeted website.

Keystrokes can also be hijacked with a similar technique. By using a combination of iframes, text boxes, and stylesheets, attackers are able to trick a user into believing they’re typing a password into a legitimate field for authorization — when in reality they’re actually typing their credentials into the bad actor’s invisible frame.

Now that we have a general idea of what clickjacking is, let’s take a look at some examples.

What does clickjacking look like?

Clickjacking attacks are typically performed by arranging or manipulating the website’s visible interface in a way so that the victim isn’t aware of the attack.

This deception can lure users into performing actions like downloading malware, transferring money to target accounts, exploiting auto-fill functionalities in password managers, or even accessing the victim’s computer.

Let’s dive in and explore some of the different types of clickjacking attacks.

Types of clickjacking attacks

Content overlays

One of the most common types of clickjacking attacks, overlaying malicious content on top of the existing page can be accomplished in a few different ways:

• Invisible iframes: The attacker loads an invisible 1×1 iframe that prevents the user from seeing the content. The invisible iframe’s target element, such as a button on the website, is centered under the victim’s cursor making it easy to trick the user into clicking the malicious content.

• Pointer events: A floating div tag is created that completely covers the target UI element. The attacker sets CSS pointer-events property to ‘none’ which makes clicks go through it, making them register on the iframe behind it.

• Transparent overlays: The attacker overlays a transparent window on top of an element that the user will click on. The victim does not see the transparent window and believes they are clicking on the legitimate button or link element. But since the attacker’s transparent window is the top-most content on the page, the click is hijacked by the attacker.

Rapid content replacement 

In this attack, blurred overlays are created to cover target elements on the web page. The action is carried out almost instantly (milliseconds) right before the victim engages with the web page. This technique requires the attacker to predict the timing of the click with some accuracy. The overlay is visible only long enough to capture the click before it is concealed.

Phantom mouse cursors

Using floating div tags, an attacker can simulate an additional mouse cursor and set it to be a fixed distance from the victim’s real mouse pointer. The attacker will then position the page so that the deceptive cursor is more prominent and place an element that they want the victim to click on the page. The user will see a fake cursor that emulates their own mouse movements and be tricked into clicking on the malicious element before they realize what happened.

How to check if your site is vulnerable to clickjacking

One simple way to check if your website is vulnerable to clickjacking is to create a HTML page and try to insert one of your web pages into an iframe. To properly emulate a clickjacking attack, you’ll want to execute code on a different web server.

How to prevent clickjacking

Now that we know what clickjacking looks like and some of the techniques that attackers use, let’s take a look at some of the ways to protect your site against attacks.

Use the X-Frame-Options headers

The X-Frame-Options HTTP header helps prevent your website from being used in invisible iframes.

There are two possible directives you can use:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

The DENY option is the most secure. If you want to be able to use any of your current pages in a frame, you can restrict the use of frames to your domain with the SAMEORIGIN option.

It’s worth noting that while major browsers support the X-Frame-Options header, some browsers don’t. So you’ll want to combine this with some of the other solutions below.

Use a Content Security Policy

Content Security Policy (CSP) is a policy that uses headers or meta elements to define or restrict what content can load on your site.

You can leverage the frame-ancestors CSP frame directive to instruct the browser not to allow frames from other domains.

Here are some examples of frame-ancestors CSP policies for you to leverage:

# Disallow embedding. All iframes will be blank or contain a browser specific error page.
Content-Security-Policy: frame-ancestors 'none'

# Allow embedding for your own site content only.
Content-Security-Policy: frame-ancestors 'self'

Frame-busting with JavaScript

Also known as framekiller, frame busting can be used to prevent your site from being loaded within a frame without permission. 

While it’s possible to bypass in modern browsers as they are able to “hide” frame status, you can include the following JavaScript on vulnerable web pages as a layer of defense against clickjacking.

<!DOCTYPE html>
<html lang=en>
  <head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="css/tacit-css.min.css"/>
    <title>Your Website Title</title>
    <!-- Frame-Busting Script-->
    <script>
       if (self == top) {
       document.documentElement.style.display = 'block'; 
   } else {
       top.location = self.location; 
   }
    </script> 
  <!-- The rest of your page-->
</html>

This technique will help prevent your site’s pages from being displayed within frames from other sources.

Set auth cookies SameSite=Strict

To avoid clickjacking for session cookies, you can set auth cookies to SameSite in your HTTP response header. Instead of preventing any malicious iframe behavior, it will prevent the website from being logged in while in an iframe.

Set-Cookie: authorization=secret; samesite

Important caveat: This technique will only be useful for scenarios where the attack requires the user to be authenticated via cookies.

Conclusion

Clickjacking is easy for attackers to implement. Any action on your site that can be performed in a single click has the potential to be hijacked by attackers.

To mitigate risk, we strongly encourage webmasters and developers to use X-Frame-Options on any web pages that are not meant to run as a frame. You can also leverage a Content Security Policy to mitigate risk and defend against clickjacking.

For in-depth information about the top security risks facing webmasters, refer to our OWASP Guide for more details.