防止 JavaScript 中的点击劫持攻击
点击劫持（Clickjacking），也称为 UI 伪装（UI Redressing），是一种恶意攻击，攻击者通过在 iframe 中嵌入网页，诱骗用户点击与其预期不符的内容。这可能导致未经授权的操作，并危及用户安全。在本博客中，我们将探讨如何使用 JavaScript 以及针对 Apache 和 Nginx 服务器的配置来防范点击劫持攻击，并提供易于理解的示例。
了解点击劫持
点击劫持是指在合法的网页元素上放置透明或不透明的 iframe，导致用户在不知情的情况下执行更改设置或转账等操作。
真实案例
设想这样一种情况：攻击者将银行网站的隐藏 iframe 嵌入到受信任的网页中。当用户点击一个看似无害的按钮时，实际上可能是在授权一笔银行交易。
以下是一个存在安全漏洞的页面示例：
<!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>
使用 JavaScript 防止点击劫持
为了防止点击劫持攻击，您可以使用 JavaScript 来确保您的网站不会被嵌入到其他网站框架中。以下是实施此保护措施的分步指南：
1. JavaScript 框架破坏
框架破坏是指使用 JavaScript 检测您的网站是否在 iframe 中加载，并跳出 iframe。
例子：
<!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>
在这个例子中，JavaScript 会检查当前窗口（window.self）是否是最顶层的窗口（window.top）。如果不是，它会将最顶层的窗口重定向到当前窗口的 URL，从而有效地跳出 iframe 框架。
2. 使用事件监听器增强框架破坏
您可以使用事件监听器不断检查页面是否被框架化，从而进一步增强框架破坏技术。
例子：
<!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 标头
X-Frame-Options 标头允许您指定您的网站是否可以嵌入到 iframe 中。共有三个选项：
DENY：阻止任何域名嵌入您的页面。SAMEORIGIN
：仅允许来自同一来源的嵌入。ALLOW
-FROM uri：允许来自指定 URI 的嵌入。
示例：
X-Frame-Options: DENY
Apache 配置：
将以下标头添加到您的服务器配置中：
# Apache
Header always set X-Frame-Options "DENY"
Nginx 配置：
将以下标头添加到您的服务器配置中：
2. 内容安全策略 (CSP) 框架祖先
CSP 通过 frame-ancestors 指令提供了一种更灵活的方法，该指令指定可以使用 iframe 嵌入页面的有效父级。
例子：
Content-Security-Policy: frame-ancestors 'self'
Apache 配置：
将以下标头添加到您的服务器配置中：
例子：
# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"
Nginx 配置：
将以下标头添加到您的服务器配置中：
# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";
结论
点击劫持是网络安全的严重威胁，但通过实施 JavaScript 框架破坏技术和服务器端保护措施（例如 X-Frame-Options 和 Content-Security-Policy 标头），您可以有效地保护您的 Web 应用程序。使用提供的示例来增强您网站的安全性，并为您的用户提供更安全的体验。
文章来源：https://dev.to/rigalpatel001/preventing-clickjacking-attacks-in-javascript-39pj