前言

“補(bǔ)瀏覽器環(huán)境”是JS逆向者升職加薪的必備技能，也是工作中不可避免的操作。

為了讓大家徹底搞懂 “補(bǔ)瀏覽器環(huán)境”的緣由及原理，本文將從以下四個(gè)部分進(jìn)行描述：

• 什么是補(bǔ)環(huán)境？
• 為什么要補(bǔ)環(huán)境？
• 怎么補(bǔ)環(huán)境？
• 補(bǔ)環(huán)境實(shí)戰(zhàn)
• 補(bǔ)環(huán)境框架成品源碼

一：什么是 “補(bǔ)瀏覽器環(huán)境”？

瀏覽器環(huán)境： 是指 JS代碼在瀏覽器中的運(yùn)行時(shí)環(huán)境，它包括V8自動(dòng)構(gòu)建的對象（即ECMAScript的內(nèi)容,如Date、Array），瀏覽器（內(nèi)置）傳遞給V8的操作DOM和BOM的對象（如document、navigator）；

Node環(huán)境：是基于V8引擎的Js運(yùn)行時(shí)環(huán)境，它包括V8與其自己的內(nèi)置API，如fs，http，path；

Node環(huán)境 與 瀏覽器環(huán)境 的異同點(diǎn)可以簡單概括如圖：

所以我們所說的 “補(bǔ)瀏覽器環(huán)境” 其實(shí)是補(bǔ)瀏覽器有 而Node沒有的環(huán)境，即 補(bǔ)BOM和DOM的對象；

二：為什么要 “補(bǔ)瀏覽器環(huán)境”？

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

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

在瀏覽器環(huán)境運(yùn)行時(shí) flag為true，然后得到正常結(jié)果；
在Node環(huán)境運(yùn)行時(shí) flag為false，然后得到錯(cuò)誤結(jié)果；

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

三：怎么 “補(bǔ)瀏覽器環(huán)境”？

要想 “補(bǔ)瀏覽器環(huán)境”，首先我們得知道 “js加密算法代碼” 到底使用了哪些瀏覽器環(huán)境API，然后再對應(yīng)去補(bǔ)上這些環(huán)境；

那么我們該如何監(jiān)測 “js加密算法代碼” 對瀏覽器環(huán)境API的使用呢？

毫無爭議：使用Proxy來監(jiān)測瀏覽器環(huán)境API的使用，輔助補(bǔ)瀏覽器環(huán)境”

Proxy是ES6提供的代理器，用于創(chuàng)建一個(gè)對象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。 它可以代理任何類型的對象，包括原生數(shù)組，函數(shù)，甚至另一個(gè)代理；擁有遞歸套娃的能力?。?/p>

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

# 對navigator對象進(jìn)行代理，并設(shè)置攔截后的操作
var handler = {set:funcA,get:funcB,deleteProperty:funcC,has:funcD ...};
navigator = new Proxy(navigator,handler);
# 對代理后的navigator進(jìn)行各種操作都會(huì)被攔截并觸發(fā)對應(yīng)處理函數(shù)
navigator.userAgent 會(huì)被攔截并觸發(fā) get  funcB
navigator.userAgent = "xx" 會(huì)被攔截并觸發(fā) set funcA
delete navigator; 會(huì)被攔截并觸發(fā) deleteProperty funC
"userAgent" in navigator  會(huì)被攔截并觸發(fā) has funD ...
等等... 任何操作都可以被攔截

基于Proxy的特性，衍生了兩種補(bǔ)環(huán)境思路：

1. 遞歸嵌套Proxy以此來代理瀏覽器所有的BOM、DOM對象及其屬性，再配合node vm2模塊提供的純凈V8環(huán)境，就相當(dāng)于在node中，對整個(gè)瀏覽器環(huán)境對象進(jìn)行了代理，JS代碼使用任何瀏覽器環(huán)境 api都能被我們所攔截。然后我們針對攔截到的環(huán)境檢測點(diǎn)去補(bǔ)。
2. 搭建補(bǔ)環(huán)境框架，用JS模擬瀏覽器基于原型鏈去偽造實(shí)現(xiàn)各個(gè)BOM、DOM對象，然后將這些JS組織起來，形成一個(gè)純JS丐版瀏覽器環(huán)境，我們補(bǔ)的純JS丐版瀏覽器環(huán)境越完善，就越接近真實(shí)瀏覽器環(huán)境，能通殺的js環(huán)境檢測就越多。最終完美通殺所有JS環(huán)境檢測！！

