JavaScript安全加密之禁止別人調(diào)試自己的前端頁(yè)面代碼實(shí)現(xiàn)

更新時(shí)間：2023年08月06日 16:28:05 作者：極客飛兔

這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁(yè)面代碼實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

?? 為啥要禁止？

由于前端頁(yè)面會(huì)調(diào)用很多接口，有些接口會(huì)被別人爬蟲(chóng)分析，破解后獲取數(shù)據(jù)
為了杜絕這種情況，最簡(jiǎn)單的方法就是禁止人家調(diào)試自己的前端代碼

?? 無(wú)限 debugger

前端頁(yè)面防止調(diào)試的方法主要是通過(guò)不斷 debugger 來(lái)瘋狂輸出斷點(diǎn)，因?yàn)?nbsp;debugger 在控制臺(tái)被打開(kāi)的時(shí)候就會(huì)執(zhí)行
由于程序被 debugger 阻止，所以無(wú)法進(jìn)行斷點(diǎn)調(diào)試，所以網(wǎng)頁(yè)的請(qǐng)求也是看不到的
基礎(chǔ)代碼如下：

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

?? 無(wú)限 debugger 的對(duì)策

如果僅僅是加上面那么簡(jiǎn)單的代碼，對(duì)于一些技術(shù)人員而言作用不大
可以通過(guò)控制臺(tái)中的 Deactivate breakpoints 按鈕或者使用快捷鍵 Ctrl + F8 關(guān)閉無(wú)限 debugger
這種方式雖然能去掉礙眼的 debugger，但是無(wú)法通過(guò)左側(cè)的行號(hào)添加 breakpoint

?? 禁止斷點(diǎn)的對(duì)策

如果將 setInterval 中的代碼寫(xiě)在一行，就能禁止用戶斷點(diǎn)，即使添加 logpoint 為 false 也無(wú)用
當(dāng)然即使有些人想到用左下角的格式化代碼，將其變成多行也是沒(méi)用的

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

?? 忽略執(zhí)行的代碼

通過(guò)添加 add script ignore list 需要忽略執(zhí)行代碼行或文件
也可以達(dá)到禁止無(wú)限 debugger

?? 忽略執(zhí)行代碼的對(duì)策

那如何針對(duì)上面操作的惡意用戶呢
可以通過(guò)將 debugger 改寫(xiě)成 Function("debugger")(); 的形式來(lái)應(yīng)對(duì)
Function 構(gòu)造器生成的 debugger 會(huì)在每一次執(zhí)行時(shí)開(kāi)啟一個(gè)臨時(shí) js 文件
當(dāng)然使用的時(shí)候，為了更加的安全，最好使用加密后的腳本

// 加密前
(() => {
  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)試代碼

為了讓自己寫(xiě)出來(lái)的代碼更加的晦澀難懂，需要對(duì)上面的代碼再優(yōu)化一下
將 Function('debugger').call() 改成 (function(){return false;})['constructor']('debugger')['call']();
并且添加條件，當(dāng)窗口外部寬高和內(nèi)部寬高的差值大于一定的值，我把 body 里的內(nèi)容換成指定內(nèi)容
當(dā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) { }
})();