【JS 逆向百例】瀏覽器插件 Hook 實戰，亞航加密參數分析

關注微信公眾號：K哥爬蟲，QQ交流群：808574309，持續分享爬蟲進階、JS/安卓逆向等技術干貨！

聲明

本文章中所有內容僅供學習交流，抓包內容、敏感網址、數據接口均已做脫敏處理，嚴禁用於商業用途和非法用途，否則由此產生的一切后果均與作者無關，若有侵權，請聯系我立即刪除！

逆向目標

• 目標：亞航 airasia 航班狀態查詢，請求頭 Authorization 參數
• 主頁：aHR0cHM6Ly93d3cuYWlyYXNpYS5jb20vZmxpZ2h0c3RhdHVzLw==
• 接口：aHR0cHM6Ly9rLmFwaWFpcmFzaWEuY29tL2ZsaWdodHN0YXR1cy9zdGF0dXMvb2QvdjMv
• 逆向參數：
  • Request Headers：authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI......

逆向過程

抓包分析

來到航班狀態查詢頁面，隨便輸入出發地和目的地，點擊查找航班，例如查詢澳門到吉隆坡的航班，MFM 和 KUL 分別是澳門和吉隆坡國際機場的代碼，查詢接口由最基本的 URL + 機場代碼 + 日期組成，類似於：https://xxxxxxxxxx/MFM/KUL/28/09/2021 ，其中請求頭 Request Headers 里有個 authorization 參數，通過觀察發現，不管是清除 cookie 還是更換瀏覽器，此參數的值是一直不變的，經過測試，直接復制該參數到代碼里也是可行的，但本次我們的目的是通過編寫瀏覽器插件來 Hook 這個參數，找到它生成的地方。

有關 Hook 的詳細知識，在 K 哥前期的文章有詳細介紹：JS 逆向之 Hook，吃着火鍋唱着歌，突然就被麻匪劫了！

瀏覽器插件 Hook

瀏覽器插件事實上叫做瀏覽器擴展（extensions），它能夠增強瀏覽器功能，比如屏蔽廣告、管理瀏覽器代理、更改瀏覽器外觀等。

既然是通過編寫瀏覽器插件的方式進行 Hook，那么首先我們肯定是要簡單了解一下如何編寫瀏覽器插件了，編寫瀏覽器插件也有對應的規范，在以前，不同瀏覽器的插件編寫方式都不太一樣，到現在基本上都和 Google Chrome 插件的編寫方式一樣了，Google Chrome 的插件除了能運行在 Chrome 瀏覽器之外，還可以運行在所有 webkit 內核的國產瀏覽器，比如 360 極速瀏覽器、360 安全瀏覽器、搜狗瀏覽器、QQ 瀏覽器等等，另外，Firefox 火狐瀏覽器也有很多人使用，火狐瀏覽器插件的開發方式變化了很多次，但是從 2017 年 11 月底開始，插件必須使用 WebExtensions APIs 進行構建，其目的也是為了和其他瀏覽器統一，一般的 Google Chrome 插件也能直接運行在火狐瀏覽器上，但是火狐瀏覽器插件需要要經過 Mozilla 簽名后才能安裝，否則只能臨時調試，重啟瀏覽器后插件就沒有了，這一點較為不便。

一個瀏覽器插件的開發說簡單也簡單，說復雜也復雜，不過對於我們做爬蟲逆向的開發人員來說，我們主要是利用插件對代碼進行 Hook，我們只需要知道一個插件是由一個 manifest.json 和一個 JavaScript 腳本文件組成的就夠了，接下來 K 哥以本案例中請求頭的 authorization 參數為例，帶領大家開發一個 Hook 插件。當然，如果你想深入研究瀏覽器插件的開發，可以參考 Google Chrome 擴展文檔和 Firefox Browser 擴展文檔。

按照 Google Chrome 插件的開發規范，首先新建一個文件夾，該文件夾下包含一個 manifest.json 文件和一個 JS Hook 腳本，當然，如果你想為你的插件配置一個圖標的話，也可以將圖標放到該文件夾下，圖標格式官方建議 PNG，也可以是 WebKit 支持的任何格式，包括 BMP、GIF、ICO 和 JPEG 等，注意：manifest.json 文件名不可更改！正常的插件目錄類似如下結構：

