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

[TOC]

說明

  • JS逆向的角度去介紹DevTools常用的功能
  • 不會(huì)事無巨細(xì)的介紹所有功能、和舉例子
  • 按照功能面板去講解
  • 推薦閱讀時(shí)間:10分鐘
  • 看完后能花5分鐘對(duì)功能按照使用場(chǎng)景歸納,學(xué)習(xí)效率更高
  • 并非專業(yè)人士,請(qǐng)多指教

常見的逆向需求

  1. 破解接口,還原請(qǐng)求
    • 先定位到具體的接口
    • 再找到發(fā)送請(qǐng)求的地方
    • 查看參數(shù)加密方式
    • 還原參數(shù),模擬請(qǐng)求
  2. 點(diǎn)擊某元素后都做了什么
    • 找到綁定事件的函數(shù)
    • 查看其邏輯

Chrome DevTools

使用說明

  1. command+shift+p 然后輸入面板,可以快速顯示
  2. 很多面板都是相互配合使用的,但基本思路就是:斷點(diǎn)功能+調(diào)用棧+查看源碼
  3. 查找邏輯實(shí)現(xiàn)部分,一般分為兩種:
    1. 從頁(yè)面元素入手,根據(jù)事件找到邏輯
    2. 從請(qǐng)求入手,找到發(fā)送請(qǐng)求的邏輯,然后看調(diào)用棧

Elements

實(shí)時(shí)顯示頁(yè)面的HTMLCSS

簡(jiǎn)單的靜態(tài)分析:Event Listeners

080D2BBD-B693-449C-8A75-AA331C20EFAB.png
  • 適用:簡(jiǎn)單web框架、原生JS的事件綁定
  • 目的:點(diǎn)擊某元素后查看其執(zhí)行的邏輯
  • 使用:選中某元素后,點(diǎn)擊Event Listeners,能查看其綁定的所有Event,常用的click、scroll等
  • 說明:如果元素click嵌套多層,可以點(diǎn)擊Remove移除監(jiān)聽,減少干擾項(xiàng)。最后點(diǎn)擊右側(cè)VM xxx:xxx這種字 定位到相應(yīng)代碼塊

Dom動(dòng)態(tài)分析:DOM Breakpoints

image.png
  • 適用:所有場(chǎng)景

  • 目的:監(jiān)聽元素的移出、元素屬性的改變、子元素的改變

  • 使用:選中某元素后

    1. 右鍵或者點(diǎn)擊元素最左側(cè)三個(gè)···
    2. 選中Break on
    3. 選擇相應(yīng)的斷點(diǎn)
  • 說明:

    1. Subtree modifications,子節(jié)點(diǎn)改變觸發(fā)
    2. Attributes modifications,屬性改變觸發(fā)
    3. Node Removal,元素移除觸發(fā)

Console

控制臺(tái)、運(yùn)行時(shí)環(huán)境,可以打印當(dāng)前運(yùn)行時(shí)的變量

常用小技巧

保留歷史記錄

功能:防止頁(yè)面刷新、跳轉(zhuǎn)導(dǎo)致的缺失log
使用:勾選Preserve log

image.png

0-4、$_

功能:可以快速獲取Dom、上次結(jié)果的引用
[圖片上傳失敗...(image-ab78a0-1598115481920)]

$0是當(dāng)前選中的Elementshtml 節(jié)點(diǎn)的引用。
$1是上次Elements選擇的Dom
$4是上上上上次Elements選擇的Dom
$_是對(duì)上次執(zhí)行結(jié)果的引用

store as global variable

功能:將目標(biāo)數(shù)據(jù)快速存儲(chǔ)到變量中,不用手動(dòng)賦值


image.png

使用:在數(shù)據(jù)上方右鍵,選擇store as global variable,會(huì)將結(jié)果賦值到 tmpx中,x從1開始累加:temp1、temp2、temp3……

copy

功能:快速將變量的值,完整的復(fù)制到剪切板,轉(zhuǎn)為Json格式的數(shù)據(jù)
說明:個(gè)別網(wǎng)站會(huì)重寫copy函數(shù),導(dǎo)致此功能無法使用。

image.png

console.trace()

功能:打印當(dāng)前調(diào)用堆棧,可以配合斷點(diǎn)使用
說明:功能比較雞肋,后面會(huì)有替代方法


image.png

變量監(jiān)控 Create live expression

功能:監(jiān)控目標(biāo)變量
使用:點(diǎn)擊眼睛按鈕,輸入變量名稱,點(diǎn)擊空白處

image.png

image.png

image.png

結(jié)合Console Importer插件

插件地址
功能:快速導(dǎo)入想要的模塊,如Jquery
使用:輸入$i("模塊名稱/模塊@版本/模塊地址")導(dǎo)入相應(yīng)模塊

