乐趣区

关于前端:如何禁止别人调试自己的前端代码

jiezi

很多时候，处于好奇或者其余的目标，咱们会关上 Chorme 的调试性能，会看到页面会调用很多接口，而后有心的人可能会应用这些接口进行爬虫剖析，破解后获取数据。为了 杜绝 这种状况，最简略的办法就是禁止人家调试本人的前端代码。

以下是几种常见的措施禁止人家调试本人的前端代码：

1，有限 debugger

前端页面避免调试的办法次要是通过一直 debugger 来疯狂输入断点，因为 debugger 在控制台被关上的时候就会执行。因为程序被 debugger 阻止，所以无奈进行断点调试，所以网页的申请也是看不到的。

以下是应用有限 debugger 形式阻止代码调试的示例：

/**
* 根底禁止调试代码
*/
(() => {function ban() {setInterval(() => {debugger;}, 50);
    }
    try {ban();
    } catch (err) {}})();

不过，如果仅仅是加上面那么简略的代码，对于一些技术人员而言作用不大。能够通过控制台中的 Deactivate breakpoints 按钮或者应用快捷键 Ctrl + F8 敞开有限 debugger。这种形式尽管能去掉碍眼的 debugger，然而无奈通过左侧的行号增加 breakpoint。

2，禁止断点的对策

如果将 setInterval 中的代码写在一行，就能禁止用户断点，即便增加 logpoint 为 false 也无用。当然即便有些人想到用左下角的格式化代码，将其变成多行也是没用的。

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

3，疏忽执行的代码

能够通过增加 add script ignore list 须要疏忽执行代码行或文件，也能够达到禁止有限 debugger。

不过，咱们能够通过将 debugger 改写成 Function(“debugger”)(); 的模式来应答，Function 结构器生成的 debugger 会在每一次执行时开启一个长期 js 文件。当然应用的时候，为了更加的平安，最好应用加密后的脚本。

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

4，终极加强防调试

为了让本人写进去的代码更加的艰涩难懂，须要对下面的代码再优化一下：将 Function(‘debugger’).call() 改成 (function(){return false;})’constructor'[‘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) {}})();

5，其余防调试技术

除此之外，咱们还能够通过【禁止右键菜单】、【禁止 F12 快捷键】、【检测开发者工具】等伎俩来禁止调试。

禁止右键菜单

禁止右键菜单是目前比拟常见的一种禁止调试的办法，因为浏览器默认右键菜单是能够调出开发者工具的。能够通过以下 JS 代码实现：

document.oncontextmenu = function () {return false;};

这样一来，当用户在富文本编辑器的区域内右键时，就不会弹出菜单，从而防止了用户调出开发者工具的状况。

禁止 F12 快捷键

F12 快捷键是关上开发者工具的罕用快捷键，禁止这个快捷键也是一种禁止调试的办法。能够通过以下 JS 代码实现：

document.onkeydown = function (e) {if (e.keyCode === 123) {return false;}
};

这样一来，当用户按下 F12 键时，就会被拦挡，从而防止了用户关上开发者工具的状况。

检测开发者工具

还有一种办法是通过检测开发者工具是否关上来实现禁止调试的目标，能够通过以下 JS 代码实现：

setInterval(function () {if (typeof console.clear !== 'undefined') {location.reload();
    }
}, 1000);

这段代码会每隔 1 秒检测一次以后页面是否关上了开发者工具，如果发现开发者工具曾经关上，则会刷新以后页面，从而防止用户应用开发者工具对页面进行调试。

退出移动版