JavaScript - 点击劫持攻击
点击劫持攻击
攻击者利用点击劫持(一种网络攻击形式)欺骗用户点击与其感知不同的对象;这种欺骗可能导致意外操作。攻击者通过在有效内容上覆盖不可见的元素或框架来掩盖恶意意图或直接操纵网页元素的外观。
点击劫持会带来严重的风险，例如未经授权的金融交易、潜在的数据泄露以及敏感信息的泄露。点击劫持会对用户和网站所有者造成影响，导致法律后果、经济损失以及网络安全隐患。点击劫持的欺骗性质会侵蚀用户信任，并对数字生态系统造成深远的影响。
免责声明:本章内容仅供教育目的!
点击劫持的工作原理?
覆盖内容
攻击者创建恶意/垃圾邮件/诈骗网站，或将恶意代码注入实际上合法的网站。
攻击者将不可见的元素或框架放置在页面上的合法内容上。这些元素可以是透明的 iframe 或其他 HTML 元素。
欺骗性呈现
然后，攻击者诱使用户与页面上的可见元素进行交互，这些可见元素通常是按钮、链接或表单。
然而，这些可见元素实际上位于不可见的恶意元素之上。
用户交互
当用户与可见元素交互(点击、输入等)时，他们会在不知不觉中与覆盖在合法内容之上的隐藏恶意元素进行交互。
意外操作
攻击者可以操纵隐藏元素，以用户的名义执行意外操作。这可能包括进行不必要的交易、更改账户设置，甚至提交敏感信息。
用户不知情
由于用户认为他们正在与看到的可见元素进行交互，因此他们并未意识到自己的操作被重定向到执行恶意活动。
示例
示例 1:按钮覆盖
提供的 HTML 代码演示了一个按钮覆盖点击劫持示例。该按钮显示给用户，但实际上它覆盖在一个隐藏的恶意 iframe 上，从而将用户引导至一个可能有害的页面。
home.html
<!DOCTYPE html>
<html>
<body>
<h2>This is content of the home page</h2>
<iframe src="legitimate-site.html" width="100%" height="100%"></iframe>
<div>
<button onclick="window.location.href='malicious-site.html'">Click Me</button>
</div>
</body>
</html>
legitimate-site.html
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Welcome to Legitimate Site</h1>
</header>
<section>
<p>This is a legitimate website. You can trust the content here.</p>
</section>
<footer>
<p>© 2024 Legitimate Site. All rights reserved.</p>
</footer>
</body>
</html>
malicious-site.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
.danger-sign {
color: red;
font-size: 2em;
}
.warning-message {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1 class="danger-sign"> Danger: Malicious Site</h1>
</header>
<section>
<p class="warning-message">This website has been identified as potentially harmful. Visiting it may pose a security risk to your computer and personal information.</p>
</section>
<footer>
<p>Please close this page immediately and do not proceed.</p>
</footer>
</body>
</html>
输出
示例 2
本例中，网页加载时会自动点击一个标识为"clickMe"的按钮。该按钮在收到用户点击交互后，会激活一个 JavaScript 事件，将用户重定向到一个名为"malicious-site.html"的潜在有害网站。这种隐蔽的操作会在用户不知情或未经同意的情况下，引导他们访问意想不到的目的地，令人不安。请务必注意:这些做法确实具有潜在的危害性，并且本质上是不道德的;我们必须负责任地处理这些行为，并在法律和道德界限之内。
malicious-site.html 代码与上述代码相同。
home.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
button {
position: absolute;
z-index: 1;
background-color: transparent;
border: none;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body onload="myFunction()">
<h2>Your Content Goes Here</h2>
<button id="clickMe">Click Me</button>
<script>
window.onload = function() {
var button = document.getElementById("clickMe");
button.click();
};
document.getElementById("clickMe").addEventListener("click", function() {
window.location.href = "malicious-site.html";
});
</script>
</body>
</html>
输出
真实世界点击劫持事件
1. Facebook"点赞"按钮 (2011)
攻击者将恶意的"点赞"按钮叠加在诱人的视频缩略图上，诱骗用户在不知情的情况下点赞恶意页面。
2. Adobe Flash 更新骗局 (2015):
伪装成 Adobe Flash 更新的恶意按钮叠加在合法网站上，导致用户在不知情的情况下下载恶意软件。
3. Twitter 点击劫持攻击
Twitter 上的恶意链接伪装成诱人内容，导致用户无意中转发和传播恶意内容。
4. LinkedIn 虚假连接请求
点击劫持通过在看似无害的内容上叠加连接请求按钮，诱骗 LinkedIn 用户连接到虚假个人资料。
5. Google Play 商店欺骗
Google Play 商店中的恶意叠加层诱骗用户进行非预期的下载或操作，通常与广告有关。
预防措施
1. X-Frame-Options 标头
在 Web 服务器的响应中将 X-Frame-Options 标头设置为 DENY 或 SAMEORIGIN，以防止您的网站被嵌入到 iframe 中。
2.框架破坏脚本
在您的网页中实施框架破坏脚本，以防止它们嵌入到 iframe 中。
3. 内容安全策略 (CSP)
使用内容安全策略标头来控制您的网站可以加载内容的来源，从而降低点击劫持的风险。
4. 用户教育
教育用户了解与不熟悉或可疑内容交互的潜在风险。
随着网络安全的发展，点击劫持的未来趋势可能包括利用人工智能的更复杂的技术、更多地使用社会工程学策略，以及专注于绕过高级安全措施。此外，随着增强现实 (AR) 和虚拟现实 (VR) 等新兴技术的兴起，沉浸式点击劫持体验的新载体可能会出现，这要求防御策略和用户意识的不断创新。
