Disable-devtool

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

----

star Author

Version Downloads Size License TopLang issue Dependent

**[English](https://github.com/theajack/disable-devtool/blob/master/README.md) | [在线试用/文档](https://theajack.gitee.io/disable-devtool) | [更新日志](https://github.com/theajack/disable-devtool/blob/master/helper/version.md) | [Gitee](https://gitee.com/theajack/disable-devtool)** ## 1. 快速使用 ### 1.1 npm 引用 ``` npm i disable-devtool ``` ```js import disableDevtool from 'disable-devtool'; disableDevtool(); ``` ### 1.2 script属性配置 ```html ``` ## 2.功能 disable-devtool 可以禁用所有一切可以进入开发者工具的方法,防止通过开发者工具进行的 ‘代码搬运’ 该库有以下特性: 1. 支持可配置是否禁用右键菜单 2. 禁用 f12 和 ctrl+shift+i 快捷键 3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面 4. 开发者可以绕过禁用 (url参数使用tk配合md5加密) 5. 支持几乎所有浏览器(包含IE) 6. 高度可配置 7. 使用极简、体积小巧 (仅6kb) 8. 支持npm引用和script标签引用(属性配置) 9. 识别真移动端与浏览器开发者工具设置插件伪造的移动端,为移动端节省性能 ## 3. 使用 ### 3.1 npm使用时的配置参数 安装 disable-devtool ``` npm i disable-devtool ``` ```js import disableDevtool from 'disable-devtool'; disableDevtool(options); ``` options中的参数与说明如下: ```ts declare interface optionStatic { md5?: string; // 绕过禁用的md5值,详情见3.2,默认不启用绕过禁用 url?: string; // 关闭页面失败时的跳转页面,默认值为localhost tkName?: string; // 绕过禁用时的url参数名称,默认为 ddtk ondevtoolopen?(): void; // 开发者面板打开的回调,启用时url参数无效 debugDelay?: number; // debug模式时的延迟 默认200ms interval?: number; // 定时器的时间间隔 默认200ms disableMenu?: boolean; // 是否禁用右键菜单 默认为true stopIntervalTime?: number; // 在移动端时取消监视的等待时长 } ``` 备注:disableMenu参数在ie下无效,因为ie下右键会阻塞主进程,且无法监听 ### 3.2 md5 与 tk 绕过禁用 该库中使用 key 与 md5 配合的方式使得开发者可以在线上绕过禁用。 流程如下: 先指定一个 key a(该值不要记录在代码中),使用 md5 加密得到一个值 b,将b作为 md5 参数传入,开发者在访问 url 的时候只需要带上url参数 ddtk=a,便可以绕过禁用。 disableDevtool对象暴露了 md5 方法,可供开发者加密时使用: ```js disableDevtool.md5('xxx'); ``` ### 3.2 script使用属性配置 ```html ``` 注: 1. 属性配置时必须要带上 `id='disable-devtool'` 属性 2. 属性配置都是可选的,字段与3.1中一致,区别是将驼峰形式改成横线分割 3. 该script标签建议放在body最底部 ### 3.3 script不使用属性配置 ```html ```