寫在前面的話
在此之前，我一直都在研究JavaScript相關的反除錯技巧。但是當我在網上搜尋相關資料時，我發現網上並沒有多少關於這方面的文章，而且就算有也是非常不完整的那種。所以在這篇文章中，我打算跟大家總結一下關於JavaScript反除錯技巧方面的內容。值得一提的是，其中有些方法已經被網路犯罪分子廣泛應用到惡意軟體之中了。
對於JavaScript來說，你只需要花一點時間進行除錯和分析，你就能夠了解到JavaScript程式碼段的功能邏輯。而我們所要討論的內容，可以給那些想要分析你JavaScript程式碼的人增加一定的難度。不過我們的技術跟程式碼混淆無關，我們主要針對的是如何給程式碼主動除錯增加困難。
本文所要介紹的技術方法大致如下：
1. 檢測未知的執行環境（我們的程式碼只想在瀏覽器中被執行）；
2. 檢測除錯工具（例如DevTools）；
3. 程式碼完整性控制；
4. 流完整性控制；
5. 反模擬；
簡而言之，如果我們檢測到了“不正常”的情況，程式的執行流程將會改變，並跳轉到偽造的程式碼塊，並“隱藏”真正的功能程式碼。
一、函式重定義
這是一種最基本也是最常用的程式碼反除錯技術了。在JavaScript中，我們可以對用於收集資訊的函式進行重定義。比如說，console.log()函式可以用來收集函式和變數等資訊，並將其顯示在控制檯中。如果我們重新定義了這個函式，我們就可以修改它的行為，並隱藏特定資訊或顯示偽造的資訊。
我們可以直接在DevTools中執行這個函式來了解其功能：
|
1 2 3 4 |
console.log("HelloWorld"); var fake = function() {}; window['console']['log']= fake; console.log("Youcan't see me!"); |
執行後我們將會看到：
|
1 |
VM48:1 Hello World |
你會發現第二條資訊並沒有顯示，因為我們重新定義了這個函式，即“禁用”了它原本的功能。但是我們也可以讓它顯示偽造的資訊。比如說這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
console.log("Normalfunction"); //First we save a reference to the original console.log function var original = window['console']['log']; //Next we create our fake function //Basicly we check the argument and if match we call original function with otherparam. // If there is no match pass the argument to the original function var fake = function(argument) { if (argument === "Ka0labs") { original("Spoofed!"); } else { original(argument); } } // We redefine now console.log as our fake function window['console']['log']= fake; //Then we call console.log with any argument console.log("Thisis unaltered"); //Now we should see other text in console different to "Ka0labs" console.log("Ka0labs"); //Aaaand everything still OK console.log("Byebye!"); |
如果一切正常的話：
|
1 2 3 4 |
Normal function VM117:11 This is unaltered VM117:9 Spoofed! VM117:11 Bye bye! |
實際上，為了控制程式碼的執行方式，我們還能夠以更加聰明的方式來修改函式的功能。比如說，我們可以基於上述程式碼來構建一個程式碼段，並重定義eval函式。我們可以把JavaScript程式碼傳遞給eval函式，接下來程式碼將會被計算並執行。如果我們重定義了這個函式，我們就可以執行不同的程式碼了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
//Just a normal eval eval("console.log('1337')"); //Now we repat the process... var original = eval; var fake = function(argument) { // If the code to be evaluated contains1337... if (argument.indexOf("1337") !==-1) { // ... we just execute a different code original("for (i = 0; i < 10;i++) { console.log(i);}"); } else { original(argument); } } eval= fake; eval("console.log('Weshould see this...')"); //Now we should see the execution of a for loop instead of what is expected eval("console.log('Too1337 for you!')"); |
執行結果如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
1337 VM146:1We should see this… VM147:10 VM147:11 VM147:12 VM147:13 VM147:14 VM147:15 VM147:16 VM147:17 VM147:18 VM147:19 |
正如之前所說的那樣，雖然這種方法非常巧妙，但這也是一種非常基礎和常見的方法，所以比較容易被檢測到。
二、斷點
為了幫助我們瞭解程式碼的功能，JavaScript除錯工具（例如DevTools）都可以通過設定斷點的方式阻止指令碼程式碼執行，而斷點也是程式碼除錯中最基本的了。
如果你研究過偵錯程式或者x86架構，你可能會比較熟悉0xCC指令。在JavaScript中，我們有一個名叫debugger的類似指令。當我們在程式碼中宣告瞭debugger函式後，指令碼程式碼將會在debugger指令這裡停止執行。比如說：
|
1 2 3 |
console.log("Seeme!"); debugger; console.log("Seeme!"); |
很多商業產品會在程式碼中定義一個無限迴圈的debugger指令，不過某些瀏覽器會遮蔽這種程式碼，而有些則不會。這種方法的主要目的就是讓那些想要除錯你程式碼的人感到厭煩，因為無限迴圈意味著程式碼會不斷地彈出視窗來詢問你是否要繼續執行指令碼程式碼：
|
1 |
setTimeout(function(){while (true) {eval("debugger") |
三、時間差異
這是一種從傳統反逆向技術那裡借鑑過來的基於時間的反除錯技巧。當指令碼在DevTools等工具環境下執行時，執行速度會非常慢（時間久），所以我們就可以根據執行時間來判斷指令碼當前是否正在被除錯。比如說，我們可以通過測量程式碼中兩個設定點之間的執行時間，然後用這個值作為參考，如果執行時間超過這個值，說明指令碼當前在偵錯程式中執行。
演示程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 |
set Interval(function(){ var startTime = performance.now(), check,diff; for (check = 0; check < 1000; check++){ console.log(check); console.clear(); } diff = performance.now() - startTime; if (diff > 200){ alert("Debugger detected!"); } },500); |
四、DevTools檢測（Chrome）
這項技術利用的是div元素中的id屬性，當div元素被髮送至控制檯（例如console.log(div)）時，瀏覽器會自動嘗試獲取其中的元素id。如果程式碼在呼叫了console.log之後又呼叫了getter方法，說明控制檯當前正在執行。
簡單的概念驗證程式碼如下：
|
1 2 3 4 5 6 7 8 9 |
let div = document.createElement('div'); let loop = setInterval(() => { console.log(div); console.clear(); }); Object.defineProperty(div,"id", {get: () => { clearInterval(loop); alert("Dev Tools detected!"); }}); |
五、隱式流完整性控制
當我們嘗試對程式碼進行反混淆處理時，我們首先會嘗試重新命名某些函式或變數，但是在JavaScript中我們可以檢測函式名是否被修改過，或者說我們可以直接通過堆疊跟蹤來獲取其原始名稱或呼叫順序。
arguments.callee.caller可以幫助我們建立一個堆疊跟蹤來儲存之前執行過的函式，演示程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function getCallStack() { var stack = "#", total = 0, fn =arguments.callee; while ( (fn = fn.caller) ) { stack = stack + "" +fn.name; total++ } return stack } function test1() { console.log(getCallStack()); } function test2() { test1(); } function test3() { test2(); } function test4() { test3(); } test4(); |
注意：原始碼的混淆程度越強，這個技術的效果就越好。
六、代理物件
代理物件是目前JavaScript中最有用的一個工具，這種物件可以幫助我們瞭解程式碼中的其他物件，包括修改其行為以及觸發特定環境下的物件活動。比如說，我們可以建立一個嗲哩物件並跟蹤每一次document.createElemen呼叫，然後記錄下相關資訊：
|
1 2 3 4 5 6 7 8 9 |
const handler = { // Our hook to keep the track apply: function (target, thisArg, args){ console.log("Intercepted a call tocreateElement with args: " + args); return target.apply(thisArg, args) } } document.createElement= new Proxy(document.createElement, handler) // Create our proxy object withour hook ready to intercept document.createElement('div'); |
接下來，我們可以在控制檯中記錄下相關引數和資訊：
|
1 |
VM64:3 Intercepted a call to createElement with args: div |
我們可以利用這些資訊並通過攔截某些特定函式來除錯程式碼，但是本文的主要目的是為了介紹反除錯技術，那麼我們如何檢測“對方”是否使用了代理物件呢？其實這就是一場“貓抓老鼠”的遊戲，比如說，我們可以使用相同的程式碼段，然後嘗試呼叫toString方法並捕獲異常：
|
1 2 3 4 5 6 |
//Call a "virgin" createElement: try { document.createElement.toString(); }catch(e){ console.log("I saw your proxy!"); } |
資訊如下：
|
1 |
"function createElement() { [native code] }" |
但是當我們使用了代理之後：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//Then apply the hook consthandler = { apply: function (target, thisArg, args){ console.log("Intercepted a call tocreateElement with args: " + args); return target.apply(thisArg, args) } } document.createElement= new Proxy(document.createElement, handler); //Callour not-so-virgin-after-that-party createElement try { document.createElement.toString(); }catch(e) { console.log("I saw your proxy!"); } |
沒錯，我們確實可以檢測到代理：
|
1 |
VM391:13 I saw your proxy! |
我們還可以新增toString方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const handler = { apply: function (target, thisArg, args){ console.log("Intercepted a call tocreateElement with args: " + args); return target.apply(thisArg, args) } } document.createElement= new Proxy(document.createElement, handler); document.createElement= Function.prototype.toString.bind(document.createElement); //Add toString //Callour not-so-virgin-after-that-party createElement try { document.createElement.toString(); }catch(e) { console.log("I saw your proxy!"); } |
現在我們就沒辦法檢測到了：
|
1 |
"function createElement() { [native code] }" |
就像我說的，這就是一場“貓抓老鼠“的遊戲。
總結
希望我所收集到的這些技巧可以對大家有所幫助，如果你有更好的技巧想跟大家分享，可以直接在文章下方的評論區留言，或者在Twitter上艾特我（@TheXC3LL）。