禁止別人調(diào)試自己的前端頁面代碼
大廠技術(shù) 高級前端 Node進(jìn)階
點擊上方 程序員成長指北,關(guān)注公眾號
回復(fù)1,加入高級Node交流群
?? 為啥要禁止?
-
由于前端頁面會調(diào)用很多接口,有些接口會被別人爬蟲分析,破解后獲取數(shù)據(jù) -
為了 杜絕 這種情況,最簡單的方法就是禁止人家調(diào)試自己的前端代碼
?? 無限 debugger
-
前端頁面防止調(diào)試的方法主要是通過不斷 debugger來瘋狂輸出斷點,因為debugger在控制臺被打開的時候就會執(zhí)行 -
由于程序被 debugger阻止,所以無法進(jìn)行斷點調(diào)試,所以網(wǎng)頁的請求也是看不到的 -
基礎(chǔ)代碼如下:
/**
* 基礎(chǔ)禁止調(diào)試代碼
*/
(() => {
function ban() {
setInterval(() => {
debugger;
}, 50);
}
try {
ban();
} catch (err) { }
})();
?? 無限 debugger 的對策
-
如果僅僅是加上面那么簡單的代碼,對于一些技術(shù)人員而言作用不大 -
可以通過控制臺中的 Deactivate breakpoints按鈕或者使用快捷鍵Ctrl + F8關(guān)閉無限debugger -
這種方式雖然能去掉礙眼的 debugger,但是無法通過左側(cè)的行號添加breakpoint
?? 禁止斷點的對策
-
如果將 setInterval中的代碼寫在一行,就能禁止用戶斷點,即使添加logpoint為false也無用 -
當(dāng)然即使有些人想到用左下角的格式化代碼,將其變成多行也是沒用的
(() => {
function ban() {
setInterval(() => { debugger; }, 50);
}
try {
ban();
} catch (err) { }
})();
?? 忽略執(zhí)行的代碼
-
通過添加 add script ignore list需要忽略執(zhí)行代碼行或文件 -
也可以達(dá)到禁止無限 debugger
?? 忽略執(zhí)行代碼的對策
-
那如何針對上面操作的惡意用戶呢 -
可以通過將 debugger改寫成Function("debugger")();的形式來應(yīng)對 -
Function構(gòu)造器生成的debugger會在每一次執(zhí)行時開啟一個臨時js文件 -
當(dāng)然使用的時候,為了更加的安全,最好使用加密后的腳本
// 加密前
(() => {
function ban() {
setInterval(() => {
Function('debugger')();
}, 50);
}
try {
ban();
} catch (err) { }
})();
// 加密后
eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\b"+d(a)+"\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));
?? 終極增強(qiáng)防調(diào)試代碼
-
為了讓自己寫出來的代碼更加的晦澀難懂,需要對上面的代碼再優(yōu)化一下 -
將 Function('debugger').call()改成(function(){return false;})['constructor']('debugger')['call'](); -
并且添加條件,當(dāng)窗口外部寬高和內(nèi)部寬高的差值大于一定的值 ,我把 body里的內(nèi)容換成指定內(nèi)容 -
當(dāng)然使用的時候,為了更加的安全,最好加密后再使用
(() => {
function block() {
if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
document.body.innerHTML = "檢測到非法調(diào)試,請關(guān)閉后刷新重試!";
}
setInterval(() => {
(function () {
return false;
}
['constructor']('debugger')
['call']());
}, 50);
}
try {
block();
} catch (err) { }
})();
作者:極客飛兔
鏈接:https://juejin.cn/post/7262175454714626108
Node 社群
我組建了一個氛圍特別好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你對Node.js學(xué)習(xí)感興趣的話(后續(xù)有計劃也可以),我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
“分享、點贊、在看” 支持一下
評論
圖片
表情
