最近在公众号后台收到很多私信说,想学习js逆向分析,那么我就选了三个翻译网站案例,这些算是js破解里面的入门级的,不太难但是可以让你掌握方法,以后慢慢深入。
相信只要写过爬虫的,都对F12以及右键-检查不会陌生,没错这都是用于打开Chrome开发者工具的,利用Chrome进行调试以及查看关键信息对于我们进行爬虫是很有必要的。
爬虫请求网页URL时,最棘手的问题莫过于关键链接中有一些参数被加密(最常见的就是位运算),被混淆或则参数会动态地改变。这大部分都是javascript在浏览器中进行,找到这些js代码并破解并不是难事。
所以今天就来讲讲,Chrome开发者工具。
Chrome 谷歌浏览器开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。
谷歌浏览器提供给了web开发者强大的debug功能,这对于后面进行js破解非常重要,非常值得大家去了解。
打开Chrome 开发者工具的方式:
我们先来了解一下整个开发者工具的面板吧。
面板上包含了Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板这些功能面板。
这些按钮的功能点如下:
实时编辑DOM节点和CSS样式
控制台输出日志
通过JS代码或者命令行console.log()
、console.warn()
和console.error()
可以将日志信息输出到控制台
console.log
显示一般的基本日志信息,当要显示的基本日志太多时可以使用console.group
将相关的日志进行分组console.warn
显示带有黄色小图标的警告信息console.error
显示带有红色小图标的红色的错误信息console.assert
当第一个参数为false时,才会显示第一个参数的值Shift
+Enter
。控制台交互
在上一小节,我们已经看到可以在控制台输入JS表达式点击Enter
即可得到表达式的值,当你在控制台输入命令时,会弹出相应的智能提示框,你可以用Tab
自动完成当前的建议项
快捷方式 | 描述 |
---|---|
$() | 返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector() |
$$() | 返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll() |
$x() | 返回与指定的XPath相匹配的所有元素的数组 |
注: 我在实际操作过程中发现$()
并没有按预期返回相匹配的第一个元素,而是返回了所有匹配的元素数组。
你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件
调试JS代码
{}
来增强可读性,所有的断点都会列出右侧的断点区断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发
① DOM元素节点发生改变时
在Elements面板中指定的DOM节点上右击,在弹出的菜单中选择Break on...
,可以看到三个选择项,比如我们选择Subtree modifications
,那么当选择的节点里面的子节点被添加、删除、修改,则断点就会被触发。设置方式如下图:
下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点,通过单步调试可以看到会弹出一个div
对话框供用户添加数据
② XHR生命周期状态改变时
当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时,则断点就会有触发
③ 指定的事件执行时
在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件,勾选你要监听的事件,在指定的事件执行时,断点就会有触发
这里推荐一篇文章【谷歌浏览器开发调试工具中Sources面板 js调试等 完全介绍】
概述
Network
面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。
Network面板主要包括5大块窗格(Pane):
其中 Requests Table 显示如下信息列:
Headers
、Preview
、Response
、Cookies
、Timing
。[推荐一个链接Chrome DevTools — Network]
捕获屏幕
Controls
窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。
以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。
双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。
单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。
查看DOMContentLoaded和load事件信息
DOMContentLoaded
和load
这两个事件会高亮显示。
DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发,不会等待CSS、图片、子框架加载完成。load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。
DOMContentLoaded
事件在Overview上用一条蓝色竖线标记,并且在Summary以蓝色文字显示确切的时间。
load
事件同样会在Overview和Requests Table上用一条红色竖线标记,在Summary也会以红色文字显示确切的时间。
查看具体资源的详情
通过点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:
针对上面4个Tab进行详细讲解一下各个功能:
① 查看资源HTTP头信息
在Headers标签里面可以看到HTTP Request URL
、HTTP Method
、Status Code
、Remote Address
等基本信息和详细的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。
② 查看资源预览信息
在Preview标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。
③ 查看资源HTTP的Response信息
在Response标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。
④ 查看资源Cookies信息
如果选择的资源在Request和Response过程中存在Cookies信息,则Cookies标签会自动显示出来,在里面可以查看所有的Cookies信息。
⑤ 分析资源在请求的生命周期内各部分时间花费信息
在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:
TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了,可以参见网络性能优化方案及里面的相关参考文档。
查看资源的发起者(请求源)和依赖项
通过按住Shift
并且把光标移到资源名称上,可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。
在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源),有可能会有第二个标记为绿色的资源是该资源的发起者的发起者,以此类推。
在该资源的下方标记为红色的资源是该资源的依赖资源。
参考资料
3.Python 运行js模块PyV8、PyExecJS、js2py
pip 安装好即可,推荐使用pyexecjs。