image.png

Network

顯示當(dāng)前頁(yè)面Http、WebSocket請(qǐng)求記錄

常用功能

搜索

使用:command+f 或 點(diǎn)擊放大鏡,搜索接口關(guān)鍵詞(Header、Body的內(nèi)容都能搜到)。可以配合正則使用

注意:這個(gè)搜索只能搜索網(wǎng)絡(luò)部分的數(shù)據(jù),也就是說通過網(wǎng)絡(luò)請(qǐng)求得到的原始值(有些數(shù)據(jù)是加密傳輸,Dom渲染的是加密后的 值)都可以搜到。

篩選

使用:常用篩選,如圖

說明:

  1. 左側(cè)Filter里可以過濾domain、method、url、cookie
  2. 多選過濾條件:按住command,再點(diǎn)擊其他的選項(xiàng)。


    image.png
模擬弱網(wǎng)

使用:點(diǎn)擊Disable cache右側(cè)的下拉列表即可


image.png

Request Blocking

功能:攔截目標(biāo)請(qǐng)求,如果是一次性接口,則拿到參數(shù)模擬執(zhí)行。

使用:

  1. 選擇目標(biāo)請(qǐng)求,右鍵,選擇Block Request URL
  2. 在Request Blocking面板 勾選目標(biāo)接口的復(fù)選框
  3. 重新觸發(fā)目標(biāo)請(qǐng)求,會(huì)發(fā)現(xiàn)請(qǐng)求失敗(已經(jīng)成功攔截)

說明:也可以在Request Blocking里直接添加請(qǐng)求,效果一樣


image.png
image.png

快速查看調(diào)用棧

功能:已知目標(biāo)請(qǐng)求,找發(fā)送請(qǐng)求的代碼

使用:點(diǎn)擊Initiator,顯示調(diào)用棧,如圖


image.png

Source

Page

當(dāng)前頁(yè)面用到的所有資源,包括Dom、CSS、Js、多媒體文件等,默認(rèn)根據(jù)domain進(jìn)行分類。

注意:這里是渲染前的數(shù)據(jù),也就是服務(wù)器直接返回的數(shù)據(jù)。

image.png

Overrides

功能:替換指定文件,Js、Dom、圖片等文件都可以

一般用于修改網(wǎng)站Js文件,比如刪除debug檢測(cè)、分析參數(shù)算法等

使用:

  1. Enable local Overrides
  2. 在page頁(yè)面選擇要替換的文件,右鍵,選擇Save for Overrides
  3. 在Overrides找到要修改的文件,修改
  4. 刷新頁(yè)面 或 重新觸發(fā)目標(biāo)
image.png

Snippets

功能:很方便的執(zhí)行代碼片段,可以配合$i("模塊")使用,可以保存一些常用的代碼片段。

image.png

Watch

功能:監(jiān)控運(yùn)行時(shí)參數(shù)的值,一般用于debug時(shí)候使用

使用:點(diǎn)擊+ 添加監(jiān)控的變量即可

image.png

Call Stack

功能:顯示當(dāng)前行的調(diào)用棧,只在debug的時(shí)候有效,通常用于定位Js執(zhí)行邏輯


image.png

Scope

功能:顯示運(yùn)行時(shí)所有的變量,可以修改,只在debug的時(shí)候有效


image.png

Breakpoints

功能:Js的斷點(diǎn)

所有的Js斷點(diǎn)都會(huì)顯示在這里,可以控制斷點(diǎn)的開關(guān)、刪除等

XHR/fetch Breakpoints

功能:XHR/fetch網(wǎng)絡(luò)請(qǐng)求的斷點(diǎn),其他類型無效

使用:點(diǎn)擊+添加目標(biāo)請(qǐng)求,可以填URL里的部分參數(shù),會(huì)自動(dòng)匹配

image.png

Event Listener Breakpoints

功能:全局事件的斷點(diǎn)

不推薦使用,因?yàn)闀?huì)監(jiān)聽全局的事件,嵌套比較繁瑣,不好追蹤,耗時(shí)耗力。

但如果所有辦法都試過了還沒有找到想要的,可以嘗試

Search

功能:能夠搜索page里的非二進(jìn)制資源,如Dom、JS、css、link


image.png

Performance

本是檢測(cè)性能的工具,但也可以用來查看event

使用:

  1. 點(diǎn)擊錄制按鈕
  2. 去觸發(fā)相應(yīng)條件,操作時(shí)間越短干擾越少
  3. 點(diǎn)擊stop
  4. 點(diǎn)擊Event Log
  5. 篩選、查看相應(yīng)的事件


    image.png

    image.png

快速修改Cookie

Application面板里的Cookies

image.png

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。