JS逆向之瀏覽器補環境詳解

“補瀏覽器環境”是JS逆向者升職加薪的必備技能，也是作業中不可避免的操作，

為了讓大家徹底搞懂 “補瀏覽器環境”的緣由及原理，本文將從以下四個部分進行描述：

什么是補環境？
為什么要補環境？
怎么補環境？
補環境實戰
補環境框架成品原始碼

一：什么是 “補瀏覽器環境”？

瀏覽器環境：是指 JS代碼在瀏覽器中的運行時環境，它包括V8自動構建的物件（即ECMAScript的內容,如Date、Array），瀏覽器（內置）傳遞給V8的操作DOM和BOM的物件（如document、navigator）；
Node環境：是基于V8引擎的Js運行時環境，它包括V8與其自己的內置API，如fs，http，path；

Node環境 與 瀏覽器環境 的異同點可以簡單概括如圖：
在這里插入圖片描述

所以我們所說的 “補瀏覽器環境” 其實是補瀏覽器有而Node沒有的環境，即補BOM和DOM的物件；

二：為什么要 “補瀏覽器環境”？

對于逆向老手而言，“補環境” 這個詞不會陌生，當我們每次把辛辛苦苦扣出來的 “js加密演算法代碼”，并且放在瀏覽器環境中能正確執行后，就需要將它放到Node環境 中去執行，而由于Node環境與瀏覽器環境之間存在差異，會導致部分JS代碼在瀏覽器中運行的結果與在node中運行得到的結果不一樣，從而影響我們最終逆向成果；eg：

function decrypt() {
    document = false;
    var flag = document?true:false;
    if (flag) {
        return "正確加密"
    } else {
        return "錯誤加密";
    }
}

在瀏覽器環境運行時 flag為true，然后得到正常結果；
在Node環境運行時 flag為false，然后得到錯誤結果；

所以我們需要 “補瀏覽器環境”，使得扣出來的 “js加密演算法代碼” 在Node環境中運行得到的加密值，與其在 瀏覽器環境中運行得到的加密值一致，即對于這段 “js加密演算法代碼” 而言，我們補出來的環境與瀏覽器環境一致，

三：怎么 “補瀏覽器環境”？

要想 “補瀏覽器環境”，首先我們得知道 “js加密演算法代碼” 到底使用了哪些瀏覽器環境API，然后再對應去補上這些環境；

那么我們該如何監測 “js加密演算法代碼” 對瀏覽器環境API的使用呢？

毫無爭議：使用Proxy來監測瀏覽器環境API的使用，輔助補瀏覽器環境”

Proxy是ES6提供的代理器，用于創建一個物件的代理，從而實作基本操作的攔截和自定義（如屬性查找、賦值、列舉、函式呼叫等），它可以代理任何型別的物件，包括原生陣列，函式，甚至另一個代理；擁有遞回套娃的能力！！

也就是說我們代理某個物件后，我們就成了它的中間商，任何JS代碼對它的任何操作都可以被我們所攔截！！

# 對navigator物件進行代理，并設定攔截后的操作
var handler = {set:funcA,get:funcB,deleteProperty:funcC,has:funcD ...};
navigator = new Proxy(navigator,handler);
# 對代理后的navigator進行各種操作都會被攔截并觸發對應處理函式
navigator.userAgent 會被攔截并觸發 get  funcB
navigator.userAgent = "xx" 會被攔截并觸發 set funcA
delete navigator; 會被攔截并觸發 deleteProperty funC
"userAgent" in navigator  會被攔截并觸發 has funD ...
等等... 任何操作都可以被攔截

基于Proxy的特性，衍生了兩種補環境思路：

遞回嵌套Proxy以此來代理瀏覽器所有的BOM、DOM物件及其屬性，再配合node vm2模塊提供的純凈V8環境，就相當于在node中，對整個瀏覽器環境物件進行了代理，JS代碼使用任何瀏覽器環境 api都能被我們所攔截，然后我們針對攔截到的環境檢測點去補，
搭建補環境框架，用JS模擬瀏覽器基于原型鏈去偽造實作各個BOM、DOM物件，然后將這些JS組織起來，形成一個純JS丐版瀏覽器環境，我們補的純JS丐版瀏覽器環境越完善，就越接近真實瀏覽器環境，能通殺的js環境檢測就越多，最終完美通殺所有JS環境檢測！！；示例：b站搜 "志遠補環境"