第一種思路雖然實(shí)現(xiàn)簡單，主要是對Proxy攔截器的使用 ，但是具備的環(huán)境監(jiān)測能力有限，對較復(fù)雜的原型鏈等難以監(jiān)測，即使是二次開發(fā)也上限不高；并且遇到JS使用了很多環(huán)境時(shí)手補(bǔ)也相當(dāng)麻煩；

第二種思路雖然實(shí)現(xiàn)較為復(fù)雜，但是上限極高，且可以完美兼容第一種思路，具備可成長的通殺潛質(zhì)。

所以業(yè)內(nèi)補(bǔ)環(huán)境框架幾乎都是基于第二種思路，先搭建一個(gè)補(bǔ)環(huán)境框架的骨架，將常見瀏覽器環(huán)境BOM、DOM對象補(bǔ)齊，如：window、location、Document、navigator等，等空閑時(shí)或工作遇到其他瀏覽器環(huán)境BOM、DOM對象，再將它補(bǔ)進(jìn)來。補(bǔ)的越完善，我們能通殺JS環(huán)境檢測越多。

優(yōu)點(diǎn)：

• 補(bǔ)的越完善，能通殺JS環(huán)境檢測越多。最終完美通殺所有JS環(huán)境檢測?。。?/li>
• 一鍵運(yùn)行輸出目標(biāo)JS中所有環(huán)境檢測點(diǎn)；
• 生成的最終代碼可直接用于生產(chǎn)環(huán)境（可直接供nodejs、v8使用）；
• 告別玄學(xué)補(bǔ)環(huán)境，不再一行行去debugger，極大提高工作效率。
• 可以在Chrome瀏覽器進(jìn)行無瀏覽器環(huán)境調(diào)試。
• 新人彎道超車必備
• …

四：“補(bǔ)環(huán)境框架”實(shí)戰(zhàn)

傳統(tǒng)補(bǔ)環(huán)境格式：

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

傳統(tǒng)補(bǔ)環(huán)境太簡陋，而且不夠通用，代碼組織混亂，我們最好將其組織為一個(gè)項(xiàng)目：

補(bǔ)環(huán)境框架項(xiàng)目整體結(jié)構(gòu)：

那么實(shí)現(xiàn)這么一個(gè)瀏覽器補(bǔ)環(huán)境框架需要哪些步驟哪些考慮呢？

• 先確定框架運(yùn)行主流程，即入口文件 。
• 每個(gè)BOM、DOM對象的實(shí)現(xiàn)都使用一個(gè)單獨(dú)的js文件，便于定位及維護(hù)。
• 將這些BOM、DOM文件按照原型鏈的優(yōu)先順序進(jìn)行讀取，拼接成整個(gè)瀏覽器環(huán)境。
• 思考如何去實(shí)現(xiàn)一個(gè)BOM、DOM對象使其和瀏覽器一致；（這個(gè)是影響框架上限的重要因素，同時(shí)也包含大量重復(fù)性人力工作）
• 事件的處理（對行為驗(yàn)證碼有幫助）
• 思考如何保證JS中使用到的所有瀏覽器環(huán)境都能被我們所檢測；（這個(gè)是影響框架上限的重要因素）
• 如何設(shè)計(jì)優(yōu)化補(bǔ)環(huán)境框架項(xiàng)目的可擴(kuò)展、可維護(hù)性；（非常必要）
  …
  還有一些其他細(xì)節(jié)思考，我們的目標(biāo)框架就是 一個(gè)易于可擴(kuò)展與維護(hù)、能檢測到JS中所有瀏覽器環(huán)境API的使用、實(shí)現(xiàn)了常見瀏覽器環(huán)境方法等，讓我們在之后補(bǔ)環(huán)境中，達(dá)到通殺效果。

如果對于原理及實(shí)現(xiàn)方向 思考不夠全面、深入，那么實(shí)現(xiàn)的框架上限會(huì)有限，出現(xiàn)玄學(xué)的概率就大了，我也是經(jīng)歷了很長時(shí)間打磨，多次推倒重來、借鑒多個(gè)課程，最終實(shí)現(xiàn)這個(gè)理想的框架。

下面就是一些具體的實(shí)現(xiàn)：

以下就是主流程入口骨架：

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

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

