首页 前端知识 Web Spider Fiddler - JS Hook 基本使用

Web Spider Fiddler - JS Hook 基本使用

2024-02-15 14:02:38 前端知识 前端哥 305 963 我要收藏

在这里插入图片描述

文章目录

  • 前言
  • 一、资源下载
  • 二、什么是Hook
  • 三、Hook 的几种方式
  • 四、Fiddler - 编程猫插件安装
  • 五、Fiddler - Hook 案例
  • 六、常用的js hook代码
    • Hook Cookie
    • Hook Header
  • 总结


前言

Hook技术也叫钩子函数,功能是把网站的代码拉出来,改成我们自己想执行的代码片段,简单来说就是可以控制执行函数的入参和出参;


一、资源下载

编程猫插件:https://pan.baidu.com/s/1SP8xHoDpugssFRpu-nLxPw?pwd=zhou

二、什么是Hook

什么是hook

  • js执行流程,初始化(自执行)、页面逻辑、等待用户输入、加密数据、提交数据;
  • 在以上任意一个环节,插入自己的代码,让浏览器先执行插入代码然后再执行网站原有代码;
  • 上下文 = 一个项目环境,JS上下文(JS v8虚拟机),作用域(变量所生效的位置)是处在上下文当中的;
  • 从浏览器来看,(新页面、新线程)就是一个新的上下文,eval打开虚拟机运行JS代码是原来的上下文
  • hook的目的,改变原来的代码或者原来代码的执行流程;
  • hook时机,只会影响hook完成之后的代码操作;
  • 浏览器初始化hook,需要借助(油猴[通过浏览器插件形式监听浏览器接收数据的方法],FD插件[通过代理形式]),修改原数据;

三、Hook 的几种方式

hook的几种方式

  • 覆盖原来的方法,在相同的作用域,写一个新方法赋值给原方法的变量对象;
  • ES6的语法,Object.defineProperty(obj, prop, descriptor),比覆盖原来的方法更加强大;使用详解;
  • Object.defineProperty的作用:给对象重新定义属性,监听属性的设置值(set方法)和获取值(get方法);
  • JS Proxy,给对象整体监听(属性初始化、设置值、获取值、构造函数、比较广),使用详解;
  • 下面具体介绍一下Object.defineProperty()

Object.defineProperty的参数

  • obj:需要定义属性的当前对象;
  • prop:当前需要定义的属性名;
  • descriptor:属性描述符,可以取以下值;

set方法 & get方法 介绍

  • set(),赋值的方法;
  • get(),取值的方法;

四、Fiddler - 编程猫插件安装

1、将下载好的压缩包解压;
在这里插入图片描述
2、将插件所有文件复制到 (默认)C:\Program Files (x86)\Fiddler2\Scripts,fiddler的安装目录;
在这里插入图片描述
3、首次使用必须右键以管理员身份启动 fiddler,fiddler 版本必须 >= v4.6.3,下面是插件安装成功的截图;
在这里插入图片描述

五、Fiddler - Hook 案例

1、这里以某站的cookie为例
在这里插入图片描述
2、下面分析一下hook代码

(function () {
  'use strict';
  var cookieTemp = '';
  Object.defineProperty(document, 'cookie', {
    set: function (val) {
      if (val.indexOf('buvid3') != -1) {
        debugger;
      }
      console.log('Hook捕获到cookie设置->', val);
      cookieTemp = val;
      return val;
    },
    get: function () {
      return cookieTemp;
    },
  });
})();

重点:if (val.indexOf('buvid3') != -1) {debugger;},检索 buvid3 在字符串中首次出现的位置,-1表示没有出现,反之为出现,出现则进入条件进行debugger;

3、打开fiddler 将hook代码粘贴至编程猫插件中,勾选开启,增添了新的代码会自动保存;在这里插入图片描述
4、清除浏览器的cookie,刷新某站的页面,即可断住;
在这里插入图片描述
5、注意:可以在右侧的调用栈里(Call Stack)看到一些函数的调用过程,依次向上跟进就能够找到最开始buvid3生成的地方
在这里插入图片描述

六、常用的js hook代码

Hook Cookie

Cookie Hook 用于定位Cookie中关键参数生成的大概位置,下列代码演示了当Cookie中匹配到了关键字buvid3则进行debugger;

(function () {
  'use strict';
  var cookieTemp = '';
  Object.defineProperty(document, 'cookie', {
    set: function (val) {
      if (val.indexOf('buvid3') != -1) {
        debugger;
      }
      console.log('Hook捕获到cookie设置->', val);
      cookieTemp = val;
      return val;
    },
    get: function () {
      return cookieTemp;
    },
  });
})();

Hook Header

Cookie Header 用于定位Header中关键参数生成的大概位置,下列代码演示了当Header中匹配到了关键字token则进行debugger;

(function () {
    var org = window.XMLHttpRequest.prototype.setRequestHeader;
    window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
        if (key == 'token') {
            debugger;
        }
        return org.apply(this, arguments);
    };
})();

总结

以上就是今天要讲的内容,本文仅仅简单介绍了JS Hook 的基本使用,后续有更多好用的JS Hook 代 码会在此篇博文更新;
最后我推荐一篇较好的相关博文:JS 逆向之 Hook,吃着火锅唱着歌,突然就被麻匪劫了!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2035.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!