当前位置：首页 > news >正文

JS禁止web页面调试

news 2025/8/29 2:11:45

前言

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

禁用右键菜单

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) { }
})();