点击劫持是一种攻击类型，通过在 iframe 中嵌入网页来诱骗用户点击与他们所感知的不同的东西。这可能导致未经授权的操作并危及用户安全。在本篇文章中，我们将探讨如何使用JavaScript 和 Apache 和 Nginx 的服务器配置来防止点击劫持攻击。
首先我们一起来看看这样一个场景:攻击者将来自银行站点的隐藏 iframe 嵌入到受信任的网页中。当用户点击一个看似无害的按钮时，他们实际上可能是在授权一笔银行交易。
<!DOCTYPE html>
<html>
<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内，是的话就会脱离它。
<!DOCTYPE html>
<html>
<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 技术：
<!DOCTYPE html>
<html>
<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。
例如：
X-Frame-Options: DENY
Apache 配置：
# Apache Header always set X-Frame-Options "DENY"
2. Content-Security-Policy (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'";
结尾
点击劫持是对 web 安全的严重威胁，但通过实现 JavaScript 技术和服务器端保护，如 X-Frame-Options和Content-Security-Policy，你可以有效地保护你的 web 应用程序。
