Clickjacking Vulnerabilty

Don’t click everywhere

3 min readMar 23, 2024

Clickjacking is like a manipulating users to do something used by cybercriminals to trick website visitors into clicking on harmful links disguised as harmless content. Imagine you’re the owner of the internet’s favorite kitten video site, but your site’s popularity also makes it a prime target for clickjacking attacks. Here’s how you can protect yourself and your users.

Understanding Clickjacking

Clickjacking works by layering invisible elements on top of what seems like a normal webpage. Hackers achieve this by embedding your site within a iframe on their malicious page and covering it with invisible layers.

<html>
  <head>
    <style>
      body {
        position: relative;
        margin: 0;
      }

      iframe {
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <iframe src="www.kittens.com/cute-white">/* legitimate website link */
    </iframe>
  </body>
</html>

The attacker can make a website and include the video of the legitimate website. Like they can make the domain like www.k1tt3ns.com/cute-white

<html>
  <head>
    <style>
      body {
        position: relative;
        margin: 0;
      }

      iframe, div, a {
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
      }

      div {
        z-index: 100;
      }

      a {
        display: block;
      }
    </style>
  </head>
  <body>
    <iframe src="www.kittens.com/cute-white">
    </iframe>
    <div>
      <a href="https://www.facebook.com/sharer/sharer.php?u=hot-felines-in-your-area.com">
    </div>
  </body>
</html>

Another div is used to make a thin transparent layer a href link which refer you to malicious website anywhere you click because it contain the 100% height and width of the website page. If you don’t know about the simple html, css and java-script learn these because they can make you understand the structure and behaviour of website. I just learned those for fun and it will give you some frontend skills.

The Risks

Let’s dive into what a determined hacker could do with a clickjacking attack:

Stealing login credentials: They might overlay a fake login box on top of the real one, tricking users into giving away their credentials.
Activating cameras or microphones: Invisible elements could fool users into enabling access to their devices.
Spreading malware and worms: Users might unwittingly be sent to malicious downloads or social media posts.
Promoting online scams: Innocent clicks could lead users into fraudulent schemes.

Defending Your Site and Users

Content Security Policy (CSP)

CSP is like setting up digital bouncers for your site. By configuring HTTP headers, you can specify which domains are allowed to embed your site. Here’s how it works:

Content-Security-Policy: frame-ancestors 'none': This tells browsers not to allow your page to be framed by anyone.
Content-Security-Policy: frame-ancestors 'self': Only let your site be framed if it's on the same origin.
Content-Security-Policy: frame-ancestors *uri*: Specify specific origins allowed to frame your site.

X-Frame-Options

Think of X-Frame-Options as your website’s bouncer. It controls whether a browser should let your page be shown within a frame. Here are your options:

DENY: Absolutely no framing allowed.
SAMEORIGIN: Only let your site be framed if it's on the same origin.
ALLOW-FROM *uri*: Allow framing from specific origins.

Frame-Killing

For older browsers, you need a digital guard dog to prevent your site from being included in shady frames. Here’s a simple script to implement:

<style>
  /* Hide page by default */
  html { display : none; }
</style>
<script>
  if (self == top) {
    // Show the page if not in a frame
    document.documentElement.style.display = 'block';
  } else {
    // Break out of the frame
    top.location = self.location;
  }
</script>

Implementation Examples

JavaScript Frame Killing

<style>
  /* Hide page by default */
  html { display : none; }
</style>
<script>
  if (self == top) {
    // Show the page if not in a frame
    document.documentElement.style.display = 'block';
  } else {
    // Break out of the frame
    top.location = self.location;
  }
</script>

By implementing these straightforward measures, you can protect your website and users from the deceptive tactics of clickjacking attacks. Stay safe and prioritize the security of your online community!

keep the bytes..