点击劫持，也称为 UI 纠正，是一种攻击类型，恶意行为者通过在 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 来确保您的网站不被框架。以下是有关如何实施此保护的分步指南：
1。 JavaScript 框架破坏
框架破坏涉及使用 JavaScript 来检测您的网站是否加载到 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 框架选项标头
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'";
点击劫持对 Web 安全构成严重威胁，但通过实施 JavaScript 框架破坏技术和服务器端保护（例如 X-Frame-Options 和 Content-Security-Policy 标头），您可以有效保护您的 Web 应用程序。使用提供的示例来增强网站的安全性并为用户提供更安全的体验。
以上是防止 JavaScript 中的点击劫持攻击的详细内容。更多信息请关注PHP中文网其他相关文章！
