在這篇文章中，我打算跟大家總結一下關於JavaScript反調試技巧方面的內容。值得一提的是，其中有些方法已經被網路犯罪分子廣泛應用到惡意軟體之中了,需要的朋友可以參考下
在此之前，我一直都在研究JavaScript相關的反調試技巧。但當我在網路上搜尋相關資料時，我發現網路上並沒有太多關於這方面的文章，而且就算有也是非常不完整的那種。所以在這篇文章中，我打算跟大家總結一下關於JavaScript反調試技巧方面的內容。值得一提的是，其中一些方法已經被網路犯罪者廣泛應用到惡意軟體之中了。
對JavaScript來說，只需要花一點時間進行除錯和分析，你就能夠了解到JavaScript程式碼片段的功能邏輯。而我們所要討論的內容，可以為那些想要分析你JavaScript程式碼的人增加一定的難度。不過我們的技術跟程式碼混淆無關，我們主要針對的是如何為程式碼主動調試增加困難。
本文所要介紹的技術方法大致如下：
1. 偵測未知的執行環境（我們的程式碼只想在瀏覽器中執行）;
#2.偵測除錯工具（例如DevTools）；
3. 程式碼完整性控制；
4. 流完整性控制；
5.反模擬;
#簡而言之，如果我們偵測到了「不正常」的情況，程式的運作流程將會改變，並跳到偽造的程式碼區塊，並「隱藏」真正的功能程式碼。
一、函數重定義
這是一個最基本、最常用的程式碼反偵錯技術了。在JavaScript中，我們可以對用於收集資訊的函數進行重新定義。比如說，console.log()函數可以用來收集函數和變數等信息，並將其顯示在控制台中。如果我們重新定義了這個函數，我們就可以修改它的行為，並隱藏特定資訊或顯示偽造的資訊。
我們可以直接在DevTools中執行這個函數來了解其功能：
console.log("HelloWorld");
var fake = function() {};
window['console']['log']= fake;
console.log("Youcan't see me!");運行後我們將會看到：
VM48:1 Hello World
你會發現第二個資訊並沒有顯示，因為我們重新定義了這個函數，也就是「停用」了它原本的功能。但是我們也可以讓它顯示偽造的訊息。比如說這樣：
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!");如果一切正常的話：
Normal function
VM117:11 This is unaltered
VM117: 9 Spoofed!
VM117:11 Bye bye!
實際上，為了控製程式碼的執行方式，我們也能夠以更聰明的方式來修改函數的功能。比如說，我們可以基於上述程式碼來建立一個程式碼段，並重定義eval函數。我們可以把JavaScript程式碼傳遞給eval函數，接下來程式碼將會被計算並執行。如果我們重定義了這個函數，我們就可以運行不同的程式碼了：
//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!')");運行結果如下：
#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指令這裡停止運作。比如說：
console.log("Seeme!");
debugger;
console.log("Seeme!");很多商業產品會在程式碼中定義一個無限迴圈的debugger指令，不過某些瀏覽器會封鎖這種程式碼，而有些則不會。這種方法的主要目的就是讓那些想要偵錯你程式碼的人感到厭煩，因為無限循環意味著程式碼會不斷地彈出視窗來詢問你是否要繼續執行腳本程式碼：
setTimeout(function(){while (true) {eval("debugger")三、時間差異
這是一種從傳統反逆向技術那裡借鑒過來的基於時間的反調試技巧。當腳本在DevTools等工具環境下執行時，運行速度會非常慢（時間久），所以我們可以根據運行時間來判斷腳本目前是否正在被調試。比方說，我們可以透過測量程式碼中兩個設定點之間的運行時間，然後用這個值作為參考，如果運行時間超過這個值，說明腳本目前在偵錯器中運行。
示範程式碼如下：
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）
这项技术利用的是p元素中的id属性，当p元素被发送至控制台（例如console.log(p)）时，浏览器会自动尝试获取其中的元素id。如果代码在调用了console.log之后又调用了getter方法，说明控制台当前正在运行。
简单的概念验证代码如下：
let p = document.createElement('p');
let loop = setInterval(() => {
console.log(p);
console.clear();
});
Object.defineProperty(p,"id", {get: () => {
clearInterval(loop);
alert("Dev Tools detected!");
}});五、隐式流完整性控制
当我们尝试对代码进行反混淆处理时，我们首先会尝试重命名某些函数或变量，但是在JavaScript中我们可以检测函数名是否被修改过，或者说我们可以直接通过堆栈跟踪来获取其原始名称或调用顺序。
arguments.callee.caller可以帮助我们创建一个堆栈跟踪来存储之前执行过的函数，演示代码如下：
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调用，然后记录下相关信息：
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('p');接下来，我们可以在控制台中记录下相关参数和信息：
VM64:3 Intercepted a call to createElement with args: p
我们可以利用这些信息并通过拦截某些特定函数来调试代码，但是本文的主要目的是为了介绍反调试技术，那么我们如何检测“对方”是否使用了代理对象呢？其实这就是一场“猫抓老鼠”的游戏，比如说，我们可以使用相同的代码段，然后尝试调用toString方法并捕获异常：
//Call a "virgin" createElement:
try {
document.createElement.toString();
}catch(e){
console.log("I saw your proxy!");
}信息如下：
"function createElement() { [native code] }"但是当我们使用了代理之后：
//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!");
}没错，我们确实可以检测到代理：
VM391:13 I saw your proxy!
我们还可以添加toString方法：
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!");
}现在我们就没办法检测到了：
"function createElement() { [native code] }"就像我说的，这就是一场“猫抓老鼠“的游戏。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
iview table render集成switch开关的实例
以上是js經驗分享 JavaScript反調試技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
