JS禁止web页面调试

前言

由于前端在页面渲染的过程中 会调用很多后端的接口，而有些接口是不希望别人看到的，所以前端调用后端接口的行为动作就需要做一个隐藏。

禁用右键菜单 document.oncontextmenu = function() { console.log("禁用右键菜单"); return false; }; 禁用F12 document.onkeydown = document.onkeyup = document.onkeypress = function(event) { let e = event || window.event || arguments.callee.caller.arguments[0]; if (e && e.keyCode == 123) { e.returnValue = false; return false; } }; 禁用开发者工具

实际开发中有多少实现方案，这里我们使用的是 无限debugger

大概实现思路：

因为 debugger; 打断点代码 只有在 控制台被打开的时候 才会执行。 所以 写一个无限debugger， 当控制台被打开时，程序被 debugger 阻止， 故而 网页的请求也是看不到的，也 无法进行 手打断点调试。

基础版 (() => { function ban() { setInterval(() => { debugger; }, 50); } try { ban(); } catch (err) { } })(); 增强版

Function 构造器生成的 debugger 会在每一次执行时开启一个 临时 js 文件。

(() => { function ban() { setInterval(() => { Function('debugger')(); }, 50); } try { ban(); } catch (err) { } })(); 终极版

1、提升 增强版 的写法

将 Function('debugger')(); 改写为： (function () { return false; } ['constructor']('debugger') ['call']());

2、在 增强版 的基础上 加上 DOM尺寸判断，进而 检测 控制台是否被打开

(() => { function block() { // 控制台的 高度 或者 宽度 大于 200px时 则 满足条件 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) { } })();

说句题外话： 写到这 突然想到一句对于程序员来说很搞笑的话： 一个Bug是Bug， 一堆Bug能work。 当然，我们的目标就是消灭每一个Bug！！！加油