网页数据如何获取，带你走近JS逆向，完全入门级！

　　在这个大数据时代，我们眼睛所看到的百分之九十的数据都是通过页面呈现出现的，不论是PC端、网页端还是移动端，数据渲染还是基于htmlh5javascript进行的，而大多数的数据都是通过请求后台接口动态渲染的。而想成功的请求成功互联网上的开放公开接口，必须知道它的URL、Headers、Params、Body等数据是如何生成的。但是在此之前我们需要了解浏览器开发者工具的功能，入门JS逆向。1、浏览器面板认识
　　浏览器F12开发者工具面板Elements（元素）HTML源代码页面，可以进行动态查询、修改、删除，影响页面显示Network（网络）
　　最常使用的功能，俗称抓包界面。可以捕获当前页面的所有资源请求，包括URL、协议、端口、请求和响应等保留日志：勾选每次刷新不会清除之前的请求停用缓存：勾选后不会从缓存里面拉数据，方便后续JS动态调试Sources（源代码）
　　存放网页源代码的地方，这里可以看到访问站点所有依赖的域名资源，包括html、css、js等page：所有资源文件filesystem：关联本地文件overrides：可以做文件替换，比如替换JS代码段：可以编写脚本，影响页面，代码记录断点介绍
　　断点
　　1。跳过子函数（次态函数）执行（只在主函数内一步一步执行，不进入子函数内部）；
　　2。进入子函数（次态函数）执行（在主函数内部一步一步执行，如果遇到子函数，会跳转到子函数内部一步一步执行）；
　　3。跳出当前函数，回到调用位置；
　　4。单步执行，会进入到函数内部更加的细致；
　　最后一个图标：屏蔽断点Application（应用）
　　相当于一个浏览器本地数据库，可查看本地会话存储、Cookies等信息2、JS逆向的目标
　　如果想要逆向网页的某个API，需要以下关键信息：
　　请求信息头部签名请求体签名cookie反爬响应数据反爬查询参数签名3、断点介绍
　　断点的主要作用是对数据进行监听，就跟平时开发代码Debug调试一样，跟值进行分析
　　网站运行时间轴：
　　数据流程DOM事件断点执行的比较靠前距离加密函数比较远XHR断点执行比较靠后距离加密函数相对较近，可以根据栈快速定位
　　注意：非XHR发送的就断不住4、方法栈
　　栈是一种先进后出的特殊线性表结构
　　调用栈是解析器的一种机制，可以在脚本调用多个函数时，跟踪每个函数在完成执行时应该返回控制的点当脚本要调用一个函数时，解析器把该函数添加到栈中并且执行这个函数。任何被这个函数调用的函数会进一步添加到调用栈中，并且运行到它们被上个程序调用的位置。当函数运行结束后，解释器将它从堆栈中取出，并在主代码列表中继续执行代码。
　　栈5、debug原理
　　无限debbugger不会真正得死循环，而是有规律得执行逻辑，一般用定时器Function（）。call（）样例！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8titleTitletitleheadh1idIMSh1bodybodyhtml浏览器过debugger
　　当定义器运行到这个debugger这个代码的时候，可以点击一律不再此处暂停
　　Debugger断点处理编辑断点（条件断点）写个10的先验条件，永远为假，就永远不会进入这个断点了。方法置空
　　无限debugger产生的原因是代码里test这个函数造成的，所以我们可以重写这个函数，使无限debugger失效。在控制台中输入functiontest（）｛｝即可
　　注：一定要在debugger进入之前setIntervalfunctiontest（）｛｝通用过OB混淆debuggerFunction。prototype。constructorbackFunction。prototype。Function。prototype。constructorfunction（）｛if（argumentstypeofarguments〔0〕string）｛if（debuggerarguments〔0〕）｛return｝｝returnFunction。prototype。constructorback。apply（this，arguments）；｝6、hook技术
　　Hook是一种钩子技术，在系统没有调用函数之前，钩子程序就先得到控制权，这时钩子函数既可以加工处理（改变）该函数的执行行为，也可以强制结束消息的传递。简单来说，修改原有的JS代码就是Hook。
　　Hook技术之所以能够实现有两个条件：客户端拥有JS的最高解释权，可以决定在任何时候注入JS，而服务器无法阻止或干预。服务端只能通过检测和混淆的手段，另Hook难度加大，但是无法直接阻止。除了上面的必要条件之外，还有一个条件。就是JS是一种弱类型语言，同一个变量可以多次定义、根据需要进行不同的赋值，而这种情况如果在其他强类型语言中则可能会报错，导致代码无法执行。js的这种特性，为我们Hook代码提供了便利。
　　注意：JS变量是有作用域的，只有当被hook函数和debugger断点在同一个作用域的时候，才能hook成功。Hook步骤：寻找hook的点编写hook逻辑调试
　　注：最常用的是hookcookieHOOKcookie操作
　　WebAPI地址：https：developer。mozilla。orgzhCNdocsWebAPI
　　Object。defineProperty为对象的属性赋值，替换对象属性
　　基本语法：Object。defineProperty（obj，prop，descriptor），它的作用就是直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，接收的三个参数含义如下：obj：需要定义属性的当前对象；prop：当前需要定义的属性名；Object。defineProperty（user，uuid，｛get：function（）｛console。log（xxx来获取值了！！）；｝，set：function（newVal）｛console。log（xxx来设置值了！！）；countnewVal1；｝｝）
　　cookie示例
　　cookie钩子用于定位cookie中关键参数生成位置，以下代码演示了当cookie中匹配到了v，则插入断点：（function（）｛varcookieTObject。defineProperty（document，cookie，｛set：function（val）｛if（val。indexOf（v）！1）｛｝console。log（Hook捕获到cookie设置，val）；cookieT｝，get：function（）｛returncookieT｝，｝）；｝）（）；
　　注：正常hookcookie操作的时候需要清除下cookiehook方法
　　我们知道在JavaScript中JSON。stringify（）方法用于将JavaScript对象或值转换为JSON字符串，JSON。parse（）方法用于将一个JSON字符串转换为JavaScript对象，某些站点在向web服务器传输用户名密码时，会用到这两个方法（function（）｛varstringifyJSON。JSON。stringifyfunction（params）｛console。log（HookJSON。stringify，params）；returnstringify（params）；｝｝）（）；
　　首先定义了一个变量stringify保留原始JSON。stringify方法，然后重写JSON。stringify方法，遇到JSON。stringify方法就会执行debugger语句，会立即断下，最后将接收到的参数返回给原始的JSON。stringify方法进行处理，确保数据正常传输hookXHR请求（function（）｛varopenwindow。XMLHttpRequest。prototype。window。XMLHttpRequest。prototype。openfunction（method，url，async）｛if（url。indexOf（analysis）！1）｛｝returnopen。apply（this，arguments）；｝；｝）（）；
　　定义了一个变量open保留原始XMLHttpRequest。open方法，然后重写XMLHttpRequest。open方法，判断如果rnd字符串值在URL里首次出现的位置不为1，即URL里包含analysis字符串，则执行debugger语句，会立即断下。7、python执行JS的方式PyExecJS
　　模块地址：https：github。comdoloopwhilePyExecJS
　　PyExecJS是使用最多的一种方式，底层实现方式是：在本地JS环境下运行JS代码pipinstallPyExecJS
　　读取JS代码withopen（filename，r，encodingUTF8）asfile：resultfile。read（）
　　execjs类的compile（）方法编译加载上面的JS字符串，返回一个上下文对象context1execjs。compile（JS代码）
　　调用上下文对象的call（）方法执行JS方法result1context1。call（函数，参数1，参数2）
　　注意：由于PyExecJS运行在本地JS环境下，使用之前会启动JS环境，最终导致运行速度会偏慢
　　eval执行
　　eval（）函数计算JavaScript字符串，并把它作为脚本代码来执行print（execjs。eval（Date。now（）））8、浏览器环境补充方法document｛cookie：uuidttdd10293602719201658044222535945484；gadsID5b925b796ab2946622740a5938d50041：T1658044224：RT1658044224：SALNIMYZZ3qnATdjgh4YHRlZaBk3TnwTFw；puidU010000，location：｛href：https：www。baidu。coms？ieutf8f8rsvbp1rsvidx1tn87135040oemdgwdeval20JS20fenlei256oqevalrsvpqe1b3f2520003297ersvt7e582ByqRgVEysyNAVRctyGmKUct9An2B6da7wzdVJDXgo7qaAS1DKyn86mLazGA1IqBPpY359rqlangcnrsvdltbrsventer1rsvbtypetinputT860rsvsug356rsvsug135rsvsug7100rsvsug20rsvsug41037｝｝navigator｛userAgent：Mozilla5。0（WindowsNT10。0；Win64；x64）AppleWebKit537。36（KHTML，likeGecko）Chrome104。0。0。0Safari537。36｝window｛document：document，navigator：navigator｝console。log（document。location。href）；document。getElementsByTagNamefunction（）｛｝；
　　结语
　　用阳光乐观的心态去面对生活和工作，它们一样也会回报给你阳光。