var catvm2_code = catvm2.GetCode();  //獲取所有代碼（工具代碼、補(bǔ)的所有BOM、DOM對象）
var web_js_code = fs.readFileSync(`${__dirname}/target/get_b_fz.js`) ; // 獲取目標(biāo)網(wǎng)站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`); //真實(shí)路徑，瀏覽器打開的就是該緩存文件

const vm = new VM(); // new 一個(gè)純凈v8環(huán)境
debugger
vm.run(script); // 在V8環(huán)境中運(yùn)行調(diào)試
debugger

骨架搭好之后我們就要去補(bǔ)對應(yīng)的BOM、DOM對象，比如補(bǔ)Navigator：

1、先在瀏覽器環(huán)境觀察該對象：Navigator，

能否進(jìn)行new Navigator,不能的話則在其構(gòu)造函數(shù)定義中拋出異常，能的話不拋；

var dsf_tmp_context = catvm.memory.variable.Navigator = {};
var Navigator = function Navigator() { // 構(gòu)造函數(shù)
	throw new TypeError("Illegal constructor");
}; catvm.safefunction(Navigator);//13

2、查看其原型Navigator.prototype 的屬性、方法、原型鏈，

發(fā)現(xiàn)Navigator原型屬性、方法不能通過原型調(diào)用，即
Navigator.appVersion 會(huì)拋出異常。

發(fā)現(xiàn) 其原型鏈只有一層，即Navigator.prototype.__proto__ === Object.prototype

3、在瀏覽器環(huán)境觀察其實(shí)例對象：navigator

查看其屬性、方法與 原型上的差異，發(fā)現(xiàn)差不多，基本都是繼承原型的。

因此可以簡單補(bǔ)成下面這樣：

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);

注：上面實(shí)例只是一種補(bǔ)環(huán)境思路，是基于對象.屬性粒度；我個(gè)人用的是另一種思路，基于對象.屬性.特性粒度即Object.getOwnPropertyDescriptor 的value,writable..等，雖然需要補(bǔ)代碼更多，但是模擬的效果更完美，理論上限極高。

瀏覽器對象及屬性實(shí)在太多了，我們不可能手動(dòng)補(bǔ)那么對象屬性，因此要想補(bǔ)出一個(gè)完美瀏覽器環(huán)境，我們需要編寫瀏覽器環(huán)境自吐腳本。即在瀏覽器執(zhí)行該腳本，它會(huì)將某個(gè)瀏覽器環(huán)境對象的所有屬性與方法，拼接成我們框架所需要的補(bǔ)環(huán)境代碼，我們直接粘貼進(jìn)來，稍微改改即可。

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

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];
    // 暫時(shí)不處理在 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
        }
    }
    ..........太長，略過（下面框架源碼中有）

每補(bǔ)完一個(gè)瀏覽器對象之后，可以運(yùn)行起來與真實(shí)瀏覽器進(jìn)行對比，逐步優(yōu)化，最終達(dá)到完美效果。

五：“補(bǔ)環(huán)境框架”成品源碼

補(bǔ)環(huán)境框架儼然成為JS逆向人員的大殺器，也是眾多面試官的考察點(diǎn)。我們已經(jīng)了解了 它的原理及實(shí)現(xiàn)步驟，接下來我們可以嘗試自己從頭實(shí)現(xiàn)一個(gè)完善的補(bǔ)環(huán)境框架，但是這會(huì)花費(fèi)很長一段時(shí)間來進(jìn)行開發(fā)，而且其中有很多重復(fù)性工作比較無聊（復(fù)制粘貼對比等）。

走快車道：

我在這條路已經(jīng)走的比較久，補(bǔ)了很多環(huán)境，如果你想省下大段時(shí)間極大提高效率，直接彎道超車的話，可以 微信聯(lián)系我：dengshengfeng666 付費(fèi)源碼借鑒；

統(tǒng)一固定價(jià) 99，付完直接發(fā)框架項(xiàng)目源碼（有readme可直接小白上手），后續(xù)有疑問可以直接問我。
或者直接在CSDN私信我。

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

監(jiān)測到的檢測點(diǎn)，做過的靚仔可以看看是不是都有

與真實(shí)瀏覽器對比

彎道超車，從我做起

總結(jié)

到此這篇關(guān)于JS逆向之瀏覽器補(bǔ)環(huán)境的文章就介紹到這了,更多相關(guān)JS逆向?yàn)g覽器補(bǔ)環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論