各位老铁，晚上好！我是你们的老朋友，Bug猎人小李，今天咱们来聊聊一个听起来很玄乎，但其实离我们很近的安全漏洞：Clickjacking（点击劫持）。
开场白：谁动了我的鼠标？
想象一下，你正在浏览一个看起来很正常的网页，可能是在看美女图片，或者在研究最新的JS框架。突然，你发现你的鼠标好像不受控制了，莫名其妙地点击了一些按钮，甚至做了一些你完全没想过的事情，比如“关注”了一个奇怪的账号，或者在论坛上发了一篇你根本没写过的帖子。
别害怕，你不是中邪了，很可能你遇到了 Clickjacking 攻击。
什么是 Clickjacking？
Clickjacking，顾名思义，就是点击劫持。它的本质是一种利用透明 iframe 覆盖在目标网站上的 UI 诱骗用户点击攻击者精心构造的“按钮”的攻击方式。用户以为点击的是正常网页上的元素，实际上点击的是隐藏在下面的恶意链接或者按钮。
你可以把它想象成：攻击者在你家窗户外面贴了一张透明的纸，上面画了一个按钮。你以为你在点自己家里的东西，其实你是在点窗户外面那张纸上的按钮，而这个按钮可能连接着一些危险的操作。
Clickjacking 的原理：iframe 的魔力
Clickjacking 的核心在于 iframe 元素。iframe 允许在一个 HTML 页面中嵌入另一个 HTML 页面，就像一个画中画。
攻击者会创建一个恶意网页，在这个网页中，他会：
- 嵌入目标网站： 使用
iframe将目标网站嵌入到恶意网页中。 - 设置透明度： 将
iframe设置为透明，或者使用其他 CSS 技巧让其看起来是透明的。 - 覆盖恶意按钮： 在透明的
iframe上覆盖一个恶意按钮或链接，这个按钮或链接的位置与目标网站上某个重要按钮的位置重叠。 - 诱骗用户点击： 通过各种手段诱骗用户点击恶意网页上的按钮。
当用户点击恶意网页上的按钮时，实际上点击的是隐藏在下面的目标网站上的按钮。由于用户已经登录了目标网站，所以这个点击操作会被认为是用户的正常行为。
举个栗子：修改用户密码
假设目标网站允许用户通过点击一个按钮来修改密码。攻击者可以创建一个恶意网页，这个网页中嵌入了目标网站的密码修改页面，并将 iframe 设置为透明，然后在 iframe 上覆盖一个看起来像“免费领取优惠券”的按钮。
当用户点击“免费领取优惠券”按钮时，实际上点击的是目标网站的“修改密码”按钮。如果用户之前已经登录了目标网站，那么用户的密码就会被修改为攻击者设定的值。
代码示例：一个简单的 Clickjacking 攻击
下面是一个简单的 Clickjacking 攻击的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Clickjacking Demo</title>
<style>
#target_website {
position: relative;
width: 800px;
height: 600px;
opacity: 0.5; /* 设置透明度，方便观察 */
border: 1px solid red; /* 方便观察 */
}
#overlay {
position: absolute;
top: 150px; /* 调整位置，覆盖目标按钮 */
left: 250px; /* 调整位置，覆盖目标按钮 */
width: 200px;
height: 50px;
background-color: blue;
color: white;
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 1; /* 确保覆盖在 iframe 之上 */
}
</style>
</head>
<body>
<h1>Clickjacking Demo</h1>
<p>点击下面的蓝色按钮，你可能就被劫持了！</p>
<div style="position: relative;">
<iframe id="target_website" src="https://www.example.com"></iframe> <!-- 替换成目标网站 -->
<div id="overlay">免费领取优惠券</div>
</div>
<script>
document.getElementById('overlay').addEventListener('click', function() {
alert('你点击了优惠券，但实际上你可能点击了目标网站上的某个按钮！');
});
</script>
</body>
</html>注意：
- 请将
https://www.example.com替换成你想要测试的目标网站。 - 这个例子只是一个演示，为了方便观察，我设置了
iframe的透明度为0.5，并且添加了边框。在实际攻击中，攻击者会将iframe设置为完全透明。 overlay的top和left属性需要根据目标网站上按钮的位置进行调整。
你可以打开这个 HTML 文件，然后尝试点击蓝色按钮，看看会发生什么。
Clickjacking 的危害
Clickjacking 攻击可以造成多种危害，例如：
- 修改用户账户信息： 攻击者可以利用 Clickjacking 修改用户的密码、邮箱地址、手机号码等信息。
- 盗取用户资金： 攻击者可以利用 Clickjacking 进行转账、购买商品等操作。
- 发布恶意内容： 攻击者可以利用 Clickjacking 在用户的社交媒体账号上发布恶意内容，或者在论坛上发表恶意帖子。
- 传播恶意软件： 攻击者可以利用 Clickjacking 诱骗用户下载恶意软件。
- 进行钓鱼攻击： 攻击者可以利用 Clickjacking 将用户引导到钓鱼网站，窃取用户的用户名和密码。
Clickjacking 的防御措施：X-Frame-Options
说了这么多 Clickjacking 的危害，接下来咱们聊聊如何防御 Clickjacking 攻击。最常用的防御措施是使用 X-Frame-Options HTTP 响应头。
X-Frame-Options 是一个 HTTP 响应头，用于指示浏览器是否允许将页面嵌入到 <frame>、<iframe> 或 <object> 中。通过设置 X-Frame-Options，网站可以防止被其他网站嵌入到 iframe 中，从而防止 Clickjacking 攻击。
X-Frame-Options 有三个可选值：
- DENY： 表示该页面不允许被任何网站嵌入到
iframe中。 - SAMEORIGIN： 表示该页面只允许被同源网站嵌入到
iframe中。同源是指协议、域名和端口都相同。 - ALLOW-FROM uri： 表示该页面只允许被指定的网站嵌入到
iframe中。但是，ALLOW-FROM在某些浏览器中可能不支持，所以不建议使用。
如何在服务器端设置 X-Frame-Options？
不同的服务器设置 X-Frame-Options 的方式略有不同，下面是一些常见的服务器设置示例：
-
Apache：
在 Apache 的配置文件（例如
.htaccess文件）中添加以下内容：Header always set X-Frame-Options "DENY" # 或者 Header always set X-Frame-Options "SAMEORIGIN" -
Nginx：
在 Nginx 的配置文件中添加以下内容：
add_header X-Frame-Options "DENY"; # 或者 add_header X-Frame-Options "SAMEORIGIN"; -
IIS：
在 IIS 管理器中，选择网站，然后选择 "HTTP 响应标头"，添加一个名为 "X-Frame-Options" 的标头，并将其值设置为 "DENY" 或 "SAMEORIGIN"。
-
Node.js (Express)：
app.use(function(req, res, next) { res.setHeader('X-Frame-Options', 'DENY'); // 或者 res.setHeader('X-Frame-Options', 'SAMEORIGIN'); next(); });
Content-Security-Policy (CSP)：X-Frame-Options 的升级版
Content-Security-Policy (CSP) 是一个更强大的 HTTP 响应头，可以用来控制浏览器可以加载哪些资源，以及可以执行哪些操作。CSP 可以用来防御多种攻击，包括 Clickjacking、XSS 等。
CSP 中有一个 frame-ancestors 指令，可以用来控制哪些网站可以嵌入当前页面到 iframe 中。frame-ancestors 的用法与 X-Frame-Options 类似，但是更加灵活。
例如，要禁止所有网站嵌入当前页面，可以使用以下 CSP 指令：
Content-Security-Policy: frame-ancestors 'none';要允许同源网站嵌入当前页面，可以使用以下 CSP 指令：
Content-Security-Policy: frame-ancestors 'self';要允许指定的网站嵌入当前页面，可以使用以下 CSP 指令：
Content-Security-Policy: frame-ancestors https://www.example.com;注意：
frame-ancestors指令会覆盖X-Frame-Options指令。- CSP 的配置比较复杂，需要根据实际情况进行调整。
JavaScript 防御 Clickjacking
除了使用 HTTP 响应头之外，还可以使用 JavaScript 来防御 Clickjacking 攻击。
一种常用的 JavaScript 防御方法是使用 "frame busting" 技术。Frame busting 的原理是：如果当前页面被嵌入到 iframe 中，就将页面重定向到顶层窗口。
下面是一个简单的 Frame busting 代码示例：
if (top != self) {
top.location.href = self.location.href;
}这段代码的含义是：如果当前窗口不是顶层窗口，就将顶层窗口的 URL 设置为当前窗口的 URL，从而将页面重定向到顶层窗口。
注意：
- Frame busting 技术并不能完全防御 Clickjacking 攻击，因为攻击者可以使用一些技巧来绕过 Frame busting。
- Frame busting 技术可能会影响用户体验，因为如果用户通过
iframe嵌入你的网站，你的网站会被强制跳转到顶层窗口。
其他防御措施
除了上面提到的方法之外，还有一些其他的防御 Clickjacking 攻击的措施：
- 使用 CAPTCHA： 在重要的操作（例如修改密码、转账）之前，要求用户输入 CAPTCHA 验证码，可以有效防止 Clickjacking 攻击。
- 双重验证： 在重要的操作之前，要求用户进行双重验证，例如通过短信验证码或邮箱验证码。
- 用户教育： 提高用户的安全意识，提醒用户不要轻易点击不明链接，不要在不信任的网站上输入敏感信息。
Clickjacking 防御措施总结
| 防御措施 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| X-Frame-Options | 简单易用，配置方便，兼容性好 | 功能有限，只能防御简单的 Clickjacking 攻击，无法防御所有类型的 Clickjacking 攻击，ALLOW-FROM 指令可能存在兼容性问题 |
适用于大多数网站，特别是对于不需要被其他网站嵌入的网站 |
| Content-Security-Policy | 功能强大，可以防御多种攻击，包括 Clickjacking、XSS 等，可以灵活控制哪些网站可以嵌入当前页面 | 配置复杂，需要根据实际情况进行调整，兼容性可能存在问题 | 适用于对安全性要求较高的网站，需要更精细的控制策略 |
| JavaScript Frame busting | 原理简单，容易理解 | 容易被绕过，可能会影响用户体验 | 适用于一些简单的场景，作为一种补充防御措施 |
| CAPTCHA | 可以有效防止 Clickjacking 攻击，防止机器人操作 | 影响用户体验，用户需要手动输入验证码 | 适用于重要的操作，例如修改密码、转账 |
| 双重验证 | 可以提高安全性，即使攻击者劫持了用户的点击，也无法完成操作 | 增加用户操作流程，可能会影响用户体验 | 适用于重要的操作，例如修改密码、转账 |
| 用户教育 | 提高用户的安全意识，可以从根本上防止 Clickjacking 攻击，成本较低 | 效果不确定，用户可能仍然会点击不明链接 | 适用于所有网站，作为一种长期策略 |
最佳实践
- 优先使用
X-Frame-Options或Content-Security-Policy： 这两种方法是防御 Clickjacking 攻击最有效的方法。 - 结合使用多种防御措施： 可以结合使用
X-Frame-Options、Content-Security-Policy、JavaScript Frame busting、CAPTCHA、双重验证等多种防御措施，提高安全性。 - 定期进行安全审计： 定期对网站进行安全审计，检查是否存在 Clickjacking 漏洞。
- 关注最新的安全漏洞： 关注最新的安全漏洞，及时修复漏洞。
总结：与狼共舞，技高一筹
Clickjacking 是一种常见的网络安全漏洞，但是只要我们了解它的原理，并采取相应的防御措施，就可以有效地防止 Clickjacking 攻击。
记住，网络安全是一个持续的过程，我们需要不断学习，不断提高自己的安全意识，才能在与狼共舞的网络世界里，技高一筹，保护好自己的信息安全。
好了，今天的讲座就到这里，感谢各位老铁的观看！ 如果大家还有什么问题，欢迎在评论区留言，我会尽力解答。下次再见！