webpack和rollup区别(Web Spider Fiddler – JS Hook 基本使用)
前言
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,吃着火锅唱着歌 ,突然就被麻匪劫了!创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!