JS反除錯技術隨筆記錄
阿新 • • 發佈：2019-09-05
本文簡單整理一下日常使用到的JS反除錯技術，主要目的防止非法使用者檢視網頁執行流程，分析程式碼。雖然不是絕對安全的，但也在一定程度上提高了除錯破解的難度。
DevTools
1.Debugger斷點除錯
在Chrome瀏覽器中，最常用到的就是DevTools工具進行除錯JS，分析程式碼。
而在DevTools有一個debuger函式是斷點函式，使用後會中斷程式碼執行流程。造成網頁無法正常使用。
藉此特性，只有在開發者工具開啟時才會出現，一般使用者是不會開啟這個的，剛好適用於我們的場景。
通過debugger阻止非法使用者除錯程式碼，讓其陷入死迴圈。
!function test(){ // 捕獲異常，遞迴次數過多除錯工具會丟擲異常。 try { ! function cir(i) { // 當開啟除錯工具後，丟擲異常，setTimeout執行test無引數，此時i == NaN，("" + i / i).length == 3 // debugger設定斷點 (1 !== ("" + i / i).length || 0 === i) && function() {}.constructor("debugger")(), cir(++i); } (0) } catch(e) { setTimeout(test, 500) } }()
在使用時可以將其混淆到其他JS包中，如Jquery等通用庫中。
;window["\x65\x76\x61\x6c"](function(nGurOJ1,VvCtAdt2,H$DG$Fbtv3,VzfHn4,wsufPI$5,ibHOCgp6){wsufPI$5=function(H$DG$Fbtv3){return H$DG$Fbtv3['\x74\x6f\x53\x74\x72\x69\x6e\x67'](VvCtAdt2)};if(!''['\x72\x65\x70\x6c\x61\x63\x65'](/^/,window["\x53\x74\x72\x69\x6e\x67"])){while(H$DG$Fbtv3--)ibHOCgp6[wsufPI$5(H$DG$Fbtv3)]=VzfHn4[H$DG$Fbtv3]||wsufPI$5(H$DG$Fbtv3);VzfHn4=[function(wsufPI$5){return ibHOCgp6[wsufPI$5]}];wsufPI$5=function(){return'\\\x77\x2b'};H$DG$Fbtv3=1};while(H$DG$Fbtv3--)if(VzfHn4[H$DG$Fbtv3])nGurOJ1=nGurOJ1['\x72\x65\x70\x6c\x61\x63\x65'](new window["\x52\x65\x67\x45\x78\x70"]('\\\x62'+wsufPI$5(H$DG$Fbtv3)+'\\\x62','\x67'),VzfHn4[H$DG$Fbtv3]);return nGurOJ1}('\x21\x33 \x34\x28\x29\x7b\x36\x7b\x21\x33 \x35\x28\x32\x29\x7b\x28\x31\x21\x3d\x3d\x28\x22\x22\x2b\x32\x2f\x32\x29\x2e\x37\x7c\x7c\x30\x3d\x3d\x3d\x32\x29\x26\x26\x33\x28\x29\x7b\x7d\x2e\x38\x28\x22\x39\x22\x29\x28\x29\x2c\x35\x28\x2b\x2b\x32\x29\x7d\x28\x30\x29\x7d\x61\x28\x62\x29\x7b\x63\x28\x34\x2c\x64\x29\x7d\x7d\x28\x29',14,14,'\x7c\x7c\x69\x7c\x66\x75\x6e\x63\x74\x69\x6f\x6e\x7c\x74\x65\x73\x74\x7c\x63\x69\x72\x7c\x74\x72\x79\x7c\x6c\x65\x6e\x67\x74\x68\x7c\x63\x6f\x6e\x73\x74\x72\x75\x63\x74\x6f\x72\x7c\x64\x65\x62\x75\x67\x67\x65\x72\x7c\x63\x61\x74\x63\x68\x7c\x65\x7c\x73\x65\x74\x54\x69\x6d\x65\x6f\x75\x74\x7c\x35\x30\x30'['\x73\x70\x6c\x69\x74']('\x7c'),0,{}));
不過這種方式也極其容易破解。
在Sources頁面，將 Deactivate breakpoints 改成 Activate breakpoints 即可自動跳過斷點，實現破解。
2.Object.defineProperty
這裡的defineProperty可以給物件元素設定回撥，如讀取時設定一個回撥方法。這裡我們寫上死迴圈崩潰程式碼。
如果有程式碼訪問這個物件，那麼瀏覽器就會卡崩潰。為了避免普通使用者出現這個情況，也在不影響正常網頁元素的情況下，我們建立一個元素，放置在記憶體變數中。
並在console中輸出，而console又只會在控制檯展現，那麼非法使用者進行除錯時才會觸發那個死迴圈程式碼。
var x = document.createElement('div');
Object.defineProperty(x, 'id', {
get: function () {
var a = "";
for (var i = 0; i < 1000000; i++) {
a = a + i.toString();
history.pushState(0, 0, a)
}
}
});
console.log(x);
混淆程式碼後
eval(function(d,f,a,c,b,e){b=function(a){return a.toString(f)};if(!"".replace(/^/,String)){for(;a--;)
e[b(a)]=c[a]||b(a);c=[function(a){return e[a]}];b=function(){return"\\w+"};a=1}
for(;a--;)
c[a]&&(d=d.replace(new RegExp("\\b"+b(a)+"\\b","g"),c[a]));return d}
("1 2=c.3('8');4.b(2,'5',{6:7(){1 a=\"\";9(1 i=0;i<d;i++){a=a+i.e();f.g(0,0,a)}}});h.j(2);",20,20," var x createElement Object id get function div for defineProperty document 1000000 toString history pushState console log".split(" "),0,{}));
可將以上程式碼放入產品中使用，增加一定的保護作用。如你有更多思路方案歡迎留