前端安全：如何利用 disable-devtool 禁用浏览器开发者工具

浏览器禁止网站打开开发者工具箱（Vue / Vite 项目）

很多时候，我们在部署前端项目后，会希望尽可能防止用户：

• 打开 DevTools 查看源码
• 调试接口请求
• 修改前端逻辑
• 破解会员逻辑
• 复制站点资源

虽然前端代码本质上无法做到“绝对安全”，但可以通过一些手段，提高调试成本。

这里推荐一个很好用的库：

安装 disable-devtool

项目中执行：

pnpm install disable-devtool

或者：

npm install disable-devtool

---

在 Vue 项目中使用

可以在：

• main.js
• main.ts
• App.vue

中初始化。

例如：

import DisableDevtool from 'disable-devtool';

if (process.env.NODE_ENV === 'production') {
    DisableDevtool({
        // 检测间隔（毫秒）
        interval: 200,

        // 打开开发者工具后的回调
        ondevtoolopen: (type) => {
            // 直接跳转页面
            window.location.replace('https://www.google.com');
        },

        // 覆盖页面内容
        rewriteHTML: `
        <div style="
            background:#fff;
            z-index:9999;
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            text-align:center;
            padding-top:100px;
            font-size:24px;
            color:#333;
        ">
            检测到环境异常，请关闭调试工具后重试
        </div>`,

        // 禁用右键菜单
        disableMenu: true,

        // 停止检测间隔
        stopIntervalTime: 500,

        // 调试白名单 Token
        tkName: 'dd-token',
        value: 'my_secret_key',

        // 心跳检测
        heartbeat: true,
    });
}

---

配置项详解

1. interval

开发者工具检测频率。

interval: 200

单位：

毫秒（ms）

建议：

场景	推荐值
普通网站	500
高安全需求	200
极限检测	100

值越小：

• 检测越及时
• CPU 占用越高

---

2. ondevtoolopen

当检测到 DevTools 被打开时触发。

例如：

ondevtoolopen: () => {
    window.location.replace('https://www.google.com');
}

这里推荐使用 replace() 而不是 href =，因为 replace 不会保留浏览历史，用户无法点击“后退”返回原页面。

---

3. rewriteHTML

发现调试后，直接覆盖整个页面。

rewriteHTML: '<div>禁止调试</div>'

效果：

• 页面直接被遮挡
• 用户无法继续操作
• 可自定义风格

---

4. disableMenu

禁用右键菜单。

disableMenu: true

这样可以禁止：

• 右键检查元素
• 右键查看源码
• 右键复制内容

---

5. heartbeat

开启心跳检测。

heartbeat: true

作用：防止部分浏览器通过暂停 JS 来绕过检测。

---

6. 调试白名单（开发者后门）

有时候你自己也需要调试线上环境，可以配置 Token：

tkName: 'dd-token',
value: 'my_secret_key'

然后访问：

https://example.com/?dd-token=my_secret_key

即可绕过检测。

---

推荐生产环境完整方案

建议仅在生产环境启用，不要在开发环境开启。

完整示例：

import DisableDevtool from 'disable-devtool';

if (import.meta.env.PROD) {
    DisableDevtool({
        interval: 200,
        disableMenu: true,
        heartbeat: true,
        ondevtoolopen() {
            document.body.innerHTML = `
                <div style="
                    position:fixed;
                    inset:0;
                    background:#fff;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-size:32px;
                    font-weight:bold;
                    color:#333;
                    z-index:999999;
                ">
                    请关闭开发者工具后重试
                </div>
            `;
            window.location.replace('about:blank');
        },
        tkName: 'dd-token',
        value: 'my_secret_key',
    });
}

---

Vite 项目注意事项

如果你是：

• Vue3
• Vite
• React + Vite

推荐使用：

import.meta.env.PROD

而不是：

process.env.NODE_ENV

因为 Vite 默认没有 process.env。

---

能否真正防止抓包？

不能 100% 防止，因为浏览器属于用户设备，JS 代码最终会下发到客户端，高级用户仍可绕过。

但它可以：

• 阻止普通用户
• 提高逆向门槛
• 防止小白查看源码
• 阻止大部分 F12 调试

---

推荐搭配的安全方案

方案	作用
接口签名	防止接口伪造
Token 时效校验	防止盗链
JS 混淆	增加阅读难度
CDN 防盗链	防止资源被盗
Nginx 限流	防止刷接口
WebAssembly	核心逻辑隐藏
服务端鉴权	不信任前端

---

总结

disable-devtool 适合：

• 后台管理系统
• 视频网站
• 会员站
• 商业 SaaS
• 防止普通用户调试

优点：

• 使用简单
• 接入成本低
• 支持多种检测方式
• 支持跳转、锁死页面

缺点：

• 无法绝对防破解
• 高级用户仍可绕过

对于大多数网站来说，已经足够提升安全性了。

---

官方仓库

GitHub：

disable-devtool