【准备篇】js逆向分析破解之学习准备

最近在公众号后台收到很多私信说,想学习js逆向分析,那么我就选了三个翻译网站案例,这些算是js破解里面的入门级的,不太难但是可以让你掌握方法,以后慢慢深入。

相信只要写过爬虫的,都对F12以及右键-检查不会陌生,没错这都是用于打开Chrome开发者工具的,利用Chrome进行调试以及查看关键信息对于我们进行爬虫是很有必要的。

爬虫请求网页URL时,最棘手的问题莫过于关键链接中有一些参数被加密(最常见的就是位运算),被混淆或则参数会动态地改变。这大部分都是javascript在浏览器中进行,找到这些js代码并破解并不是难事。

所以今天就来讲讲,Chrome开发者工具。

1.Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。

谷歌浏览器提供给了web开发者强大的debug功能,这对于后面进行js破解非常重要,非常值得大家去了解。

打开Chrome 开发者工具的方式:

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击,选择 “检查”
  • 使用 快捷键 F12 或 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

我们先来了解一下整个开发者工具的面板吧。

面板上包含了Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板这些功能面板。

这些按钮的功能点如下:

  • Elements(元素面板)
    • 检查和调整页面
    • 编辑样式
    • 编辑DOM
    • 查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
    • 使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面。
  • Console(控制台面板)
    • 使用控制台面板
    • 命令行交互
    • 记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。
    • 在开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell在页面上与JavaScript交互。详细可以看console控制台的使用指南。
  • Sources(源代码面板)
    • 断点调试
    • 调试混淆的代码
    • 使用开发者工具的Workspaces(工作区)进行持久化保存
    • 断点调试JS。
    • 在源代码面板中设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件来使用开发者工具的实时编辑器。
  • Network(网络面板)
    • 网络面板基础
    • 了解资源时间轴
    • 网络带宽限制
    • 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
    • 使用网络面板了解请求和下载的资源文件并优化网页加载性能。
  • Performance(性能面板)
    • 如何查看性能
    • 分析运行时性能
    • 诊断强制的同步布局
    • Note: 在 Chrome 57 之后时间线面板更名为性能面板。
    • 使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。
  • Memory(内存面板)
    • JavaScript CPU 分析器
    • 内存堆区分析器
    • Note: 在 Chrome 57 之后分析面板更名为内存面板。
    • 如果需要比时间轴面板提供的更多信息,可以使用“配置”面板,例如跟踪内存泄漏。
  • Application(应用面板)
    • 管理数据
    • 记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
    • Note: 在 Chrome 52 之后资源面板更名为应用面板。
    • 使用资源面板检查加载的所有资源,包括IndexedDB与Web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。
  • Security(安全面板)
    • 安全
    • 判断当前网页是否安全。
    • 使用安全面板调试混合内容问题,证书问题等等。
  • Audits(诊断面板)
    • 对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

2.常用面板细讲

Elements面板

实时编辑DOM节点和CSS样式

  • 双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里面
  • 点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式,如下图
  • 点击右侧Computed面板,可以编辑左侧选中的盒子模型参数,所有的值都是可以修改的;点击不同的位置(topbottomleftright) 就可以修改元素的paddingbordermargin属性值
  • 查看网页的本地修改历史
    • 点击Styles面板中修改过属性的文件名,会跳转到Source面板
    • 在文件位置右击选择Local modifications,可以查看本地的所有修改记录
    • 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

Console面板

控制台输出日志

通过JS代码或者命令行console.log()console.warn()console.error()可以将日志信息输出到控制台

  • console.log 显示一般的基本日志信息,当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
  • console.warn 显示带有黄色小图标的警告信息
  • console.error 显示带有红色小图标红色的错误信息
  • console.assert 当第一个参数为false时,才会显示第一个参数的值
  • 可以根据JS条件判断输出不同的日志信息
    • 注:当需要换到下一行而不是回车的时候,请按Shift+Enter

控制台交互

  • JS表达式计算

在上一小节,我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值,当你在控制台输入命令时,会弹出相应的智能提示框,你可以用Tab自动完成当前的建议项

  • 选择元素

快捷方式

描述

$()

返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector()

$$()

返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll()

$x()

返回与指定的XPath相匹配的所有元素的数组

注: 我在实际操作过程中发现$()并没有按预期返回相匹配的第一个元素,而是返回了所有匹配的元素数组。

Sources面板

你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件

调试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面板

概述

Network面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。

Network面板主要包括5大块窗格(Pane):

  1. Controls 控制Network的外观和功能。
  2. Filters 控制Requests Table具体显示哪些内容。
  3. Overview 显示获取到资源的时间轴信息。
  4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
  5. Summary 显示总的请求数、数据传输量、加载时间信息。

其中 Requests Table 显示如下信息列:

  • Name 资源名称,点击名称可以查看资源的详情情况,包括HeadersPreviewResponseCookiesTiming
  • Status HTTP状态码。
  • Type 请求的资源MIME类型。
  • Initiator 标记请求是由哪个对象或进程发起的(请求源)。
    • Parser:请求由Chrome的HTML解析器时候发起的。
    • Redirect:请求是由HTTP页面重定向发起的。
    • Script:请求是由Script脚本发起的。
    • Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
  • Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
  • Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。

[推荐一个链接Chrome DevTools — Network]

捕获屏幕

Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。

双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。

单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

查看DOMContentLoaded和load事件信息

DOMContentLoadedload这两个事件会高亮显示。

DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发,不会等待CSS、图片、子框架加载完成。load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

DOMContentLoaded事件在Overview上用一条蓝色竖线标记,并且在Summary蓝色文字显示确切的时间。

load事件同样会在OverviewRequests Table上用一条红色竖线标记,在Summary也会以红色文字显示确切的时间。

查看具体资源的详情

通过点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:

  • Headers 该资源的HTTP头信息。
  • Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
  • Response 显示HTTP的Response信息。
  • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
  • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

针对上面4个Tab进行详细讲解一下各个功能:

查看资源HTTP头信息

Headers标签里面可以看到HTTP Request URLHTTP MethodStatus CodeRemote Address等基本信息和详细的Response HeadersRequest 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标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:

  • Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)服务器不可用超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6).
  • Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间,如果有已经建立好的连接,这个时间还包括等待已建立连接被复用的时间。
  • Proxy Negotiation 与代理服务器连接的时间花费。
  • DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0。
  • Initial Connection / Connecting 建立连接的时间花费,包含了TCP握手及重试时间。
  • SSL 完成SSL握手的时间花费。
  • Request sent 发起请求的时间。
  • Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。
  • Content Download 获取Response响应数据的时间花费。

TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了,可以参见网络性能优化方案及里面的相关参考文档。

查看资源的发起者(请求源)和依赖项

通过按住Shift并且把光标移到资源名称上,可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。

在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源),有可能会有第二个标记为绿色的资源是该资源的发起者的发起者,以此类推。

在该资源的下方标记为红色的资源是该资源的依赖资源。

参考资料

  • Measure Resource Loading Times
  • Understanding Resource Timing
  • https://www.cnblogs.com/charliechu/p/5981346.html
  • https://www.cnblogs.com/charliechu/p/5948448.html

3.Python 运行js模块PyV8、PyExecJS、js2py

pip 安装好即可,推荐使用pyexecjs。

原文发布于微信公众号 - 离不开的网(Gy_dxj)

原文发表时间:2019-07-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券