第一種思路雖然實作簡單，主要是對Proxy攔截器的使用，但是具備的環境監測能力有限，對較復雜的原型鏈等難以監測，即使是二次開發也上限不高；并且遇到JS使用了很多環境時手補也相當麻煩；
第二種思路雖然實作較為復雜，但是上限極高，且可以完美兼容第一種思路，具備可成長的通殺潛質，

所以業內補環境框架幾乎都是基于第二種思路，先搭建一個補環境框架的骨架，將常見瀏覽器環境BOM、DOM物件補齊，如：window、location、Document、navigator等，等空閑時或作業遇到其他瀏覽器環境BOM、DOM物件，再將它補進來，補的越完善，我們能通殺JS環境檢測越多，

優點：

補的越完善，能通殺JS環境檢測越多，最終完美通殺所有JS環境檢測！！；
一鍵運行輸出目標JS中所有環境檢測點；
生成的最終代碼可直接用于生產環境（可直接供nodejs、v8使用）；
告別玄學補環境，不再一行行去debugger，極大提高作業效率，
可以在Chrome瀏覽器進行無瀏覽器環境除錯，
新人彎道超車必備
.....

四：“補環境框架”實戰

傳統補環境格式：

// 環境頭：
window = global;
navigator= {userAgent:"Mozilla/5.0 (Windows NT 1";}
// 扣出來的JS
........
......

傳統補環境太簡陋，而且不夠通用，代碼組織混亂，我們最好將其組織為一個專案：

補環境框架專案整體結構：
框架結構

那么實作這么一個瀏覽器補環境框架需要哪些步驟哪些考慮呢？

先確定框架運行主流程，即入口檔案，
每個BOM、DOM物件的實作都使用一個單獨的js檔案，便于定位及維護，
將這些BOM、DOM檔案按照原型鏈的優先順序進行讀取，拼接成整個瀏覽器環境，
思考如何去實作一個BOM、DOM物件使其和瀏覽器一致；（這個是影響框架上限的重要因素，同時也包含大量重復性人力作業）
事件的處理（對行為驗證碼有幫助）
思考如何保證JS中使用到的所有瀏覽器環境都能被我們所檢測；（這個是影響框架上限的重要因素）
如何設計優化補環境框架專案的可擴展、可維護性；（非常必要）
...
還有一些其他細節思考，我們的目標框架就是一個易于可擴展與維護、能檢測到JS中所有瀏覽器環境API的使用、實作了常見瀏覽器環境方法等，讓我們在之后補環境中，達到通殺效果，

如果對于原理及實作方向思考不夠全面、深入，那么實作的框架上限會有限，出現玄學的概率就大了，我也是經歷了很長時間打磨，多次推倒重來、借鑒多個課程，最終實作這個理想的框架，

下面就是一些具體的實作：
以下就是主流程入口骨架：

var  fs = require('fs');
var catvm2 = require('./CatVm2/catvm2.node.js');

const {VM,VMScript} = require('vm2'); //看作純凈V8

var catvm2_code = catvm2.GetCode();  //獲取所有代碼（工具代碼、補的所有BOM、DOM物件）
var web_js_code = fs.readFileSync(`${__dirname}/target/get_b_fz.js`) ; // 獲取目標網站js代碼
var log_code = "\r\ncatvm.print.getAll();debugger;\r\r";
var all_code = catvm2_code+web_js_code+log_code;
fs.writeFileSync(`${__dirname}/debugger_bak.js`,all_code);
const script = new VMScript(all_code,`${__dirname}/debugger.js`); //真實路徑，瀏覽器打開的就是該快取檔案

const vm = new VM(); // new 一個純凈v8環境
debugger
vm.run(script); // 在V8環境中運行除錯
debugger

骨架搭好之后我們就要去補對應的BOM、DOM物件，比如補Navigator：
1、先在瀏覽器環境觀察該物件：Navigator，
能否進行new Navigator,不能的話則在其建構式定義中拋出例外，能的話不拋；

var dsf_tmp_context = catvm.memory.variable.Navigator = {};
var Navigator = function Navigator() { // 建構式
	throw new TypeError("Illegal constructor");
}; catvm.safefunction(Navigator);//13