JavaScript Hook
    ├─ manifest.json        // 配置文件，文件名不可更改
    ├─ icons.png            // 圖標
    └─ javascript_hook.js   // Hook 腳本，文件名順便取

manifest.json

manifest.json 是一個 Chrome 插件中最重要也是必不可少的文件，它用來配置所有和插件相關的配置，必須放在根目錄。其中，manifest_version、name、version 這 3 個參數是必不可少的，本案例中，manifest.json 文件配置如下：（完整配置參考 Chrome manifest file format）

{
    "name": "JavaScript Hook",          // 插件名稱
    "version": "1.0",                   // 插件版本
    "description": "JavaScript Hook",   // 插件描述
    "manifest_version": 2,              // 清單版本，必須是2或者3
    "icons": {                          // 插件圖標
		"16": "/icons.png",             // 圖標路徑，插件圖標不同尺寸也可以是同一張圖
		"48": "/icons.png",
		"128": "/icons.png"
	},
    "content_scripts": [{
        "matches": ["<all_urls>"],      // 匹配所有地址
        "js": ["javascript_hook.js"],   // 注入的代碼文件名和路徑，如果有多個，則依次注入
        "all_frames": true,             // 允許將內容腳本嵌入頁面的所有框架中
        "permissions": ["tabs"],        // 權限申請，tabs 表示標簽
        "run_at": "document_start"      // 代碼注入的時間
    }]
}

這里需要注意以下幾點：

• manifest_version：配置清單版本，目前支持 2 和 3，2 將會在將來被逐步淘汰，將來也可能推出 4 或者更高版本。可以在官網查看 Manifest V2 和 Manifest V3 的區別，3 有更高的隱私安全要求，這里推薦使用 2。
• content_scripts：Chrome 插件中向頁面注入腳本的一種形式，包括地址匹配（支持正則表達式），要注入的 JS、CSS 腳本，代碼注入的時間（建議 document_start，網頁開始加載時就注入）等。

javascript_hook.js

javascript_hook.js 文件里就是 Hook 代碼了：

