disable-devtool 网络安全 禁止打开控制台

项目场景：

提示：这里简述项目相关背景：

为了网络安全，前端代码上线后，担心代码会暴露，或者接口暴露，会被有心之人研究代码逻辑，找到项目bug漏洞！

disable-devtool 可以禁用所有一切可以进入开发者工具的方法

如下图，点击鼠标右键，没有任何反应

---

插件库描述

提示：这里描述：

disable-devtool---该库有以下特性:

1、支持可配置是否禁用右键菜单

2、禁用 f12 和 ctrl+shift+i 快捷键

3、支持识别从浏览器菜单栏打开开发者工具并关闭当前页面

4、开发者可以绕过禁用 (url参数使用tk配合md5加密)

5、支持几乎所有浏览器

6、高度可配置

7、使用极简、体积小巧 (仅6kb)

8、支持npm引用和script标签引用(属性配置)

---

使用方案：

提示：这里填写该问题的具体使用方案：

一、安装 disable-devtool

npm i disable-devtool

二、引入

import disableDevtool from 'disable-devtool';

三、使用

/* 全局设置disableDevtool插件 */
DisableDevtool({
  ondevtoolopen: (type) => {
    console.warn("开发者工具已打开！", type)
    window.location.href = "about:blank"
  },
  md5: md5Value,
  tkName: "dreame_design", // 自定义 URL 参数名（可选）
  disableMenu: true, // 禁用右键菜单
  interval: 500, // 检测间隔
  clearLog: true, // 每次检测清空控制台
  //ignore: () => {
  //  return userInfo.value.is_ceo == 1 || userInfo.value.is_admin == 1
  //}
})


// md5?: string; // 绕过禁用的md5值，详情见下面的==另外说明，默认不启用绕过禁用
// url?: string; // 关闭页面失败时的跳转页面，默认值为localhost
// tkName?: string; // 绕过禁用时的url参数名称，默认为 ddtk
// ondevtoolopen?(): void; // 开发者面板打开的回调，启用时url参数无效
// debugDelay?: number; // debug模式时的延迟 默认200ms
// interval?: number; // 定时器的时间间隔 默认200ms
// disableMenu?: boolean; // 是否禁用右键菜单 默认为true

另外说明

md5 与 tk 绕过禁用

该库中使用 key 与 md5 配合的方式使得开发者可以在线上绕过禁用。

流程如下：

先指定一个 key a（该值不要记录在代码中），使用 md5 加密得到一个值 b，将b作为 md5 参数传入，开发者在访问 url 的时候只需要带上url参数 ddtk=a，便可以绕过禁用。

disableDevtool对象暴露了 md5 方法，可供开发者加密时使用：

disableDevtool.md5('xxx');