2、查看其原型Navigator.prototype 的屬性、方法、原型鏈，
發現Navigator原型屬性、方法不能通過原型呼叫，即
Navigator.appVersion 會拋出例外，
發現其原型鏈只有一層，即Navigator.prototype.__proto__ === Object.prototype

3、在瀏覽器環境觀察其實體物件：navigator
查看其屬性、方法與原型上的差異，發現差不多，基本都是繼承原型的，
因此可以簡單補成下面這樣：


Object.defineProperties(Navigator.prototype, {
    [Symbol.toStringTag]: {
		value: "Navigator",
	    configurable: true
	}
});
var navigator = {};
navigator.__proto__ = Navigator.prototype;


Navigator.prototype.plugins = [];
Navigator.prototype.languages = ["zh-CN", "zh"];
Navigator.prototype.userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36';
Navigator.prototype.platform = 'Win32';
Navigator.prototype.maxTouchPoints = 0;
Navigator.prototype.onLine = true;
for (var _prototype in Navigator.prototype) {
    navigator[_prototype] = Navigator.prototype[_prototype];
    if (typeof (Navigator.prototype[_prototype]) != "function") {
        Navigator.prototype.__defineGetter__(_prototype, function () {
            debugger;
            var e = new Error();
            e.name = "TypeError";
            e.message = "Illegal constructor";
            e.stack = "VM988:1 Uncaught TypeError: Illegal invocation \r\n " +
                "at <anonymous>:1:21";
            throw e;
            // throw new TypeError("Illegal constructor");
        });
    }
}

// 加上代理
navigator = catvm.proxy(navigator);

注：上面實體只是一種補環境思路，是基于物件.屬性粒度；我個人用的是另一種思路，基于物件.屬性.特性粒度即Object.getOwnPropertyDescriptor 的value,writable..等，雖然需要補代碼更多，但是模擬的效果更完美，理論上限極高，

瀏覽器物件及屬性實在太多了，我們不可能手動補那么物件屬性，因此要想補出一個完美瀏覽器環境，我們需要撰寫瀏覽器環境自吐腳本，即在瀏覽器執行該腳本，它會將某個瀏覽器環境物件的所有屬性與方法，拼接成我們框架所需要的補環境代碼，我們直接粘貼進來，稍微改改即可，

我們可以借助：Reflect.ownKeys(real_obj)來獲取該物件的所有屬性與方法，
然后對其 attr進行各種判斷、處理，最終拼接成我們需要的樣子，

var all_attrs = Reflect.ownKeys(real_obj);
var continue_attrs = ["prototype", "constructor"];
for (let index = 0; index < all_attrs.length; index++) {
    let attr_name = all_attrs[index];
    // 暫時不處理在 continue_attrs 中的屬性
    if (continue_attrs.indexOf(attr_name) != -1) {
        console.log(`遇到 ${attr_name}，跳過`);
        continue
    }
        if (attr_name == Symbol.toStringTag) {
            result_code = `Object.defineProperties(${repair_obj}, {
    [Symbol.toStringTag]: {
		value: "${real_obj[Symbol.toStringTag]}",
	    configurable: true
	}
});//23\n`;
            symbol_code_ls.push(result_code);
            continue
        }
    }
    ..........太長，略過（下面框架原始碼中有）

每補完一個瀏覽器物件之后，可以運行起來與真實瀏覽器進行對比，逐步優化，最終達到完美效果，

五：“補環境框架”成品原始碼

補環境框架儼然成為JS逆向人員的大殺器，也是眾多面試官的考察點，我們已經了解了它的原理及實作步驟，接下來我們可以嘗試自己從頭實作一個完善的補環境框架，但是這會花費很長一段時間來進行開發，而且其中有很多重復性作業比較無聊（復制粘貼對比等），

走快車道：

我在這條路已經走的比較久，補了很多環境，如果你想省下大段時間極大提高效率，直接彎道超車的話，可以微信聯系我：dengshengfeng666 付費原始碼借鑒；
統一固定價 99，付完直接發原始碼（有readme可直接小白上手），后續有疑問可以直接問我，
或者直接在CSDN私信我，

部分成果展示（以頭條 sign值為例）：

監測到的檢測點，做過的靚仔可以看看是不是都有
檢測點列印

與真實瀏覽器對比

彎道超車，從我做起

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539791.html

標籤：訊息安全

上一篇：JavaScript：this指標

下一篇：JS逆向之瀏覽器補環境詳解