禁用浏览器debugger

禁用浏览器 Debugger 使用说明

保护前端代码逻辑，防止通过浏览器 DevTools 调试器逆向分析业务流程。

---

目录

1. 背景与目的
2. 核心原理
3. 基础方案
   • 3.1 debugger 反调试陷阱
   • 3.2 禁用 console 输出
4. 进阶方案
   • 4.1 定时检测 DevTools 状态
   • 4.2 debugger 时间差检测
   • 4.3 重写原生函数检测
   • 4.4 Worker 后台检测线程
5. 完整集成示例
6. 局限性与注意事项

---

1. 背景与目的

场景	说明
接口加密逻辑保护	防止他人通过断点调试还原签名算法
防止业务流程绕过	避免通过控制台直接修改变量跳过校验
逆向成本提升	增加分析者的时间与精力成本

重要提示： 前端代码在客户端运行，任何保护措施都无法做到 100% 安全。本方案的目标是提高逆向门槛，而非实现绝对防护。

---

2. 核心原理

浏览器 DevTools 打开后，以下行为会发生变化，可被 JavaScript 感知：

• debugger 语句执行耗时：DevTools 打开时会触发断点暂停，执行时间远大于关闭时
• console 对象属性变化：部分浏览器在打开 DevTools 后会改变 console 对象的尺寸属性
• 窗口尺寸异常：DevTools 的停靠模式会改变 window.outerWidth/Height 与 innerWidth/Height 的差值
• 调试器可被注入：通过高频插入 debugger 语句，让调试者无法正常单步执行

---

3. 基础方案

3.1 debugger 反调试陷阱

在关键代码路径中插入 debugger 语句。当 DevTools 打开时，执行会在此处暂停，干扰调试者操作。

// 方式一：直接插入
function encrypt(data) {
  debugger; // DevTools 打开时会在此暂停
  // ... 加密逻辑
}

// 方式二：高频定时器注入，使调试器被持续中断
setInterval(() => {
  debugger;
}, 100);

3.2 禁用 console 输出

清空或劫持 console 方法，防止敏感信息泄露到控制台。

(function disableConsole() {
  const noop = () => {};

  const methods = [
    'log', 'warn', 'error', 'info', 'debug',
    'table', 'trace', 'dir', 'dirxml', 'group',
    'groupCollapsed', 'groupEnd', 'clear',
    'count', 'countReset', 'assert', 'profile',
    'profileEnd', 'time', 'timeLog', 'timeEnd'
  ];

  methods.forEach(method => {
    console[method] = noop;
  });

  // 防止通过重赋值恢复：冻结 console 对象
  Object.freeze(console);
})();

4. 进阶方案

4.1 定时检测 DevTools 状态

通过定时检测窗口尺寸差异来判断 DevTools 是否打开。当 DevTools 以停靠模式打开时，window.outerWidth 和 window.innerWidth 的差值会明显增大。

function detectDevTools() {
  const threshold = 160;
  const widthThreshold = window.outerWidth - window.innerWidth > threshold;
  const heightThreshold = window.outerHeight - window.innerHeight > threshold;

  if (widthThreshold || heightThreshold) {
    console.clear();
    alert('检测到开发者工具，页面功能受限');
    // 可选：重定向或禁用核心功能
    window.location.href = 'about:blank';
  }
}

setInterval(detectDevTools, 1000);

4.2 debugger 时间差检测

利用 debugger 语句在 DevTools 打开时会暂停执行的特性，通过测量执行时间差来检测调试状态。

function detectByTiming() {
  const start = performance.now();
  debugger; // DevTools 打开时，这里会暂停
  const end = performance.now();

  // 如果时间差超过阈值，说明 debugger 被触发过
  if (end - start > 100) {
    console.log('DevTools 检测：debugger 执行时间异常');
    // 执行防护逻辑
  }
}

// 高频检测
setInterval(detectByTiming, 500);

4.3 重写原生函数检测

调试者常常通过重写原生函数（如 fetch、XMLHttpRequest）来拦截请求。可以通过检测这些函数是否被篡改来判断。

