JS禁止web页面调试

news2025/3/4 10:47:42

前言

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

禁用右键菜单

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