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

[TOC]

说明

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

常见的逆向需求

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

Chrome DevTools

使用说明

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

Elements

实时显示页面的HTMLCSS

简单的静态分析: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是当前选中的Elementshtml 节点的引用。
$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

你可能感兴趣的:(「JS逆向」工具篇——Chrome DevTools)