Clickjacking 是什么？
攻击者利用 clickjacking（点击劫持）这种形式的网络攻击来欺骗用户点击与他们感知不同的对象；这种欺骗可能导致用户执行非预期的操作。攻击者通过在合法内容之上覆盖不可见元素或框架来达到目的，从而掩盖恶意意图或直接操控网页元素的外观。
clickjacking 可能导致严重的风险，比如未经授权的金融交易、潜在的数据泄露和敏感信息的暴露。clickjacking 影响用户和网站所有者，带来法律后果、经济损失，并加剧网络安全问题。clickjacking 的欺骗性质可能会侵蚀用户信任，并在网络生态系统中产生深远影响。
免责声明：本章节内容仅供教育用途！
Clickjacking 如何运作？
覆盖内容
攻击者创建恶意/垃圾邮件/诈骗网站或将恶意代码注入到实际上合法的网站中。
攻击者将不可见元素或框架定位在页面上的合法内容之上。这些元素可以是透明的 iframes 或其他 HTML 元素。
欺骗性呈现
攻击者然后诱使用户与页面上可见的元素交互，这些通常是按钮、链接或表单。
但是，这些可见元素实际上是位于不可见的恶意元素之上。
用户交互
当用户与可见元素（点击、输入等）交互时，他们不知情地与覆盖在合法内容之上的隐藏恶意元素进行交互。
非预期动作
攻击者可以操控隐藏元素来代表用户执行非预期的动作。这可能包括进行不需要的交易、更改账户设置，甚至提交敏感信息。
用户不知情
因为用户认为他们在与所看到的可见元素互动，因此他们不知道自己的操作被重定向去执行恶意活动。
示例
示例 1：按钮覆盖
提供的 HTML 代码演示了一个按钮覆盖 clickjacking 示例。按钮被呈现给用户，但实际上覆盖在一个隐藏的恶意 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>
输出
Clickjacking 攻击
示例 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>
输出
Clickjacking 攻击
真实世界的 Clickjacking 事件
-
Facebook "Like" 按钮（2011） 攻击者在吸引人的视频缩略图上覆盖了一个恶意的 "Like" 按钮，诱骗用户无意中点赞了一个恶意页面。
-
Adobe Flash 更新骗局（2015） 被伪装成 Adobe Flash 更新的恶意按钮覆盖在合法网站上，导致用户无意下载了恶意软件。
-
Twitter Clickjacking 攻击 掩饰成诱人内容的恶意链接出现在 Twitter 上，导致用户无意间转发和传播恶意内容。
-
LinkedIn 假冒连接请求 利用 clickjacking 诱骗 LinkedIn 用户通过覆盖看似无辜内容之上的连接请求按钮与假账户建立联系。
-
Google Play 商店欺骗 覆盖在 Google Play 商店上的恶意元素诱骗用户进行无意下载或其他操作，通常与广告有关。
防范措施
-
X-Frame-Options 标头 在你的 Web 服务器响应中设置 X-Frame-Options 标头为 DENY 或 SAMEORIGIN，以防止你的站点被嵌入到 iframes 中。
-
Frame-Busting 脚本 在你的网页中实施 frame-busting 脚本，以防止它们被嵌入到 iframes 中。
-
内容安全策略（CSP） 使用内容安全策略标头来控制你的网站可以从哪些来源加载内容，从而减少 clickjacking 的风险。
-
用户教育 教育用户了解与不熟悉或可疑内容交互相关的潜在风险。
随着网络安全的发展，未来的 clickjacking 趋势可能包括更复杂的技术，利用人工智能，增加社会工程学手段的使用，并专注于绕过高级安全措施。此外，随着诸如增强现实（AR）和虚拟现实（VR）等新兴技术的兴起，新的沉浸式 clickjacking 体验向量可能出现，要求持续创新防御策略和提高用户意识。