海拉尔网站建设+网站设计,南宁营销型网站设计,关于公司门户网站建设的议案,怎样查一个网站的空间商有时候不希望用户去调试或复制前端代码#xff0c;那该如何禁止用户调试前端代码呢#xff1f;今天就来分享一个开源的前端工具#xff1a;Disable Devtool#xff0c;一行代码禁用 Web 开发者工具#xff01;
功能简介
disable-devtool 可以禁用一切可以进入开发者工具…有时候不希望用户去调试或复制前端代码那该如何禁止用户调试前端代码呢今天就来分享一个开源的前端工具Disable Devtool一行代码禁用 Web 开发者工具
功能简介
disable-devtool 可以禁用一切可以进入开发者工具的方法阻止通过开发者工具进行的“代码抓取”。
它具有以下特点
支持可配置是否禁用右键菜单取消 f12 和 ctrlshifti 等快捷键支持识别从浏览器菜单栏打开开发者工具并关闭当前页面开发者可以绕过拒绝url参数使用tk配合md5加密多种监测模式支持几乎所有浏览器高度可配置、使用极简、体积紧凑支持npm引用和脚本标签引用属性配置识别真移动端与浏览器开发者工具设置插件格式化的移动端为移动端节省性能支持识别开发者工具关闭事件支持可配置是否取消选择、复制、剪切、粘贴功能支持识别eruda和vconsole调试工具支持挂起和恢复支架工作支持配置ignore属性默认自定义控制是否启用支持配置 iframe 中所有父页面的开发者工具禁用
基本使用
推荐使用 npm 进行安装使用script脚本会被代理单独拦截掉从而无法执行安装 disable-devtool
npm i disable-devtool基本使用
import DisableDevtool from disable-devtool;DisableDevtool(options);这里的 options 就是配置项。可配置参数如下
interface IConfig {md5?: string; // 绕过禁用的md5值详情见3.2默认不启用绕过禁用url?: string; // 关闭页面失败时的跳转页面默认值为localhosttkName?: string; // 绕过禁用时的url参数名称默认为 ddtkondevtoolopen?(type: DetectorType, next: Function): void; // 开发者面板打开的回调启用时url参数无效type 为监测模式详见3.5 next函数是关闭当前窗口ondevtoolclose?(): void; // 开发者面板关闭的回调interval?: number; // 定时器的时间间隔 默认200msdisableMenu?: boolean; // 是否禁用右键菜单 默认为truestopIntervalTime?: number; // 在移动端时取消监视的等待时长clearIntervalWhenDevOpenTrigger?: boolean; // 是否在触发之后停止监控 默认为false 在使用ondevtoolclose时该参数无效detectors?: ArrayDetectorType; // 启用的检测器 检测器详情见 3.5 默认为全部建议使用全部clearLog?: boolean; // 是否每次都清除logdisableSelect?: boolean; // 是否禁用选择文本 默认为falsedisableCopy?: boolean; // 是否禁用复制 默认为falsedisableCut?: boolean; // 是否禁用剪切 默认为falsedisablePaste: boolean; // 是否禁用粘贴 默认为falseignore?: (string|RegExp)[] | null | (()boolean); // 某些情况忽略禁用disableIframeParents?: boolean; // iframe中是否禁用所有父窗口timeOutUrl?: // 关闭页面超时跳转的url;
}DisableDevtool 的返回值类型如下
interface IDDResult {success: boolean; // 表示是否正常启用reason: string; // 未正常启用的原因
}Disable-Devtool 有以下监测模式使用 detectors 定义
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 里执行业务逻辑比如做数据上报、用户行为分析等
DisableDevtool({ondevtoolopen(type, next){alert(Devtool opened with type: type);next();}
});那么问题来了如果把 Devtools 禁用了那如果线上应用出了问题作为应用的开发者也是无法调试的怎么办呢该工具的作者当然想到了这一点它使用 key 与 md5 配合的方式使开发者可以在线上绕过禁用。
使用流程指定一个 key a该值不要记录在代码中使用 md5 加密得到一个值 b将 b 作为 md5 参数传入开发者在访问 url 的时候只需要带上url参数 ?ddtka即可绕过禁用。
disableDevtool对象暴露了 md5 方法可供开发者加密时使用
DisableDevtool.md5(xxx);
