js 禁用 web开发者工具 禁用 f12 功能 浏览器菜单栏禁用开发者工具

分享一款笔者开发的禁用web开发者工具的js库 disable-devtool

使用起来十分方便,引用一个script就可以

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

该库还有以下特性:

  1. 支持可配置是否禁用右键菜单
  2. 禁用 f12 和 ctrl+shift+i 快捷键
  3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
  4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
  5. 支持几乎所有浏览器
  6. 高度可配置
  7. 使用极简、体积小巧 (仅6kb)
  8. 支持npm引用和script标签引用(属性配置)

以下是该库官方文档:

English | 在线试用/文档 | Gitee

1. 快速使用

1.1 npm 引用

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

disableDevtool();

1.2 script属性配置

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

2.功能

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

该库有以下特性:

  1. 支持可配置是否禁用右键菜单
  2. 禁用 f12 和 ctrl+shift+i 快捷键
  3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
  4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
  5. 支持几乎所有浏览器
  6. 高度可配置
  7. 使用极简、体积小巧 (仅6kb)
  8. 支持npm引用和script标签引用(属性配置)

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?(): void; // 开发者面板打开的回调,启用时url参数无效
    debugDelay?: number; // debug模式时的延迟 默认200ms
    interval?: number; // 定时器的时间间隔 默认200ms
    disableMenu?: boolean; // 是否禁用右键菜单 默认为true
}

3.2 md5 与 tk 绕过禁用

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

流程如下:

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

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

disableDevtool.md5('xxx');

3.2 script使用属性配置

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

注:

  1. 属性配置时必须要带上 id='disable-devtool' 属性
  2. 属性配置都是可选的,字段与3.1中一致,区别是将驼峰形式改成横线分割
  3. 该script标签建议放在body最底部

3.3 script不使用属性配置

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

你可能感兴趣的:(javascript,web移动端控制台,小程序,mixin,javascript)