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. 帧破坏脚本

在您的网页中实施 frame-busting 脚本，以防止它们嵌入到 iframe 中。

3. 内容安全策略（CSP）

使用内容安全策略标头来控制您的网站可以从中加载内容的来源，从而降低点击劫持的风险。

4. 用户教育

教育用户了解与不熟悉或看起来可疑的内容交互相关的潜在风险。

随着网络安全的发展，点击劫持的未来趋势可能包括利用人工智能的更复杂技术、增加使用社会工程策略以及专注于绕过高级安全措施。此外，随着增强现实（AR）和虚拟现实（VR）等新兴技术的兴起，沉浸式点击劫持体验的新载体可能会出现，这要求在防御策略和用户意识方面不断创新。

打印本页