JS逆向学习笔记（一）-浏览器开发工具常用技巧

一.写在前面

        最近在自学一些python爬虫的内容，学到现在对爬虫的原理和大致流程都有了一定的了解，也能够独立编写一些简单的爬虫程序，但是事实上这些都没有涉及到破解加密的部分，也就是说你爬的不过是别人完全不阻挡你爬的东西，顶多也就限制一下你的爬取速度啊数量之类的，碰到某些有加密参数的，就基本上没有办法了，你有再多加快爬虫速度的办法，但是拿不到资源又有什么用呢？所以我必须要学一些新的东西，于是我了解到了一个新的的东西JS逆向，所谓JS逆向，意思就是分析JS代码的执行过程以此来达到破解加密参数的过程，因为JS代码是透明的，放在客户端上运行的，所以那些加密的参数也应当在客户端上就完成了，所以想要爬虫获取这些资源，JS逆向就变得尤为重要了。

二.浏览器开发者工具常用技巧

        浏览器开发者工具是自带的一个非常强大的工具，它不仅能够拦截网络请求，帮助我们找到对应的url，对于JS逆向分析，也是一个重要的工具，下面就谈谈它的常用功能和技巧。

1.断点调试

        像这样，我们在JS代码的左侧打上一个断点，这样网页再次运行的时候就会卡在我们加的断点的地方。右边有个作用域面板可以看到各个变量或方法的情况，你也可以把鼠标悬停在代码的某个具体变量或方法上，也会显示。断点面板里面就是你刚才添加的断点，可以在那里取消断点，也可以再点一次这个红点取消。

        右边还有个比较重要的面板叫调用堆栈，如下图：

它能够显示是怎么一步一步调用到当前的方法的，箭头所指就是当前方法位置，点击其他任意一个能够跳到对应方法处。有时候我们能够靠这个一步一步向上顺藤摸瓜，找到关键的加密的方法。

右边还有几个重要的调试按钮：

第一个是恢复脚本的执行，也可以跳到下一个断点处。第二个的意思是运行下一条指令，但是不会进入函数，也就是说，如果下一条指令会进入函数的话，它就会直接将这个函数执行完，然后来到下一条不是函数的指令。第三个叫执行下一条指令，但是它是会进入到函数，一步一步运行的。第四个是跳出当前函数，比如你调试到了一个函数内部，但是这个函数不是关键，那么你就可以按这个，它就会跳出去。右边还有一个我没有圈出来的按钮，它的功能和第三个按钮基本一致，只有在异步的时候有一点区别，它也是一步一步执行的。

        除了刚才上面提到的最基本的断点，其实还有两种非常重要的断点-日志断点和条件断点。

先说说日志断点吧。我们以抖音为例。

我们在这里添加一个日志断点，有的地方叫法不一样，我的edge里面叫添加记录点。

然后可以输入一些变量啊，方法之类的东西，日志断点能够帮助我们输出这些东西，这样我们就可以从中找到我们想要的那一次请求或者调用，因为很多时候，虽然是同一个方法，但是执行的东西却不一样，比如这个方法这次做了一个求和，下一次它可能是在求积，而我们需要它求积那一次，所以就要使用日志断点来看看到底有没有我们需要的东西。

        然后我们可以刷新页面，来到控制台页面，这样就能够看到日志断点输出的东西：

我们可以在筛选器里面输入内容，看看有没有我们想要的东西，这样就能够判断，这个方法是不是关键的那个方法。如果是的话，我们还可以利用条件断点让其在运行关键的那一次停住。

        所谓条件断点，顾名思义，需要满足一定的条件它才会断住，进入调试状态。我们把刚才那个日志断点取消，加上一个条件断点：

这样只有满足那一坨方法返回值的长度是28才会断住。这里有很多十六进制数，都是抖音做了代码混淆的。再次刷新页面，如果该方法执行了我们想找的那一步就会卡住。如下图，我们可以在控制台输入这个方法或者变量，看看此时它的值到底是什么。

我们可以看到，此时这个方法的返回值就是我们需要的。其实这个参数就是抖音的加密参数。这样我们就能进一步跟栈，找到加密方法的地方。

2.Ajax断点

        Ajax断点可以在发送Ajax请求的时候触发。我们把浏览器开发工具调到网络面板下就能看到这些Ajax请求

点击其中一个请求，然后可以复制其中url的一部分，

在XHR提取断点那里添加断点，这样当有包含这部分的url发送时，就会被断住。有时候可以这样再结合堆栈顺藤摸瓜找到它加密的地方。

3.改写JS文件

        如果我们想要改变一下JS文件怎么办呢？比如我们想要在浏览器运行的JS代码里面加入我们自己的代码，这就需要我们去改写JS文件了。

例如这里我们想要在这个发送Ajax请求前输出一点东西。

首先我们点击左边的这个覆盖：

然后点击加号选择一个文件夹：

浏览器会弹出一个提示，我们选择允许：

然后我们再返回要替代的那个JS文件，选择替代内容：

这时可以改写的那个JS文件就有了一个特殊标识，我们在send前面加上自己的一行代码：

然后再ctrl+s保存，取消所有断点，刷新页面，当运行到这里的代码的时候，我们转到控制台页面就可以看到我们输出的内容了：

另外需要注意的一点是，不知道怎么回事格式化（美化）后的JS代码没有显示行号，这就导致了我们改写文件的时候找不到之前的断点在哪里了，此时的一个办法可以是我们先不加自己的代码，只是先保存，再刷新页面，由于我们替代了文件，这样断点就会打在我们替换的文件上，这时候再输入我们自己的代码就可以了。