此路不通❌，前端代码防调试

最新推荐文章于 2025-11-27 11:49:44 发布

原创最新推荐文章于 2025-11-27 11:49:44 发布 · 1.7k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #调试 #F12 #disable-devtool #javascript

前端专栏收录该内容

61 篇文章

订阅专栏

前端代码防调试

在前端开发中，为了保护代码不被轻易查看或修改，开发者可能会采取一些措施来增加代码的安全性。但需要注意的是，这些方法只能提高一定的门槛，并不能完全防止有经验的用户进行反向工程。下面是一些常见的做法：

1. 禁止右键菜单

通过JavaScript可以阻止默认的右键行为，但这并不能真正阻止用户访问页面源码。

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

2. 禁用F12开发者工具快捷键

虽然可以通过监听键盘事件来尝试阻止F12按键，但是这种方法并不十分可靠，因为浏览器提供了多种方式打开开发者工具（如Ctrl+Shift+I, Ctrl+Shift+J等），并且高级用户可以直接通过浏览器设置绕过这种限制。

document.addEventListener('keydown', function(event) {
    if (event.key === 'F12') {
        event.preventDefault(); // 阻止F12默认行为
    }
}, true);

3. 代码混淆

代码混淆是一种将代码转换成难以理解的形式的过程，同时保持其功能不变。这有助于防止他人轻松阅读和理解你的源代码。常用的JavaScript混淆工具包括UglifyJS、Terser以及Webpack插件等。
使用示例（基于webpack配置）：
- 安装terser-webpack-plugin: npm install terser-webpack-plugin --save-dev
- 在webpack.config.js中添加如下配置:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

4. 关闭断点跳转到空页面

在不打开发者工具的情况下，debugger是不会执行将页面卡住，而恰恰是利用debugger的这一点，如果你打开开发者工具一定会被debugger卡住，那么上下文时间间隔就会增加，在对时间间隔进行判断，就能巧妙的知道绝对开了开发者工具，随后直接跳转到空白页，一气呵成。(文心一言采用方案)

setInterval(function () {
  var startTime = performance.now();
  // 设置断点
  debugger;
  var endTime = performance.now();
  // 设置一个阈值，例如100毫秒
  if (endTime - startTime > 100) {
    window.location.href = 'about:blank';
  }
}, 100);

5、disable-devtool

disable-devtool可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的代码搬运。
🚀 一行代码搞定禁用web开发者工具
该库有以下特性:

支持可配置是否禁用右键菜单
禁用 f12 和 ctrl+shift+i 等快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过禁用 (url参数使用tk配合md5加密)
多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge…）
高度可配置、使用极简、体积小巧
支持npm引用和script标签引用(属性配置)
识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能
支持识别开发者工具关闭事件
支持可配置是否禁用选择、复制、剪切、粘贴功能
支持识别 eruda 和 vconsole 调试工具
支持挂起和恢复探测器工作
支持配置ignore属性，用以自定义控制是否启用探测器
支持配置iframe中所有父页面的开发者工具禁用

<head>
  <!-- ... -->
  <script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
  <script>
    // default options
    ConsoleBan.init()
    // custom options
    ConsoleBan.init({
      redirect: '/404'
    })
  </script>
</head>

注意事项

用户体验：禁用右键菜单可能影响到正常用户的操作习惯，例如复制文本或保存图片。
无障碍性：确保你的安全措施不会对残障人士造成不便。
法律合规：某些国家和地区可能有关于软件版权保护的具体规定，请确保遵循当地法律法规。
安全性：记住，没有绝对的安全措施能够彻底防止代码被破解。对于敏感信息或逻辑，建议采用服务器端处理的方式来进行保护。

为了进一步加强网页源码的安全性，我们可以采取以下额外措施：
- 加密敏感代码，使用加密算法对关键代码进行加密，以防止非授权访问和修改。
- 使用服务器端渲染，将网页的渲染过程放在服务器端，只返回最终渲染结果给客户端，隐藏源代码和逻辑。
- 定期更新代码，定期更新代码库以充分利用新的安全特性和修复已知漏洞。
保护网页源码的安全性对于Web开发至关重要。通过使用npm库disable-devtool，并结合其他安全措施，我们可以有效地降低用户访问和修改源代码的风险。但是绝对的安全是不存在的，因此定期更新和加强安全性措施也是必要的。任何客户端侧的安全措施都只能提供一定程度的保护。对于需要高度保密的应用场景，应考虑结合后端验证和其他安全策略共同使用。