【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 選項）：

重新來到航班查詢頁面，啟用 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)

標籤：Python

上一篇：Python代碼閱讀（第15篇）：串列求交集

下一篇：【Python爬蟲】太刺激了！本來只想爬個視頻的，誰知自己淪陷進去了（附原始碼）