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

前言

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

所以今天他来了。

文章目录

• • 前言
  • 无限debugger
  • • 实现思路：
    • 效果如下：
    • 具体开发如下所示：
    • 监听键盘事件
    • 禁用右键菜单
    • 监听窗口大小变化
    • 使用第三方库‌
    • 后端验证‌
    • 总结
    • 参考资源

      无限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