溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“web前端頁(yè)面怎么禁止別人調(diào)試”，在日常操作中，相信很多人在web前端頁(yè)面怎么禁止別人調(diào)試問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”web前端頁(yè)面怎么禁止別人調(diào)試”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
我們都知道 debugger 在控制臺(tái)被打開(kāi)的時(shí)候就會(huì)執(zhí)行， 前端頁(yè)面防止調(diào)試的方法主要是通過(guò)不斷 debugger 來(lái)瘋狂輸出斷點(diǎn)，讓控制臺(tái)打開(kāi)后程序就無(wú)法正常執(zhí)行，以下是一個(gè)基本防止調(diào)式的代碼：
(() => {
function block() {
setInterval(() => {
debugger;
}, 50);
}
try {
block();
} catch (err) {}
})();
這里需要說(shuō)明以下幾點(diǎn)：
1. 程序被 debugger 阻止了，我們無(wú)法像以往一樣在 Source Tab 中的對(duì)應(yīng) JS 代碼處添加斷點(diǎn)調(diào)試，無(wú)法調(diào)試程序的執(zhí)行邏輯。
2. 當(dāng)我們打開(kāi)控制臺(tái)就會(huì)出被 debugger 阻止，所以想通過(guò) network tab 來(lái)查看網(wǎng)頁(yè)都做了哪些請(qǐng)求也是看不到的。
遇到防止調(diào)試我們可以禁止斷點(diǎn)，在 Chrome 控制臺(tái)的 Source Tab 頁(yè)點(diǎn)擊 Deactivate breakpoints 按鈕或者按下 Ctrl + f8。
操作動(dòng)畫(huà)效果如下所示：
注意：上面的解決方法并沒(méi)有幫我們解決根本問(wèn)題，我們需要做的是調(diào)試，上面雖然把 debugger 都去掉了，但是我們也無(wú)法在通過(guò)點(diǎn)擊每一行代碼左邊的行號(hào)添加 breakpoint 了，所以根本性的問(wèn)題并沒(méi)有解決，只是去除了那礙眼的瘋狂 debugger。
如何防止惡意用戶(hù)禁止斷點(diǎn)呢？
將 setInterval(() =>{ debugger;},50); 寫(xiě)在一行中，你即使通過(guò)添加 logpoint 為 false 也沒(méi)用，仍然是瘋狂 debugger，即使你可能想到通過(guò)左下角的代碼格式化來(lái)格式一下setInterval(() => {debugger;}, 50); 將它變成多行的也是沒(méi)用，仍然會(huì)在刷新后重新彈 debugger。
(() => {
function block() {
setInterval(() => {debugger;}, 50);
}
try {
block();
} catch (err) {}
})();在對(duì)應(yīng)的代碼行添加logpoint為 false，然后按回車(chē)后刷新網(wǎng)頁(yè)，發(fā)現(xiàn)成功跳過(guò)無(wú)限 debugger，于是我們就可以愉快的自由調(diào)試了。
對(duì)應(yīng)的還有一種方法，即通過(guò)來(lái)添加 add script ignore list 需要忽略執(zhí)行代碼行或文件。
如果想恢復(fù)初始狀態(tài)，可以通過(guò)刪除 script ignore list 里已添加的忽略代碼。
針對(duì)這種操作如何防止惡意用戶(hù)呢？
我們可以通過(guò)將debugger改寫(xiě)成 Function("debugger")(); 的形式來(lái)應(yīng)對(duì)，F(xiàn)unction 構(gòu)造器生成的 debugger 會(huì)在每一次執(zhí)行時(shí)開(kāi)啟一個(gè)臨時(shí) js 文件，代碼改造如下所示：
(() => {
function block() {
setInterval(() => {
Function("debugger")();
}, 50);
}
try {
block();
} catch (err) {}
})();
上面的代碼由于沒(méi)有加密混淆，多少可能還是會(huì)被別人讀懂一些，我們可以嘗試對(duì)代碼進(jìn)行加密混淆，如下所示：
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,{}));
為了讓對(duì)方盡量的難以識(shí)別我們的代碼，我們將Function("debugger").call()改成 (function(){return false;})["constructor"]("debugger")["call"](); 并且添加條件，當(dāng)窗口外部寬高和內(nèi)部寬高的差值大于一定的值 ，我把 body 里的內(nèi)容全部清空掉。
操作動(dòng)畫(huà)如下所示：
下面附上這份未混淆的來(lái)之不易的的代碼，你可以把它當(dāng)作工具函數(shù)，在需要不讓別人調(diào)試的項(xiàng)目中引用，使用時(shí)記得加密混淆。
(() => {
function block() {
if (window.outerHeight - window.innerHeight > 200 ||window.outerWidth - window.innerWidth > 200) {
document.body.innerHTML ="檢測(cè)到非法調(diào)試,請(qǐng)關(guān)閉后刷新重試!";
}
setInterval(() => {
(function () {
return false;
}
["constructor"]("debugger")
["call"]());
}, 50);
}
try {
block();
} catch (err) {}
})();通過(guò)給 style 標(biāo)簽添加 style="display: block",contenteditable 兩個(gè)屬性實(shí)現(xiàn)在頁(yè)面中便捷的調(diào)試樣式。
復(fù)制下方代碼到你的 html 文件中，建議試試。
<!DOCTYPE html>
<body>
<div>來(lái)調(diào)試我吧~</div>
<style contenteditable>
body {
background-color: rgb(140, 209, 230);
color: white;
}
div {
background-color: green;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
}
</style>
</body>到此，關(guān)于“web前端頁(yè)面怎么禁止別人調(diào)試”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