function checkNativeFunction() {
  const nativeFetch = window.fetch;
  const nativeXHR = window.XMLHttpRequest;

  setInterval(() => {
    if (window.fetch !== nativeFetch) {
      console.warn('fetch 被重写');
      // 恢复或告警
    }
    if (window.XMLHttpRequest !== nativeXHR) {
      console.warn('XMLHttpRequest 被重写');
    }
  }, 2000);
}

checkNativeFunction();

4.4 Worker 后台检测线程

利用 Web Worker 在独立线程中运行检测逻辑，避免被主线程的调试操作干扰。

// anti-debug.worker.js
self.onmessage = function () {
  let count = 0;
  const start = Date.now();

  function check() {
    count++;
    const elapsed = Date.now() - start;
    // 正常情况下 count 和 elapsed 应该同步增长
    // 如果 DevTools 打断点，elapsed 会远大于 count
    if (elapsed > count * 100 + 200) {
      self.postMessage({ detected: true });
    }
  }

  setInterval(check, 100);
};

// 主线程中使用
const worker = new Worker('anti-debug.worker.js');
worker.onmessage = (e) => {
  if (e.data.detected) {
    console.log('Worker 检测到调试行为');
  }
};

---

5. 完整集成示例

将上述方案整合为一个可复用的模块：

/**
 * AntiDebug - 前端反调试工具集
 */
const AntiDebug = {
  enabled: true,

  // 初始化所有检测
  init(options = {}) {
    if (!this.enabled) return;

    const config = {
      detectDevTools: true,
      disableConsole: true,
      timingDetection: true,
      redirectOnDetect: false,
      redirectUrl: 'about:blank',
      ...options
    };

    if (config.disableConsole) {
      this.disableConsole();
    }

    if (config.detectDevTools) {
      this.startDevToolsDetection(config.redirectOnDetect, config.redirectUrl);
    }

    if (config.timingDetection) {
      this.startTimingDetection();
    }
  },

  // 禁用 console
  disableConsole() {
    const noop = () => {};
    ['log', 'warn', 'error', 'info', 'debug', 'table', 'trace']
      .forEach(method => { console[method] = noop; });
    Object.freeze(console);
  },

  // DevTools 窗口检测
  startDevToolsDetection(redirect, url) {
    const threshold = 160;
    setInterval(() => {
      const widthDiff = window.outerWidth - window.innerWidth;
      const heightDiff = window.outerHeight - window.innerHeight;

      if (widthDiff > threshold || heightDiff > threshold) {
        if (redirect) {
          window.location.href = url;
        } else {
          document.body.innerHTML = '<h1>页面不可用</h1>';
        }
      }
    }, 1000);
  },

  // 时间差检测
  startTimingDetection() {
    const check = () => {
      const start = performance.now();
      debugger;
      if (performance.now() - start > 100) {
        console.clear();
      }
    };
    setInterval(check, 500);
  }
};

// 页面加载完成后启动
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => AntiDebug.init());
} else {
  AntiDebug.init();
}

使用方式：

// 基础防护
AntiDebug.init();

// 自定义配置
AntiDebug.init({
  disableConsole: true,
  detectDevTools: true,
  redirectOnDetect: true,
  redirectUrl: '/error.html'
});

---

6. 局限性与注意事项

已知局限

局限点	说明
无法阻止抓包	浏览器 Network 面板的请求记录无法通过 JS 禁用
Source Map 暴露	如果发布了 Source Map，代码逻辑可被还原
禁用 JS 即可绕过	用户可以在 DevTools 的 Settings 中禁用 JavaScript
性能开销	高频检测会带来额外的 CPU 占用
用户体验	过度防护可能影响正常用户的调试需求

最佳实践建议

1. 适度使用：仅在核心加密、支付校验等敏感环节启用，不要全站铺开
2. 结合后端：前端防护只是第一层，关键逻辑校验必须在服务端完成
3. 代码混淆：配合 Webpack 混淆、变量名压缩等手段，增加阅读成本
4. 监控告警：记录触发反调试的行为日志，用于安全分析

浏览器兼容性

上述方案在现代浏览器（Chrome、Edge、Firefox、Safari）中均可正常工作。部分方案（如 Worker 检测）在 IE11 中不支持。

---

免责声明：本文技术仅用于学习交流，请勿用于非法用途。任何逆向行为应遵守相关法律法规。