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

释放双眼,带上耳机,听听看~!

1. 快速使用

1.1 npm 引用

npm i disable-devtool
import disableDevtool from 'disable-devtool';

disableDevtool();

script属性配置

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>

或者通过版本引用:

<!--使用指定版本-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x/disable-devtool.min.js'></script>
<!--使用最新版本-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest/disable-devtool.min.js'></script>

2.功能

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

该库有以下特性:

  1. 支持可配置是否禁用右键菜单
  2. 禁用 f12 和 ctrl+shift+i 快捷键
  3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
  4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
  5. 多种监测模式,支持几乎所有浏览器(IE,360,qq浏览器,FireFox,Chrome,Edge…)
  6. 高度可配置
  7. 使用极简、体积小巧 (仅7kb)
  8. 支持npm引用和script标签引用(属性配置)
  9. 识别真移动端与浏览器开发者工具设置插件伪造的移动端,为移动端节省性能

3. 使用

3.1 npm使用时的配置参数

安装 disable-devtool

npm i disable-devtool
import disableDevtool from 'disable-devtool';

disableDevtool(options);

options中的参数与说明如下:

declare interface optionStatic {
md5?: string; // 绕过禁用的md5值,详情见3.2,默认不启用绕过禁用
url?: string; // 关闭页面失败时的跳转页面,默认值为localhost
tkName?: string; // 绕过禁用时的url参数名称,默认为 ddtk
ondevtoolopen?(type: DetectorType, next: Function): void; // 开发者面板打开的回调,启用时url参数无效,type 为监测模式,详见3.5
interval?: number; // 定时器的时间间隔 默认200ms
disableMenu?: boolean; // 是否禁用右键菜单 默认为true
stopIntervalTime?: number; // 在移动端时取消监视的等待时长
clearIntervalWhenDevOpenTrigger?: boolean; // 是否在触发之后停止监控 默认为false
detactors?: Array<DETECTOR_TYPE>; // 启用的检测器 检测器详情见 3.5 默认为全部,建议使用全部
}


declare type DETECTOR_TYPE = -1 | 0 | 1 | 2 | 3 | 4; // 检测器详情见 3.5

3.2 md5 与 tk 绕过禁用

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

流程如下:

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

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

disableDevtool.md5('xxx');

工具【32小】:点我前往

3.3 script使用属性配置

<script
disable-devtool-auto
src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
md5='xxx'
url='xxx'
tk-name='xxx'
interval='xxx'
disable-menu='xxx'
detectors='xxx'
></script>

注:

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

3.4 script不使用属性配置

<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
<script>
DisableDevtool({
// 参数与3.1中一致
})
</script>

3.5 监测模式

Disable-Devtool 有五种监测模式, DisableDevtool.DETECTOR_TYPE 为所有的监测模式枚举

const DETECTOR_TYPE = {
UNKONW: -1,
REG_TO_STRING: 0, // 根据正则检测
DEFINE_ID: 1, // 根据dom id检测
SIZE: 2, // 根据窗口尺寸检测
DATE_TO_STRING: 3, // 根据Date.toString 检测
FUNC_TO_STRING: 4, // 根据Function.toString 检测
}

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

gitee

温馨提示:本文最后更新于 2022-05-14 10:01 ,某些文章具有时效性,若有错误或已失效,请在下方留言或联系逆念

给TA打赏
共{{data.count}}人
人已打赏
网络技术

【B2主题美化】首页促销公告横幅

2022-5-14 9:52:26

网络技术

WordPress 邮件通知站内所有用户和访客代码

2022-5-14 10:22:34

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ508044570 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索