点击劫持是一种攻击类型，通过在 iframe 中嵌入网页来诱骗用户点击与他们所感知的不同的东西。这可能导致未经授权的操作并危及用户安全。在本篇文章中，我们将探讨如何使用JavaScript 和 Apache 和 Nginx 的服务器配置来防止点击劫持攻击。

首先我们一起来看看这样一个场景:攻击者将来自银行站点的隐藏 iframe 嵌入到受信任的网页中。当用户点击一个看似无害的按钮时，他们实际上可能是在授权一笔银行交易。

html 复制代码

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

使用 JavaScript 预防点击劫持

为了防止点击劫持攻击，你可以使用 JavaScript 来确保你的网站没有被陷害。

1. 突破"Frame Busting "

在"X-FRAME-OPTIONS"或者"浏览器防御部署"被广泛使用之前，网站防御 ClickJacking 的唯一方法也只能使用 javascript 脚本。我们把这样的 javascript 脚本称为 "Frame Busting"，而突破"Frame Busting"的脚本，则称为 Busting Frame Busting。

"Frame Busting" 使用JavaScript来检测网站是否加载在iframe内，是的话就会脱离它。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame Busting</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>

在这个例子中，JavaScript检查当前窗口(window.self)是否不是最顶层的窗口(window.top)。如果不是，它会将最上面的窗口重定向到当前窗口的URL，从而有效地脱离iframe。

使用事件监听来增强 Frame Busting

可以通过使用事件监听来持续检查页面是否有 Iframe，从而进一步增强 Frame Busting 技术：

html 复制代码

<!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>

在上面代码中，我们在 DOMContentLoaded、load和resize 事件上调用preventClickjacking 函数。

服务端一侧的保护机制

虽然JavaScript方法很有用，但服务器一侧也提供了额外的安全层。以下是如何在Apache和Nginx中设置HTTP标头以防止点击劫持:

1. X-Frame-Options Header

X-Frame-Options Header允许用户指定用户的站点是否可以嵌入到 iframe中。有三种选项:

DENY:阻止任何域嵌入页面。
SAMEORIGIN:只允许从同一个原点嵌入。
ALLOW-FROM uri:允许嵌入指定的 uri。

例如：

makefile 复制代码

X-Frame-Options: DENY

Apache 配置：

bash 复制代码

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

2. Content-Security-Policy (CSP)

CSP通过frame-ancestors指令提供了一种更灵活的方法，该指令指定了可以使用iframe嵌入页面的有效父类:

css 复制代码

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

Apache 配置：

bash 复制代码

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

Nginx 配置：

bash 复制代码

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

结尾

点击劫持是对 web 安全的严重威胁，但通过实现 JavaScript 技术和服务器端保护，如 X-Frame-Options和Content-Security-Policy，你可以有效地保护你的 web 应用程序。

注意：防止点击劫持攻击

使用 JavaScript 预防点击劫持

1. 突破"Frame Busting "

使用事件监听来增强 Frame Busting

服务端一侧的保护机制

2. Content-Security-Policy (CSP)

结尾