JS安全防护算法与逆向分析——Chrome开发者工具

《反爬虫AST原理与还原混淆实战》书稿内容

Chrome开发者工具

声明：本教程从安全角度出发讲解，只为增加读者的安全知识，提升读者数据安全意识，以及对于病毒和钓鱼网站的防护能力。绝无其他任何目的与用途。

一、打开开发者工具

有时候网站为了反调试，会禁止你打开开发者工具，或者有的小说网站还会禁止你复制，这些都是通过JS做到了，因为JS就是用来和人交互的嘛。不过开发者工具可是我们逆向的基础，不打开可不行，打开开发者工具有以下几种方式，读者可以自行选择。

1.F12打开开发者工具（有时候会被禁用）

2.某个元素上点击右键检查（有时候会被禁用）

3.快捷键（有时候会被禁用）

4.浏览器->更多工具->开发者工具

5.空白页面打开开发者工具之后再切换回去（万能）

二、面板介绍

1.元素面板

元素面板就是elements面板，里边会显示HTML，不过这是被CSS和JS综合的结果，并不是一开始的网页源代码。我们选中某个元素，按下H可以隐藏元素，当然复制粘贴撤销快捷键也都可以用，增删改查元素也都可以。如果是要做爬虫的话，解析页面定位元素往往需要xpath后者CSS选择器，我们可以直接在元素上右键点击Copy，选择我们需要的Xpath或者Selector的语法来定位元素。当然也可以按下CTRL+F来自己编写定位语法，这里不再赘述。右键点击元素Break on可以下元素断点，不过不常用。里边有三种监听方式，分别是子树改变时、属性变化时和元素被移除时。

右边的栏目里，Styles是元素的渲染CSS等，我们不需要这些。我们需要了解的只是Event Listeners，这里边可以查看元素绑定的事件。

附注：全屏长截图Run command---capture full size screenshot。

2.控制台面板

在控制台面板Console中，我们可以和页面元素进行交互，相当于一个调试器。里边可以直接使用JS语法，我们在选择元素的时候，输入$0表示选中的当前元素；$1是上一次选择的节点，一直到$4；$$选择所有的相关元素$$("css/xpath")，返回一个数组；$_是对控制台上次执行结果的引用输出。我们在需要某个数值的时候，可以直接输入它的变量名就能得到它的结果，前提是在它的作用域内。

3.源代码面板

这里是存放网页源代码文件的地方，左边snippets允许你存放自己的JS代码到DevTools里边，方便复用，比如说一些加密代码库。sources面板snippets中new snippte添加代码后，必须右键run运行才可以使用。按下快捷键CTRL+P可以打开menu，在command menu中使用！+代码块名，方便查找预设代码块。

4.网络面板 

filter可以过滤请求包。我们右键点击状态栏可以自定义请求表。再就是重发XHR，不过必须是XHR请求才行。

5.应用面板

有Storage可以查看一些关键信息，Cookies可以编辑。主要就是查看发送了哪些东西。

6.settings面板

勾选Log XMLHttpRequests，开启AJAX Hook。可以展开对堆栈信息详细查看，直接点击JS跳转。

三、Chrome快速定位

1.一般情况下下断点，首先抓包，之后搜索关键词定位JS代码。比如搜索username的时候，我们可以加上一些标识符以减少搜索数量。

username

username=

username = 

username:

2.使用XHR断点，找到XHR的URL，添加断点，配合堆栈回溯。或者使用callstack函数堆栈和initiator堆栈定位JS。

3.事件断点，比如可以click断点，大多数会zheyang断在源代码里，之后下一步进入，慢慢调试。

4.console调试。monitor监听方法、monitorEvents监听事件、watch监听变量。选中元素，在console中输入monitorEvents（$0），监听这个元素事件。如果事件太多的话，monitorEvents（$0，“click”）只监听一个事件。monitor($0.onclick)可以用来监听函数onclick方法或者monitor(Array.prototype.push)监控数组push方法，unmonitor取消监控。右边的面板有个watch，会监听变量的变化，我们可以按下+自定义添加变量，观察变量的变化。

5.contional breakon条件断点，会返回布尔值来判断是否停止。

6.console插桩，.contional breakon条件断点并不一定必须要输入表达式，我们输入console.log来打印关键信息也可以。比如console.log("用户名",username)。