首页IT科技webpack和rollup区别(Web Spider Fiddler – JS Hook 基本使用)

webpack和rollup区别(Web Spider Fiddler – JS Hook 基本使用)

时间2025-06-20 16:22:23分类IT科技浏览4558
导读:前言 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版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
个人网站如何提高流量(如何提升网站速度)