JavaScript - 点击劫持攻击

你好，有抱负的程序开发者们！今天，我们将深入探索网络安全这个迷人的领域，特别是关注一个名为点击劫持的小花招。如果你是编程新手，不用担心——我会一步一步地引导你了解这个话题，就像我过去几年里为无数学生所做的那样。那么，让我们开始吧！

JavaScript - Clickjacking Attack

点击劫持攻击

想象一下，你正要点击一个可爱的猫咪视频，但意外地订购了100只橡皮鸭。这 essentially 就是一个点击劫持攻击所做的——它诱使你点击你并未打算点击的东西。

点击劫持，也被称为用户界面重置，是一种恶意技术，攻击者用它来诱骗用户点击他们感知到的不同的东西。这可能导致意外的操作、数据盗窃，甚至恶意软件的安装。

点击劫持是如何工作的？

现在，让我们分解一下这种狡猾的攻击实际上是如何工作的：

攻击者创建一个看似无害的网页。
他们在一个不可见的iframe中嵌入目标网站（他们希望你与之交互的网站）。
攻击者的页面设计得完美覆盖目标网站的按钮或链接。
当你以为你在点击攻击者的页面时，你实际上是在与隐藏的目标网站进行交互。

这就像魔术师的手法，但用在网页上！

示例

让我们看一些代码示例来更好地理解这个概念。如果你现在还不理解所有内容，不用担心——我们会逐一分析！

示例 1：基本的点击劫持

<html>
<head>
<title>赢取奖品！</title>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>点击这里赢取奖品！</h1>
<button>领取奖品</button>
</div>
<iframe id="target_website" src="https://example.com/delete-account"></iframe>
</body>
</html>

在这个示例中：

我们创建了一个承诺奖品的诱饵网站。
我们在不可见的iframe中嵌入了目标网站（example.com/delete-account）。
Iframe 被定位在“领取奖品”按钮上。
当用户点击按钮时，他们实际上是在点击目标网站上的删除账户按钮！

示例 2：带有拖放功能的点击劫持

<html>
<head>
<title>图片编辑器</title>
<style>
#target_website {
position:absolute;
width:300px;
height:400px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>拖动图片进行编辑</h1>
<img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
</div>
<iframe id="target_website" src="https://example.com/share-private-data"></iframe>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>

在这个更高级的示例中：

我们创建了一个假的图片编辑器界面。
目标网站（可能共享私人数据）被嵌入在不可见的iframe中。
当用户尝试拖放图片时，他们可能无意中与目标网站进行了交互，可能会泄露私人信息。

现实世界的点击劫持事件

点击劫持不仅仅是理论上的威胁。它已经被用于现实世界的攻击：

在2008年，一个点击劫持蠕虫在Facebook上传播，使用户无意中点击某些页面的“喜欢”按钮。
在2012年，一位研究人员演示了一个针对Google Android应用市场的点击劫持攻击，可以诱使用户在不知情的情况下购买应用。
在2017年，在Microsoft Outlook Web App中发现了一个点击劫持漏洞，可能允许攻击者读取受害者的电子邮件。

这些事件表明，理解并防止点击劫持攻击是至关重要的。

预防措施

现在我们知道了危险，让我们来看看我们如何可以防止点击劫持：

方法	描述	示例
X-Frame-Options	防止页面在iframe中显示的HTTP头	`X-Frame-Options: DENY`
内容安全策略	允许更细粒度地控制哪些源可以嵌入你的内容	`Content-Security-Policy: frame-ancestors 'self'`
框架破坏脚本	打破iframe的JavaScript	`if (top != self) top.location = self.location;`
SameSite Cookies	防止cookies在跨站请求中发送	`Set-Cookie: session=123; SameSite=Strict`

让我们看看一个简单的框架破坏脚本的例子：

<html>
<head>
<style>html{display:none;}</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
</head>
<body>
<h1>受保护的内容</h1>
<p>这个页面受到点击劫持保护！</p>
</body>
</html>

这个脚本做了以下事情：

初始时隐藏整个页面。
检查页面是否是最顶层的窗口。
如果是，它显示内容。
如果不是（即，它在iframe中），它打破iframe。

记住，网络安全就像猫捉老鼠的游戏。随着新攻击方法的不断出现，我们必须不断更新我们的防御措施。保持好奇心，持续学习，并在你的网页开发旅程中始终将安全放在首位！

我希望这个教程能帮助您了解点击劫持攻击。记住，有了强大的编码能力，也就有了重大的责任。明智地使用你的技能，快乐编码！

Credits: Image by storyset

上一教程:

JavaScript - IndexedDB

下一教程:

JavaScript - 科里化