🚀 一行代码搞定禁用web开发者工具

1. 快速使用

1.1 npm 引用

npm i @deppon/bian-disable-devtool

import DisableDevtool from '@deppon/bian-disable-devtool';

DisableDevtool();

1.2 script属性配置

<script bian-disable-devtool-auto src='https://ca.deppon.com.cn/uu/bian-disable-devtool.js'></script>

2.功能

bian-disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 代码搬运

该库有以下特性:

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

3. 使用

3.1 npm使用时的配置参数

推荐使用这种方式安装使用，使用script脚本可以被代理单独拦截掉从而无法执行安装 bian-disable-devtool

npm i @deppon/bian-disable-devtool

import DisableDevtool from '@deppon/bian-disable-devtool';

DisableDevtool(options);

3.1.1 返回值

返回值 DisableDevtool 的返回值为如下类型

interface IDDResult {
    success: boolean; // 表示是否正常启用
    reason: string; // 未正常启用的原因
}

3.1.2 参数

options中的参数与说明如下：

interface IConfig {
    url?: string; // 关闭页面失败时的跳转页面，默认值为localhost
    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?: string; // 关闭页面超时跳转的url;
    rewriteHTML: string; // 检测到打开之后重写页面
}

enum DetectorType {
  Unknown = -1,
  RegToString = 0, // 根据正则检测
  DefineId, // 根据dom id检测
  Size, // 根据窗口尺寸检测
  DateToString, // 根据Date.toString 检测
  FuncToString, // 根据Function.toString 检测
  Debugger, // 根据断点检测，仅在ios chrome 真机情况下有效
  Performance, // 根据log大数据性能检测
  DebugLib, // 检测第三方调试工具 eruda 和 vconsole   
};

3.2 script使用属性配置

<script 
    bian-disable-devtool-auto
    src='https://ca.deppon.com.cn/uu/bian-disable-devtool.js'
    url='xxx'
    interval='xxx'
    disable-menu='xxx'
    detectors='xxx'
    clear-log='true'
    disable-select='true'
    disable-copy='true'
    disable-cut='true'
    disable-paste='true'
></script>

注：

如希望自动禁用，属性配置时必须要带上 bian-disable-devtool-auto 属性
属性配置都是可选的，字段与3.1中一致，区别是将驼峰形式改成横线分割
该script标签建议放在body最底部
detectors 需要使用空格分割，如 detectors='1 2 3'

3.3 script不使用属性配置

<script src='https://ca.deppon.com.cn/uu/bian-disable-devtool.js'></script>
<script>
    DisableDevtool({
        // 参数与3.1中一致
    })
</script>

3.4 监测模式

bian-disable-devtool有以下几种监测模式, DisableDevtool.DetectorType 为所有的监测模式枚举

enum DetectorType {
  Unknown = -1,
  RegToString = 0, // 根据正则检测
  DefineId, // 根据dom id检测
  Size, // 根据窗口尺寸检测 // 0.3.5版本后该探测器默认不启用
  DateToString, // 根据Date.toString 检测
  FuncToString, // 根据Function.toString 检测
  Debugger, // 根据断点检测，仅在ios chrome 真机情况下有效
  Performance, // 根据log大数据性能检测
  DebugLib, // 检测第三方调试工具
};

ondevtoolopen 事件的回调参数就是被触发的监测模式

可以在 ondevtoolopen 里执行业务逻辑，比如做数据上报、用户行为分析等

DisableDevtool({
    ondevtoolopen(type, next){
        alert('Devtool opened with type:' + type);
        next();
    }
});

3.5 其他 API

3.5.1 isRunning

用于获取 DisableDevtool 是否正在运行中 (挂起或忽略状态也视为运行中，因为可以动态开启)

DisableDevtool.isRunning;

3.5.2 isSuspend

用于获取或设置 DisableDevtool 是否被挂起 (挂起状态所有的禁用都将暂时失效)

DisableDevtool.isSuspend = true;
DisableDevtool.isSuspend = false;

3.5.3 config.ignore

ignore 用于自定义某些忽略的场景

传入数组

传入数组是支持字符串和正则表达式，表示匹配链接中是否含有传入的内容，使用如下

DisableDevtool({
    ignore: [
        '/user/login', // 当链接中含有该内容时禁用暂时被忽略
        /\/user\/[0-9]{6}/, // 当链接匹配该正则时禁用暂时被忽略
    ]
});

传入函数

传入函数表示自定义判断条件，返回一个bool类型，使用如下

DisableDevtool({
    ignore: () => {
        return userType === 'admin'; // 当是管理员时忽略禁用
    }
});

Détail du package

bian-disable-devtool

readme