How to Protect Javascript Applications from Clickjacking with Frame Busting Techniques

by

Clickjacking is a malicious technique where an attacker tricks users into clicking on hidden or disguised elements of a webpage, potentially leading to unauthorized actions. Protecting JavaScript applications from clickjacking is essential to ensure user security and trust.

Understanding Frame Busting

Frame busting is a set of techniques used to prevent a webpage from being embedded within a frame or iframe on another site. By doing so, it helps protect against clickjacking attacks that rely on framing the target site.

Common Frame Busting Techniques

  • JavaScript Frame Busting: Using scripts that detect if the page is inside a frame and then break out of it.
  • HTTP Headers: Setting security headers like X-Frame-Options and Content-Security-Policy to prevent framing.

JavaScript Frame Busting Example

One common method involves checking if the current window is the top window and redirecting if not:

if (window.top !== window.self) { window.top.location = window.location; }

Implementing Security Headers

HTTP headers provide a server-side way to prevent framing:

  • X-Frame-Options: Can be set to SAMEORIGIN or DENY.
  • Content-Security-Policy: Using frame-ancestors directive to specify allowed framing sources.

For example, in Apache configuration:

Header always append X-Frame-Options "SAMEORIGIN"

Or in HTTP response headers:

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

Best Practices for Protecting JavaScript Applications

  • Combine frame busting scripts with security headers for layered security.
  • Regularly update your security policies to adapt to new threats.
  • Test your application to ensure framing is effectively blocked.
  • Educate developers about clickjacking and security best practices.

By implementing both client-side and server-side protections, developers can significantly reduce the risk of clickjacking attacks on their JavaScript applications.