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

前言

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

实现思绪：

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

效果如下：

具体开发如下所示：

• 封装工具函数
  

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

1. // 禁用浏览器debugger
2. export const disableDebugger = function () {
3.   const obj = Object.create(null);
4.   // 记录当前时间
5.   let t = Date.now();
6.   // 监听对象属性的获取
7.   Object.defineProperty(obj, "is_debugger", {
8.     get: () => {
9.       if (Date.now() - t > 50) {
10.         location.replace("about:blank");
11.       }
12.     },
13.   });
14.   if (window.timer) {
15.     clearInterval(window.timer);
16.   }
18.   window.timer = setInterval(() => {
19.     t = Date.now();
20.     (function debug() { })["constructor"]("debugger")();
21.     // 触发跳转
22.     console.log(obj.is_debugger);
23.   }, 100);
24. };

复制代码

• 方法调用
  

   在vue项目中，main.js 大概 app.vue 中直接调用，如许会在整个项目页面都可以实现debugger效果。

在更多项目中，我更多的加在路由拦截器中，如许可以方便一些页面的调试。
  监听键盘事件

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

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

复制代码

禁用右键菜单

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

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

复制代码

监听窗口大小变革

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

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

复制代码

使用第三方库‌

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

  后端验证‌

   除了前端的方法外，还可以通过后端验证来加强安全性。比方，定期发送哀求到服务器以查抄用户活动，假如检测到异常活动（如频仍打开控制台），可以接纳相应的步伐‌
  总结

   单纯的使用哪种方式，应该都不可以或许完全制止用户打开控制台进行代码的调试，结合起来，也只能说提高用户打开控制台调试的复杂程度。
更好的掩护数据的安全，还是给数据加密，大概使用其他更为安全的技能手段更好一下，这种我以为更有点情势主义，防技能差的，不防高的。哈哈
  参考资源

• 【百度AI】