1 Star 2 Fork 3

tackchen/disable-devtool

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Disable-devtool

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


stars forks version downloads jsdelivr issue

author license Size TopLang Dependent test

English | 在线试用/文档 | 更新日志 | Gitee

1. 快速使用

1.1 npm 引用

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

disableDevtool();

1.2 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. 识别真移动端与浏览器开发者工具设置插件伪造的移动端,为移动端节省性能
  10. 支持识别开发者工具关闭事件

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
    ondevtoolclose?(): void;
    interval?: number; // 定时器的时间间隔 默认200ms
    disableMenu?: boolean; // 是否禁用右键菜单 默认为true
    stopIntervalTime?: number; // 在移动端时取消监视的等待时长
    clearIntervalWhenDevOpenTrigger?: boolean; // 是否在触发之后停止监控 默认为false, 在使用ondevtoolclose时该参数无效
    detactors?: Array<DETECTOR_TYPE>; // 启用的检测器 检测器详情见 3.5 默认为全部,建议使用全部
}

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

3.2 md5 与 tk 绕过禁用

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

流程如下:

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

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

disableDevtool.md5('xxx');

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 检测
    DEBUGGER: 5; // 根据断点检测,仅在ios chrome 真机情况下有效
}

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

The MIT License (MIT) Copyright (c) 2019 - present Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

Disable web developer tools from the f12 button, right-click and browser menu 展开 收起
README
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/tackchen/disable-devtool.git
git@gitee.com:tackchen/disable-devtool.git
tackchen
disable-devtool
disable-devtool
master

搜索帮助