Modern websites are not only about beautiful UI and animations security matters too.

One of the most common browser-based attacks is called Clickjacking.

Even frontend developers should understand it because this attack targets the UI itself.

🛡️ What is Clickjacking?

Clickjacking is a type of attack where a malicious website tricks users into clicking something they cannot see.

Usually, the attacker places your website inside an invisible <iframe> and overlays fake buttons or content on top of it.

The user thinks they are clicking one thing…

but they are actually clicking buttons on your real website underneath.

⚠️ Real Example

Imagine this:

A user visits a fake website with a “Play Video” button.

But behind that button, your banking website is loaded invisibly inside an iframe.

When the user clicks “Play Video” they might actually:

• transfer money
• change account settings
• enable permissions
• delete data

without realizing it.

🧠 Why It’s Dangerous

Clickjacking can:

• trick users into performing actions
• steal interactions
• bypass user intention
• abuse trusted websites

In some advanced cases, attackers can even capture keyboard input or sensitive interactions.

🔒 Modern Protection Methods

Modern browsers provide built-in defenses.

1. X-Frame-Options Header

This HTTP header controls whether your website can be embedded inside an iframe.

Block all framing

X-Frame-Options: DENY

Allow only your own website

X-Frame-Options: SAMEORIGIN

This is the most common option.

2. Content Security Policy (Recommended)

Today, most developers prefer using CSP.

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

This tells the browser:

“Only allow this website to be framed by itself.”

You can also allow specific domains:

Content-Security-Policy: frame-ancestors 'self' https://example.com;

⚠️ Important Note

Older browsers handled clickjacking differently.

Some legacy protections used JavaScript frame-busting techniques like this:

<script>
  if (self !== top) {
    top.location = self.location;
  }
</script>

But modern security headers are much more reliable.

✅ Best Practice

For modern applications:

• Use Content-Security-Policy
• Add frame-ancestors
• Avoid unnecessary iframes
• Protect sensitive actions with confirmation steps

Final Thoughts

Frontend security is not only the backend developer’s responsibility.

Even UI decisions can become security vulnerabilities.

Understanding attacks like Clickjacking helps developers build safer and more trustworthy web applications.