Published on

Understanding and Preventing Clickjacking Attacks

Authors
  • avatar
    Name
    Hieu Cao
    Twitter

Introduction

Clickjacking, also known as a UI redress attack, is a type of web security vulnerability where an attacker tricks users into clicking on something different from what they perceive, potentially leading to unintended actions. This article explains the mechanics of clickjacking and provides practical steps to prevent it.

What is Clickjacking?

Clickjacking involves embedding a legitimate web page or UI element inside a malicious site using an <iframe>. The attacker overlays it with deceptive elements to trick users into performing unintended actions such as:

  • Transferring money.
  • Changing account settings.
  • Sharing sensitive information.

Example Scenario

Imagine a banking page embedded in an invisible <iframe> overlaid with a fake button that says "Claim Your Prize!" When the user clicks the fake button, they unknowingly authorize a transaction.

How Clickjacking Works

Steps:

  1. Embedding Target Content: The attacker embeds a legitimate web page using an <iframe>.
  2. Overlaying Deceptive UI: A transparent layer or misleading visuals are added to mask the legitimate content.
  3. User Interaction: The user clicks on the disguised content, unknowingly performing an action on the legitimate site.

Preventing Clickjacking Attacks

1. Implement X-Frame-Options Header

The X-Frame-Options HTTP header controls whether your site can be embedded in an <iframe>.

Syntax:

X-Frame-Options: DENY

Options:

  • DENY: Prevents all <iframe> embedding.
  • SAMEORIGIN: Allows embedding only on the same origin.

Example:

In an Express.js app, add the header:

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY')
  next()
})

2. Use Content Security Policy (CSP)

A CSP can restrict the domains allowed to embed your content.

Example:

Content-Security-Policy: frame-ancestors 'self';

This policy ensures that only your domain can embed your content.

Real-World Examples of Clickjacking

  1. Social Media Likejacking: Attackers disguise "Like" buttons to gain unauthorized likes for content.

  2. Banking and Payment Systems: Users are tricked into authorizing transactions they didn’t intend to.

  3. Authentication Forms: Login forms are framed to steal credentials.

Conclusion

Clickjacking is a serious threat to web application security. By implementing headers like X-Frame-Options and Content-Security-Policy, you can effectively prevent attackers from embedding your site. Educating users and testing your applications for vulnerabilities are additional measures to ensure robust security.

Stay vigilant and keep your applications safe from clickjacking and other security threats.