「JS逆向」工具篇——Chrome DevTools

[TOC]

说明

• 从JS逆向的角度去介绍DevTools常用的功能
• 不会事无巨细的介绍所有功能、和举例子
• 按照功能面板去讲解
• 推荐阅读时间：10分钟
• 看完后能花5分钟对功能按照使用场景归纳，学习效率更高
• 并非专业人士，请多指教

常见的逆向需求

1. 破解接口，还原请求
   • 先定位到具体的接口
   • 再找到发送请求的地方
   • 查看参数加密方式
   • 还原参数，模拟请求
2. 点击某元素后都做了什么
   • 找到绑定事件的函数
   • 查看其逻辑

Chrome DevTools

使用说明

1. command+shift+p 然后输入面板，可以快速显示
2. 很多面板都是相互配合使用的，但基本思路就是：断点功能+调用栈+查看源码
3. 查找逻辑实现部分，一般分为两种：
   1. 从页面元素入手，根据事件找到逻辑
   2. 从请求入手，找到发送请求的逻辑，然后看调用栈

Elements

实时显示页面的HTML与CSS

简单的静态分析：Event Listeners

080D2BBD-B693-449C-8A75-AA331C20EFAB.png

• 适用：简单web框架、原生JS的事件绑定
• 目的：点击某元素后查看其执行的逻辑
• 使用：选中某元素后，点击Event Listeners，能查看其绑定的所有Event，常用的click、scroll等
• 说明：如果元素click嵌套多层，可以点击Remove移除监听，减少干扰项。最后点击右侧VM xxx:xxx这种字 定位到相应代码块

Dom动态分析：DOM Breakpoints

image.png

• 适用：所有场景

• 目的：监听元素的移出、元素属性的改变、子元素的改变

• 使用：选中某元素后

  1. 右键或者点击元素最左侧三个···
  2. 选中Break on
  3. 选择相应的断点

• 说明：

  1. Subtree modifications，子节点改变触发
  2. Attributes modifications，属性改变触发
  3. Node Removal，元素移除触发

Console

控制台、运行时环境，可以打印当前运行时的变量。

常用小技巧

保留历史记录

功能：防止页面刷新、跳转导致的缺失log
使用：勾选Preserve log

image.png

4、$_

功能：可以快速获取Dom、上次结果的引用
[图片上传失败...(image-ab78a0-1598115481920)]

$0是当前选中的Elements 里 html 节点的引用。
$1是上次Elements选择的Dom
$4是上上上上次Elements选择的Dom
$_是对上次执行结果的引用

store as global variable

功能：将目标数据快速存储到变量中，不用手动赋值

image.png

使用：在数据上方右键，选择store as global variable，会将结果赋值到 tmpx中，x从1开始累加：temp1、temp2、temp3……

copy

功能：快速将变量的值，完整的复制到剪切板，转为Json格式的数据
说明：个别网站会重写copy函数，导致此功能无法使用。

image.png

console.trace()

功能：打印当前调用堆栈，可以配合断点使用
说明：功能比较鸡肋，后面会有替代方法

image.png

变量监控 Create live expression

功能：监控目标变量
使用：点击眼睛按钮，输入变量名称，点击空白处

image.png
image.png
image.png

结合Console Importer插件

插件地址
功能：快速导入想要的模块，如Jquery
使用：输入$i("模块名称/模块@版本/模块地址")导入相应模块

image.png

Network

显示当前页面Http、WebSocket请求记录

常用功能

搜索

使用：command+f 或 点击放大镜，搜索接口关键词（Header、Body的内容都能搜到）。可以配合正则使用

注意：这个搜索只能搜索网络部分的数据，也就是说通过网络请求得到的原始值(有些数据是加密传输，Dom渲染的是加密后的 值)都可以搜到。

筛选

使用：常用筛选，如图

说明：

1. 左侧Filter里可以过滤domain、method、url、cookie

2. 多选过滤条件：按住command，再点击其他的选项。

   
   image.png

模拟弱网

使用：点击Disable cache右侧的下拉列表即可

image.png

Request Blocking

功能：拦截目标请求，如果是一次性接口，则拿到参数模拟执行。

使用：

1. 选择目标请求，右键，选择Block Request URL
2. 在Request Blocking面板 勾选目标接口的复选框
3. 重新触发目标请求，会发现请求失败(已经成功拦截)

说明：也可以在Request Blocking里直接添加请求，效果一样

image.png image.png

快速查看调用栈

功能：已知目标请求，找发送请求的代码

使用：点击Initiator，显示调用栈，如图

image.png

Source

Page

当前页面用到的所有资源，包括Dom、CSS、Js、多媒体文件等，默认根据domain进行分类。

注意：这里是渲染前的数据，也就是服务器直接返回的数据。

image.png

Overrides

功能：替换指定文件，Js、Dom、图片等文件都可以

一般用于修改网站Js文件，比如删除debug检测、分析参数算法等

使用：

1. Enable local Overrides
2. 在page页面选择要替换的文件，右键，选择Save for Overrides
3. 在Overrides找到要修改的文件，修改
4. 刷新页面 或 重新触发目标

image.png

Snippets

功能：很方便的执行代码片段，可以配合$i("模块")使用，可以保存一些常用的代码片段。

image.png

Watch

功能：监控运行时参数的值，一般用于debug时候使用

使用：点击+ 添加监控的变量即可

image.png

Call Stack

功能：显示当前行的调用栈，只在debug的时候有效，通常用于定位Js执行逻辑

image.png

Scope

功能：显示运行时所有的变量，可以修改，只在debug的时候有效

image.png

Breakpoints

功能：Js的断点

所有的Js断点都会显示在这里，可以控制断点的开关、删除等

XHR/fetch Breakpoints

功能：XHR/fetch网络请求的断点，其他类型无效

使用：点击+添加目标请求，可以填URL里的部分参数，会自动匹配

image.png

Event Listener Breakpoints

功能：全局事件的断点

不推荐使用，因为会监听全局的事件，嵌套比较繁琐，不好追踪，耗时耗力。

但如果所有办法都试过了还没有找到想要的，可以尝试

Search

功能：能够搜索page里的非二进制资源，如Dom、JS、css、link

image.png

Performance

本是检测性能的工具，但也可以用来查看event

使用：

1. 点击录制按钮
2. 去触发相应条件，操作时间越短干扰越少
3. 点击stop
4. 点击Event Log

5. 筛选、查看相应的事件

   
   image.png
   image.png

快速修改Cookie

Application面板里的Cookies

image.png