為啥要禁止？

由于前端頁面會調用很多接口，有些接口會被別人爬蟲分析，破解后獲取數據

為了杜絕這種情況，最簡單的方法就是禁止人家調試自己的前端代碼

無限 debugger

前端頁面防止調試的方法主要是通過不斷debugger來瘋狂輸出斷點，因為debugger在控制臺被打開的時候就會執行

由于程序被debugger阻止，所以無法進行斷點調試，所以網頁的請求也是看不到的

基礎代碼如下：

/** * 基礎禁止調試代碼 */ (() => { function ban() { setInterval(() => { debugger; }, 50); } try { ban(); } catch (err) { } })();

無限 debugger 的對策

如果僅僅是加上面那么簡單的代碼，對于一些技術人員而言作用不大

可以通過控制臺中的Deactivate breakpoints按鈕或者使用快捷鍵Ctrl + F8關閉無限debugger

這種方式雖然能去掉礙眼的debugger，但是無法通過左側的行號添加breakpoint

禁止斷點的對策

如果將setInterval中的代碼寫在一行，就能禁止用戶斷點，即使添加logpoint為false也無用

當然即使有些人想到用左下角的格式化代碼，將其變成多行也是沒用的

(() => {
  function ban() {
    setInterval(() => { debugger; }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();

忽略執行的代碼

通過添加add script ignore list需要忽略執行代碼行或文件

也可以達到禁止無限debugger

忽略執行代碼的對策

那如何針對上面操作的惡意用戶呢

可以通過將debugger改寫成Function("debugger")();的形式來應對

Function構造器生成的debugger會在每一次執行時開啟一個臨時js文件

當然使用的時候，為了更加的安全，最好使用加密后的腳本

javascript

復制代碼

// 加密前 (() => { 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(""+d(a)+"","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,{}));

終極增強防調試代碼

為了讓自己寫出來的代碼更加的晦澀難懂，需要對上面的代碼再優化一下

將Function('debugger').call()改成(function(){return false;})['constructor']('debugger')['call']();

并且添加條件，當窗口外部寬高和內部寬高的差值大于一定的值 ，我把body里的內容換成指定內容

當然使用的時候，為了更加的安全，最好加密后再使用

(() => { function block() { if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) { document.body.innerHTML = "檢測到非法調試,請關閉后刷新重試!"; } setInterval(() => { (function () { return false; } ['constructor']('debugger') ['call']()); }, 50); } try { block(); } catch (err) { } })();

審核編輯：彭菁