浏览器之禁止打开控制台【F12】

前言

在有时我们的日常开发工作中，有些项目要求我们增加禁用控制台的要求，这种虽然很鸡肋，但是它确实存在，并且会让哈哈心里觉得很有成就感。
所以今天他来了。

无限debugger

实现思路：

• 打开控制台时，因为debugger原因阻断。
• 通过定时器无限调用生成debugger，使得页面一直处于断点中；
• 增加时效，超过时间点击跳转空白标签页。

效果如下：

具体开发如下所示：

• 封装工具函数

我们可以在函数的调用过程中增加自己需要的业务代码，比如角色白名单，路由白名单等。

// 禁用浏览器debugger
export const disableDebugger = function () {
  const obj = Object.create(null);
  // 记录当前时间
  let t = Date.now();
  // 监听对象属性的获取
  Object.defineProperty(obj, "is_debugger", {
    get: () => {
      if (Date.now() - t > 50) {
        location.replace("about:blank");
      }
    },
  });
  if (window.timer) {
    clearInterval(window.timer);
  }

  window.timer = setInterval(() => {
    t = Date.now();
    (function debug() { })["constructor"]("debugger")();
    // 触发跳转
    console.log(obj.is_debugger);
  }, 100);
};

• 方法调用

在vue项目中，main.js 或者 app.vue 中直接调用，这样会在整个项目页面都可以实现debugger效果。

在更多项目中，我更多的加在路由拦截器中，这样可以方便一些页面的调试。

监听键盘事件

通过JavaScript监听键盘的特定按键组合，如F12、Ctrl+Shift+I等，这些组合键通常用于打开浏览器的开发者工具。当检测到这些按键被按下时，阻止其默认行为。

document.addEventListener("keydown", e => {
    if (e.keyCode === 123 || e.ctrlKey && e.shiftKey && e.keyCode === 67 || e.ctrlKey && e.shiftKey && e.keyCode === 73 || e.ctrlKey && e.keyCode === 85) {
        e.preventDefault();
    }
});

禁用右键菜单

通过监听contextmenu事件并阻止其默认行为，可以防止用户通过右键菜单中的选项来打开控制台

document.addEventListener("contextmenu", e => e.preventDefault());

监听窗口大小变化

通过监听resize事件，并检查浏览器窗口的外部宽度和内部宽度的差异，可以推测控制台是否被打开。

window.addEventListener('resize', function() {
 ...
});

使用第三方库‌

第三方库如【console-ban】https://www.npmjs.com/package/console-ban可以帮助你更容易地实现阻止打开控制台的功能。

后端验证‌

除了前端的方法外，还可以通过后端验证来增强安全性。例如，定期发送请求到服务器以检查用户行为，如果检测到异常行为（如频繁打开控制台），可以采取相应的措施‌

总结

单纯的使用哪种方式，应该都不能够完全阻止用户打开控制台进行代码的调试，结合起来，也只能说提高用户打开控制台调试的复杂程度。
更好的保护数据的安全，还是给数据加密，或者使用其他更为安全的技术手段更好一下，这种我觉得更有点形式主义，防技术差的，不防高的。哈哈

参考资源

• 【百度AI】💯
• 【console-ban】https://www.npmjs.com/package/console-ban