DEV Community

Amanpreet Singh
Amanpreet Singh

Posted on • Originally published at blog.amanpreet.dev on

Clickjacking: The Web Attack You Need to Know About

Clickjacking: The Web Attack You Need to Know About

Introduction

15 years in development, 0 focus on cybersecurity. Until Zoom rejected my app for clickjacking. Scary stuff.

πŸ’‘ Stop falling for clickjacking scams

A few weeks ago, my Zoom app was rejected as it failed their Security and Privacy Compliance review.

I was a little bit worried and a bit disappointed with myself because having such a vast experience I never focussed on security, but this was the time to learn something new and also to make my web apps secure from Clickjacking attacks.

Below is the screenshot of the email from the Zoom team.

zoom-email

Luckily the Zoom team was very helpful and they shared a few resources with me to resolve the Clickjacking issue.

So what is Clickjacking? How can we prevent it? All these questions must be in your mind. So let's continue getting an in-depth analysis of Clickjacking.

What is Clickjacking?

Clickjacking is a web attack where malicious websites trick you into clicking on hidden elements. These actions could lead to malware downloads, sharing sensitive info, or making unwanted purchases.

Protect yourself by staying vigilant and avoiding suspicious links.

A working example of Clickjacking

Suppose we have a website with a login form that looks this this

<form action="/login" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username"><br>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password"><br>
    <input type="submit" value="Login">
</form>

Enter fullscreen mode Exit fullscreen mode

An attacker can create a malicious webpage that loads your login form (mentioned above) in an iframe and overlays it with another element, such as a fake button that says Click Me to win a prize!

<!-- malicious webpage -->
<html>
  <head>
    <title>Clickjacking Demo</title>
    <style>
      iframe {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 400px;
        height: 200px;
        opacity: 0.5;
      }
      #overlay {
        position: absolute;
        top: 150px;
        left: 150px;
        width: 200px;
        height: 100px;
        background-color: red;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <iframe src="https://yourwebsite.com/login"></iframe>
    <div id="overlay"></div>
    <script>
      // this code listens for clicks on the overlay element and forwards them to the hidden iframe
      document.getElementById("overlay").addEventListener("click", function() {
        document.getElementsByTagName("iframe")[0].contentWindow.document.forms[0].submit();
      });
    </script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Now, when a user visits the attacker's page and clicks on the overlay element, they are actually clicking on the hidden login form of your website, which the attacker can use to steal the user's credentials.

Clickjacking is also called UI redress attack because the attack tampers with the user interface of the exploited website

ui-redress-attack

Unmasking Clickjacking: The Hidden Threat

Clickjacking attacks can be carried out using a variety of techniques, including iframes, invisible buttons, and social engineering.

Clickjacking attacks can be used to steal sensitive information, spread malware, or manipulate user behavior.

Now let's add preventive actions in our above code using X-Frame-Options header with the DENY or SAMEORIGIN option to prevent your login form from loading in an iframe on another domain or origin

To prevent clickjacking attacks, web developers can use various techniques such as

  • Implementing the X-Frame-Options HTTP response header:

  • For applications using nginx as a web-server

  • There is also 1 more option available ALLOW-FROM uri - This option is used when there is a specific URI that is allowed to frame your website.

  • Using Content Security Policy i.e. CSP

Check the implementation

You can check the implementation of clickjacking prevention with the following guidelines -

  • After adding the X-Frame-Options header in your server configuration and also setting the Content Security Policy (CSP) headers in your server

  • Access your website on a web browser

  • Open the browser's developer tools to access the network tab.

  • Browse to the page or action for which you want to check for clickjacking protection.

  • Look for corresponding HTTP response headers

By examining the HTTP response headers in the browser's tools, you can verify if clickjacking preventive measures are correctly applied.

😱 Unbelievable Clickjacking Cases!

Some of the famous Clickjacking attacks have been

Adobe fixes Clikcjacking flaw

Google patches Clickjacking bug

Facebook likejacking attacks continue with flesh appeal

Twitter Worm

Jotform

All the above examples of our some very very big companies indeed.

πŸ” Protect Your Online Life: Enhance Web Security

In a hyper-connected digital era, where vulnerabilities lurk at every click, it's crucial to safeguard our online presence. Clickjacking attacks are not new and as a developer, we should take full responsibility in applying the prevention methods.

Well, luckily using the above-mentioned methods, I was able to verify my Zoom app and prevent it from being suspended.

Below is the email reference for it

zoom-success

Conclusion

Clickjacking is a persistent threat that demands continuous attention from web developers and users alike. By staying informed about the potential risks and adopting best practices for web security we can prevent Clickjacking attacks.

I hope you have learned something new as I did. If so, kindly like it or share it with others so they can also see it.

Top comments (0)