Preventing Clickjacking Attacks in JavaScript-JS Tutorial-php.cn

Preventing Clickjacking Attacks in JavaScript

WBOY

Release： 2024-07-22 17:56:39

Original

1075 people have browsed it

Preventing Clickjacking Attacks in JavaScript

Clickjacking, also known as UI redressing, is a type of attack where malicious actors trick users into clicking on something different from what they perceive by embedding web pages within iframes. This can lead to unauthorized actions and compromise user security. In this blog, we will explore how to prevent clickjacking attacks using JavaScript and server configurations for Apache and Nginx, along with user-friendly examples.

Understanding Clickjacking

Clickjacking involves placing a transparent or opaque iframe over a legitimate webpage element, causing users to unknowingly perform actions such as changing settings or transferring funds.

Real-World Example

Consider a scenario where an attacker embeds a hidden iframe from a banking site into a trusted webpage. When a user clicks on a seemingly harmless button, they might actually be authorizing a bank transaction.

Here’s an example of a vulnerable page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clickjacking Example</title>
</head>
<body>
    <h1>Welcome to Our Site</h1>
    <button onclick="alert('Clicked!')">Click Me</button>
    <iframe src="https://example-bank.com/transfer" style="opacity:0; position:absolute; top:0; left:0; width:100%; height:100%;"></iframe>
</body>
</html>

Copy after login

Preventing Clickjacking with JavaScript

To prevent clickjacking attacks, you can use JavaScript to ensure that your website is not being framed. Here’s a step-by-step guide on how to implement this protection:

1. JavaScript Frame Busting
Frame busting involves using JavaScript to detect if your website is loaded inside an iframe and breaking out of it.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame Busting Example</title>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.self.location;
        }
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

Copy after login

In this example, the JavaScript checks if the current window (window.self) is not the topmost window (window.top). If it's not, it redirects the topmost window to the current window's URL, effectively breaking out of the iframe.

2. Enhanced Frame Busting with Event Listeners
You can further enhance your frame busting technique by using event listeners to continuously check if your page is framed.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Frame Busting</title>
    <script>
        function preventClickjacking() {
            if (window.top !== window.self) {
                window.top.location = window.self.location;
            }
        }

        window.addEventListener('DOMContentLoaded', preventClickjacking);
        window.addEventListener('load', preventClickjacking);
        window.addEventListener('resize', preventClickjacking);
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

Copy after login

In this example, the preventClickjacking function is called on the DOMContentLoaded, load, and resize events to ensure continuous protection.

Server-Side Protection

While JavaScript methods are useful, implementing server-side protections provides an additional layer of security. Here’s how to set up HTTP headers in Apache and Nginx to prevent clickjacking:

1. X-Frame-Options Header
The X-Frame-Options header allows you to specify whether your site can be embedded in iframes. There are three options:

DENY: Prevents any domain from embedding your page.
SAMEORIGIN: Allows embedding only from the same origin.
ALLOW-FROM uri: Allows embedding from the specified URI.
Example:

X-Frame-Options: DENY

Copy after login

Apache Configuration
Add this header to your server configuration:

# Apache
Header always set X-Frame-Options "DENY"

Copy after login

Nginx Configuration
Add this header to your server configuration:

2. Content-Security-Policy (CSP) Frame Ancestors
CSP provides a more flexible approach through the frame-ancestors directive, which specifies valid parents that may embed the page using iframes.

Example:

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

Copy after login

Apache Configuration
Add this header to your server configuration:

Example:

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

Copy after login

Nginx Configuration
Add this header to your server configuration:

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

Copy after login

Conclusion

Clickjacking is a serious threat to web security, but by implementing JavaScript frame busting techniques and server-side protections like X-Frame-Options and Content-Security-Policy headers, you can effectively safeguard your web applications. Use the examples provided to enhance your site’s security and provide a safer experience for your users.

The above is the detailed content of Preventing Clickjacking Attacks in JavaScript. For more information, please follow other related articles on the PHP Chinese website!