一行代码禁止用户调试前端代码

有时候不希望用户去调试或复制前端代码,那该如何禁止用户调试前端代码呢?今天就来分享一个开源的前端工具:Disable Devtool,一行代码禁用 Web 开发者工具!

功能简介

disable-devtool 可以禁用一切可以进入开发者工具的方法,阻止通过开发者工具进行的"代码抓取"。

它具有以下特点:

  • 支持可配置是否禁用右键菜单
  • 取消 f12 和 ctrl+shift+i 等快捷键
  • 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
  • 开发者可以绕过拒绝(url参数使用tk配合md5加密)
  • 多种监测模式,支持几乎所有浏览器
  • 高度可配置、使用极简、体积紧凑
  • 支持npm引用和脚本标签引用(属性配置)
  • 识别真移动端与浏览器开发者工具设置插件格式化的移动端,为移动端节省性能
  • 支持识别开发者工具关闭事件
  • 支持可配置是否取消选择、复制、剪切、粘贴功能
  • 支持识别eruda和vconsole调试工具
  • 支持挂起和恢复支架工作
  • 支持配置ignore属性,默认自定义控制是否启用
  • 支持配置 iframe 中所有父页面的开发者工具禁用

基本使用

推荐使用 npm 进行安装(使用script脚本会被代理单独拦截掉从而无法执行),安装 disable-devtool:

js 复制代码
npm i disable-devtool

基本使用:

js 复制代码
import DisableDevtool from 'disable-devtool';

DisableDevtool(options);

这里的 options 就是配置项。可配置参数如下:

js 复制代码
interface IConfig {
    md5?: string; // 绕过禁用的md5值,详情见3.2,默认不启用绕过禁用
    url?: string; // 关闭页面失败时的跳转页面,默认值为localhost
    tkName?: string; // 绕过禁用时的url参数名称,默认为 ddtk
    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?: // 关闭页面超时跳转的url;
}

DisableDevtool 的返回值类型如下:

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

Disable-Devtool 有以下监测模式,使用 detectors 定义:

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

ondevtoolopen 事件的回调参数就是被触发的监测模式。可以在 ondevtoolopen 里执行业务逻辑,比如做数据上报、用户行为分析等:

js 复制代码
DisableDevtool({
    ondevtoolopen(type, next){
        alert('Devtool opened with type:' + type);
        next();
    }
});

那么问题来了,如果把 Devtools 禁用了,那如果线上应用出了问题,作为应用的开发者,也是无法调试的,怎么办呢?该工具的作者当然想到了这一点,它使用 key 与 md5 配合的方式使开发者可以在线上绕过禁用

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

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

js 复制代码
DisableDevtool.md5('xxx');
相关推荐
我要洋人死27 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人39 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人40 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#