有时候不希望用户去调试或复制前端代码,那该如何禁止用户调试前端代码呢?今天就来分享一个开源的前端工具:Disable Devtool,一行代码禁用 Web 开发者工具!
功能简介
disable-devtool 可以禁用一切可以进入开发者工具的方法,阻止通过开发者工具进行的"代码抓取"。
它具有以下特点:
- 支持可配置是否禁用右键菜单
- 取消 f12 和 ctrl+shift+i 等快捷键
- 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
- 开发者可以绕过拒绝(url参数使用tk配合md5加密)
- 多种监测模式,支持几乎所有浏览器
- 高度可配置、使用极简、体积紧凑
- 支持npm引用和脚本标签引用(属性配置)
- 识别真移动端与浏览器开发者工具设置插件格式化的移动端,为移动端节省性能
- 支持识别开发者工具关闭事件
- 支持可配置是否取消选择、复制、剪切、粘贴功能
- 支持识别eruda和vconsole调试工具
- 支持挂起和恢复支架工作
- 支持配置ignore属性,默认自定义控制是否启用
- 支持配置 iframe 中所有父页面的开发者工具禁用
基本使用
推荐使用 npm 进行安装(使用script
脚本会被代理单独拦截掉从而无法执行),安装 disable-devtool:
js
npm i disable-devtool
基本使用:
js
import DisableDevtool from 'disable-devtool';
DisableDevtool(options);
这里的 options 就是配置项。可配置参数如下:
js
interface IConfig {
md5?: string; // 绕过禁用的md5值,详情见3.2,默认不启用绕过禁用
url?: string; // 关闭页面失败时的跳转页面,默认值为localhost
tkName?: string; // 绕过禁用时的url参数名称,默认为 ddtk
ondevtoolopen?(type: DetectorType, next: Function): void; // 开发者面板打开的回调,启用时url参数无效,type 为监测模式,详见3.5, next函数是关闭当前窗口
ondevtoolclose?(): void; // 开发者面板关闭的回调
interval?: number; // 定时器的时间间隔 默认200ms
disableMenu?: boolean; // 是否禁用右键菜单 默认为true
stopIntervalTime?: number; // 在移动端时取消监视的等待时长
clearIntervalWhenDevOpenTrigger?: boolean; // 是否在触发之后停止监控 默认为false, 在使用ondevtoolclose时该参数无效
detectors?: Array<DetectorType>; // 启用的检测器 检测器详情见 3.5 默认为全部,建议使用全部
clearLog?: boolean; // 是否每次都清除log
disableSelect?: boolean; // 是否禁用选择文本 默认为false
disableCopy?: boolean; // 是否禁用复制 默认为false
disableCut?: boolean; // 是否禁用剪切 默认为false
disablePaste: boolean; // 是否禁用粘贴 默认为false
ignore?: (string|RegExp)[] | null | (()=>boolean); // 某些情况忽略禁用
disableIframeParents?: boolean; // iframe中是否禁用所有父窗口
timeOutUrl?: // 关闭页面超时跳转的url;
}
DisableDevtool 的返回值类型如下:
js
interface IDDResult {
success: boolean; // 表示是否正常启用
reason: string; // 未正常启用的原因
}
Disable-Devtool 有以下监测模式,使用 detectors
定义:
js
enum DetectorType {
Unknown = -1,
RegToString = 0, // 根据正则检测
DefineId, // 根据dom id检测
Size, // 根据窗口尺寸检测
DateToString, // 根据Date.toString 检测
FuncToString, // 根据Function.toString 检测
Debugger, // 根据断点检测,仅在ios chrome 真机情况下有效
Performance, // 根据log大数据性能检测
DebugLib, // 检测第三方调试工具 eruda 和 vconsole
};
ondevtoolopen
事件的回调参数就是被触发的监测模式。可以在 ondevtoolopen
里执行业务逻辑,比如做数据上报、用户行为分析等:
js
DisableDevtool({
ondevtoolopen(type, next){
alert('Devtool opened with type:' + type);
next();
}
});
那么问题来了,如果把 Devtools 禁用了,那如果线上应用出了问题,作为应用的开发者,也是无法调试的,怎么办呢?该工具的作者当然想到了这一点,它使用 key 与 md5 配合的方式使开发者可以在线上绕过禁用。
使用流程 :指定一个 key a(该值不要记录在代码中),使用 md5 加密得到一个值 b,将 b 作为 md5 参数传入,开发者在访问 url 的时候只需要带上url参数 ?ddtk=a
即可绕过禁用。
disableDevtool
对象暴露了 md5 方法,可供开发者加密时使用:
js
DisableDevtool.md5('xxx');