var hook = function () {
    var org = window.XMLHttpRequest.prototype.setRequestHeader;
    window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
        if (key == 'Authorization') {
            debugger;
        }
        return org.apply(this, arguments);
    }
}
var script = document.createElement('script');
script.textContent = '(' + hook + ')()';
(document.head || document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

XMLHttpRequest.setRequestHeader() 是設置 HTTP 請求頭部的方法，定義了一個變量 org 來保存原始方法，window.XMLHttpRequest.prototype.setRequestHeader 這里有個原型對象 prototype，所有的 JavaScript 對象都會從一個 prototype 原型對象中繼承屬性和方法，具體可以參考菜鳥教程 JavaScript prototype 的介紹。一旦程序在設置請求頭中的 Authorization 時，就會進入我們的 Hook 代碼，通過 debugger 斷下，最后依然將所有參數返回給 org，也就是 XMLHttpRequest.setRequestHeader() 這個原始方法，保證數據正常傳輸。然后創建 script 標簽，script 標簽內容是將 Hook 函數變成 IIFE 自執行函數，然后將其插入到網頁中。

到此我們瀏覽器插件就編寫完成了，接下來介紹如何在 Google Chrome 和 Firefox Browser 中使用。

Google Chrome

在瀏覽器地址欄輸入 chrome://extensions 或者依次點擊右上角【自定義及控制 Google Chrome】—>【更多工具】—>【擴展程序】，進入擴展程序頁面，再依次選擇開啟【開發者模式】—>【加載已解壓的擴展程序】，選擇整個 Hook 插件文件夾（文件夾里應包含 manifest.json、javascript_hook.js 和圖標文件），如下圖所示：

Firefox Browser

火狐瀏覽器不能直接安裝未經過 Mozilla 簽名認證的插件，只能通過調試附加組件的方式進行安裝。插件的格式必須是 .xpi、.jar、.zip 的，所以需要我們將 manifest.json、javascript_hook.js 和圖標文件一起打包，打包需要注意不要包含頂層目錄，直接全選右鍵壓縮即可，否則在安裝時會提示 does not contain a valid manifest。

在瀏覽器地址欄輸入 about:addons 或者依次點擊右上角【打開應用程序菜單】—>【擴展和主題】，也可以直接使用快捷鍵 Ctrl + Shift + A 來到擴展頁面，在管理您的擴展目錄旁有個設置按鈕，點擊選擇【調試附加組件】，在臨時擴展項目下，選擇【臨時載入附加組件】，選擇 Hook 插件的壓縮包即可。

也可以直接在瀏覽器地址欄輸入 about:debugging#/runtime/this-firefox，直接進入到臨時擴展頁面，如下圖所示：

自此，瀏覽器 Hook 插件我們就開發安裝完畢了，重新來到航班查詢頁面，隨便輸入出發地和目的地，點擊查找航班，就可以看到此時已經成功斷下：

TamperMonkey 插件 Hook

前面我們已經介紹了如何自己編寫一個瀏覽器插件，但是不同瀏覽器插件的編寫始終是大同小異的，有可能你編寫的某個插件在其他瀏覽器上運行不了，而 TamperMonkey 就可以幫助我們解決這個問題，TamperMonkey 俗稱油猴插件，它本身就是一個瀏覽器擴展，是最為流行的用戶腳本管理器，基本上支持所有帶有擴展功能的瀏覽器，實現了腳本的一次編寫，所有平台都能運行，用戶可以在 GreasyFork、OpenUserJS 等平台直接獲取別人發布的腳本，功能眾多且強大，同樣的，我們也可以利用 TamperMonkey 來實現 Hook。

TamperMonkey 可以直接在各大瀏覽器擴展商店里面安裝，也可以去 TamperMonkey 官網進行安裝，安裝過程這里不再贅述。

安裝完成后點擊圖標，添加新腳本，或者點擊管理面板，再點擊加號新建腳本，寫入以下 Hook 代碼：

// ==UserScript==
// @name         JavaScript Hook
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  JavaScript Hook 腳本
// @author       K哥爬蟲
// @include      *://*airasia.com/*
// @icon         https://profile.csdnimg.cn/1/B/8/3_kdl_csdn
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
    'use strict';
    var org = window.XMLHttpRequest.prototype.setRequestHeader;
    window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
        if (key == 'Authorization') {
            debugger;
        }
        return org.apply(this, arguments);
    };
})();

整個代碼 JavaScript 部分是個 IIFE 立即執行函數，具體含義就不解釋了，前面瀏覽器插件開發時已經講過，重要的是上面幾行注釋，千萬不要以為這只是簡單的注釋，可有可無，在 TamperMonkey 中，可以將這部分視為基本的配置選項，各項都有其具體含義，完整的配置選項參考 TamperMonkey 官方文檔，常見配置項如下表所示（其中需要特別注意 @match、@include 和 @run-at 選項）：

選項	含義
@name	腳本的名稱
@namespace	命名空間，用來區分相同名稱的腳本，一般寫作者名字或者網址就可以
@version	腳本版本，油猴腳本的更新會讀取這個版本號
@description	描述這個腳本是干什么用的
@author	編寫這個腳本的作者的名字
@match	從字符串的起始位置匹配正則表達式，只有匹配的網址才會執行對應的腳本，例如 * 匹配所有，https://www.baidu.com/* 匹配百度等，可以參考 Python re 模塊里面的 re.match() 方法，允許多個實例
@include	和 @match 類似，只有匹配的網址才會執行對應的腳本，但是 @include 不會從字符串起始位置匹配，例如 *://*baidu.com/* 匹配百度，具體區別可以參考 TamperMonkey 官方文檔
@icon	腳本的 icon 圖標
@grant	指定腳本運行所需權限，如果腳本擁有相應的權限，就可以調用油猴擴展提供的 API 與瀏覽器進行交互。如果設置為 none 的話，則不使用沙箱環境，腳本會直接運行在網頁的環境中，這時候無法使用大部分油猴擴展的 API。如果不指定的話，油猴會默認添加幾個最常用的 API
@require	如果腳本依賴其他 JS 庫的話，可以使用 require 指令導入，在運行腳本之前先加載其它庫
@run-at	腳本注入時機，該選項是能不能 hook 到的關鍵，有五個值可選：document-start：網頁開始時；document-body：body出現時；document-end：載入時或者之后執行；document-idle：載入完成后執行，默認選項；context-menu：在瀏覽器上下文菜單中單擊該腳本時，一般將其設置為 document-start

