前端限制用户打开浏览器控制台

作者：微信小助手

发布时间：2025-07-11T21:13:36

前端代码对于有技术能力的人来说，都是开放的。只要肯下功夫都能获取到业务逻辑代码。因此前端防护只能是增加反编译难度，例如代码混淆，或者防止打开浏览器控制台。今天讲一下目前已知的限制用户打开浏览器控制台。
1、禁用F12和右键（基础防护） 
// 禁用右键菜单document.addEventListener('contextmenu', e => e.preventDefault());
// 禁用F12、Ctrl+Shift+I等快捷键document.addEventListener('keydown', e => {  if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {    e.preventDefault();  }});

❌ 缺点：用户仍可通过浏览器菜单栏打开开发者工具。

2、检测窗口变化 
// 利用窗口大小变化检测DevToolswindow.addEventListener('resize', () => {  if (window.outerWidth - window.innerWidth > 100   || window.outerHeight - window.innerHeight > 100) {    alert("检测到开发者工具！");    window.close(); // 尝试关闭窗口  }});

❌ 缺点：

  • 全屏切换时的尺寸变化可能被误判;

  • 独立打开控制台页面时无法监听到;

3、无限Debugger
 
setInterval(() => {  (function (a) {    return (function (a) {      return Function('Function(arguments[0]+"' + a + '")()');    })(a);  })("bugger")("de", 0, 0, (0, 0));}, 1000);

❌ 缺点：用户可禁用断点（Deactivate breakpoints）绕过

4、检测控制台打开并跳转/弹窗 
// 利用debugger检测控制台是否打开setInterval(() => {  const start = Date.now();  debugger;  if (Date.now() - start > 100) {    alert("禁止调试！");    window.location.href = "about:blank"; // 跳转空白页  }}, 1000);

❌ 缺点：

  • 用户可禁用断点（Deactivate breakpoints）绕过。

优化


// 利用console.table在控制台打开时耗费时间更长检测控制台是否打开function initData() {  for (    var o = (function () {        for (var w = {}, D = 0; D < 500; D++) w["".concat(D)] = "".concat(D);        return w;      })(),i = [],c = 0;c < 50;c++) i.push(o);  return i;}let largeObjectArray = initData()setInterval(() => {  const start = Date.now();  console.table(largeObjectArray)  if (Date.now() - start > 100) {    window.location.href = "about:blank"; // 跳转空白页  }}, 1000);

❌ 缺点：

  • 用户可重写console.table方法跳过。
结语

网站安全不能只依赖前端技术，前端只能“防君子不防小人”。有一定技术能力的用户都可以绕过前端防护，并反编译前端代码。还是得靠后端服务来确保网站的安全。

关注公众号，获取更多前端技术问题。动动小手，点个赞吧