重新來到航班查詢頁面，啟用 TamperMonkey 腳本，如果配置正確的話，就可以看到我們編寫的 Hook 腳本已開啟，隨便輸入出發地和目的地，點擊查找航班，就可以看到此時已經成功斷下：

參數逆向

不管你是使用瀏覽器插件還是 TamperMonkey 進行 Hook，此時 Hook 到的是設置請求頭 Authorization 的地方，也就是說 Authorization 的值是產生肯定經過了之前的某個函數或者方法，那么我們跟進開發者工具的 Call Stack 調用棧，就一定能夠找到這個方法，跟調用棧是一個考驗耐心的過程，花費時間也比較多。

通常情況下，我們是挨個函數查看其傳遞的參數有沒有包含我們目標參數，如果上一個函數里沒有而下一個函數里出現了，那么大概率加密過程就在這兩個函數之間，進入上一個函數再進行單步調試，一般就能找到加密代碼，在本案例中，我們跟到 t.getData 函數埋下斷點進行單步調試，可以看到其實后面在反復調用 t.subscribe 和 t.call，之所以不在這兩個函數處埋下斷點，是因為循環過多不好調試，而且 t.getData 通過名稱判斷也比較可疑。

重新點擊登陸，來到我們剛剛埋下斷點的地方，F11 或者點擊向下箭頭，進入函數內部進行單步調試，調試大約 7 步后，來到一個 t.getHttpHeader 函數，可以看到 Authorization 的值就是 "Bearer " + r.accessToken，我們在控制台打印 r.accessToken 可以看到就是我們想要的值，如下圖所示：

那么重點是這個 r.accessToken，如果你嘗試直接往上找，你會發現找了很多行也沒有找到，直接搜索關鍵字 accessToken，可以發現在 zUnb 對象里面是直接定義死了的，直接拿來用即可，如下圖所示：

關於出發地、目的地的各個地方的代碼，是通過 JSON 傳遞過來的，很容易找到，可根據實際需求靈活處理，如下圖所示：

這個案例本身不難，直接搜索還能更快定位參數位置，但是本案例重點在於如何使用瀏覽器插件進行 Hook 操作，這對於某些無法經過搜索得到的參數，或者搜索結果太多難以定位的情況來說，是一個很好的解決方法。

完整代碼

GitHub 關注 K 哥爬蟲，持續分享爬蟲相關代碼！歡迎 star ！https://github.com/kgepachong/

以下只演示部分關鍵代碼，不能直接運行！完整代碼倉庫地址：https://github.com/kgepachong/crawler/

Python 示例代碼

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import requests


status_url = '脫敏處理，完整代碼關注 GitHub：https://github.com/kgepachong/crawler'


def get_flight_status(departure, destination, date):
    headers = {
        'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36',
        'authorization': '脫敏處理，完整代碼關注 GitHub：https://github.com/kgepachong/crawler'
    }
    complete_url = status_url + departure + '/' + destination + '/' + date
    response = requests.get(url=complete_url, headers=headers)
    print(response.text)


if __name__ == '__main__':
    departure = input('請輸入出發地代碼：')
    destination = input('請輸入目的地代碼：')
    date = input('請輸入日期（例如：29/09/2021）：')

    # departure = 'MFM'
    # destination = 'KUL'
    # date = '29/09/2021'
    get_flight_status(departure, destination, date)