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

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

功能简介

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

它具有以下特点:

  • 支持可配置是否禁用右键菜单
  • 取消 f12 和 ctrl+shift+i 等快捷键
  • 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
  • 开发者可以绕过拒绝(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?: Array<DetectorType>; // 启用的检测器 检测器详情见 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参数 ?ddtk=a即可绕过禁用。

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

DisableDevtool.md5('xxx');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/108278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全—小白自学笔记

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

Pytorch:cat、stack、squeeze、unsqueeze的用法

Pytorch&#xff1a;cat、stack、squeeze、unsqueeze的用法 torch.cat 在指定原有维度上链接传入的张量&#xff0c;所有传入的张量都必须是相同形状 torch.cat(tensors, dim0, *, outNone) → Tensor tensor:相同形状的tensor dim:链接张量的维度&#xff0c;不能超过传入张…

使用Golang实现HTTP代理突破IP访问限制

引言 在当今互联网时代&#xff0c;网站和服务商为了维护安全性和保护用户隐私&#xff0c;常常会对特定的IP地址进行封锁或限制。但是&#xff0c;有时候我们可能需要访问这些被限制的网站或服务。为了突破这种限制&#xff0c;我们可以使用HTTP代理来隐藏真实的客户端IP地址…

警惕!又2本Hindawi期刊被剔除,Scopus期刊目录更新!(附下载)

【SciencePub学术】 01Scopus目录更新概况 此次Scopus期刊目录更新后&#xff0c;有5本期刊不再被收录&#xff08;Discontinued titles September 2023&#xff09;&#xff0c;同上次更新时相比&#xff0c;此次又新增93本期刊(Accepted titles)进入Scopus数据库。目前Scop…

CSS Vue/RN 背景使用opacity,文字在背景上显示

Vue <div class"training_project_tip"> <div class"tip">展示的文字</div> </div> .training_project_tip { font-size: 12px; font-weight: 400; text-align: left; color: #ffffff; margin-top: 8px; position: relative; dis…

苏轼在密州的四首千古名作

苏轼&#xff0c;一个从诗歌王国掉落人间的落魄贵族&#xff0c;整个政治生涯几乎都以流浪为主&#xff0c;在古诗词世界或许只有李白与之最是相似&#xff0c;不过李白的流浪属于荡歌山水、云游四方&#xff0c;而苏轼的流浪则带有被动的成分&#xff1a;一纸贬黜公文就是苏轼…

flask基础开发知识学习

之前做了一些LLM的demo&#xff0c;接口用flask写的&#xff0c;但是涉及到后端的一些业务就感觉逻辑写的很乱&#xff0c;代码变成屎山&#xff0c;于是借助官方文档和GPT迅速补了一些知识&#xff0c;总结一下一个很小的模板 于是决定边学边重构之前的代码… 文章目录 代码结…

Java SimpleDateFormat linux时间字符串转时间轴的坑

Mon Oct 16 09:51:28 2023 这是linux 的 date命令得到的时间&#xff0c;要转换称时间戳。 EEE MMM dd HH:mm:ss yyyy 这样的格式&#xff0c;看起来就是正确的&#xff0c;可是就是报错 Unparseable date: "Mon Oct 16 09:51:28 2023" 下面是正确的代码 String[…

2024年孝感市建筑类中级职称申报资料私企VS国企

2024年孝感市建筑类中级职称申报资料私企VS国企 民营企业中级职称申报跟事业单位或者是国企申报中级职称流程不一样么&#xff1f;实际上流程基本都是相同的&#xff0c;就是提交纸质版资料有点不一样。 孝感市建筑类中级职称申报基本流程 1.参加建筑类中级职称水平能力测试。 …

Javascript中字符串取数字

let str 32.12s; let intPart Math.floor(parseFloat(str)); // 输出32 let intPart Math.floor(Number(str)); // 输出NaNMath.floor函数会向下取整&#xff0c;将浮点数舍去小数部分。如果需要四舍五入的结果&#xff0c;可以使用Math.round函数 parseFloat函数从字…

本地配置免费的https咋做?

大家好这里是tony4geek。 今天和公司的小伙伴对接项目&#xff0c;因为涉及到https的权限调用。所以在服务器本地localhost 要配置https用来测试 。现在把过程中遇到的问题记录下来。 • 因为是测试用所以生成https的证书用免费的就可以了。 openssl req -x509 -nodes -days …

Spring(18) @Order注解介绍、使用、底层原理

目录 一、简介二、List 注入使用示例2.1 测试接口类2.2 测试接口实现类12.3 测试接口实现类22.4 启动类&#xff08;测试&#xff09;2.5 测试结果场景一&#xff1a;场景二&#xff1a; 三、CommandLineRunner 使用示例3.1 接口实现类13.2 接口实现类23.3 测试结果场景一&…

排序算法可视化

前言 这两天在B站上刷到一个视频&#xff0c;用python把各种排序动画可视化显示了出来觉得还蛮好玩的&#xff0c;当即就决定用Flutter写一个玩玩&#xff0c;顺便复习一下排序算法&#xff0c;话不多说&#xff0c;进入正文~ 效果图&#xff1a; 该效果图为鸡尾酒排序(双向冒…

Python 实现http server接收mutipart/form-data文件 方法2

Python 实现http server接收mutipart/form-data文件 方法2 1 Server端代码2 测试 1 Server端代码 以下代码亲测有效&#xff0c;仅适应于接收客户端上传的图片&#xff0c;其他文件未曾测试&#xff0c;作者主要应用于平时的自测工具。 说明1&#xff1a; 如有特殊需求&#x…

OpenRemote: Java 开源 IoT 物联网开发平台,匹配智慧城市、智能家居、能源管理

OpenRemote 是一个直观、用户友好的基于Java语言的开源 IoT 物联网设备管理平台&#xff0c;它包括从连接设备到构建应用程序和特定领域的智能应用程序的所有功能和特性。通过OpenRemote物联网平台&#xff0c;用户可以收集和处理来自不同设备的传感器数据&#xff0c;适用于智…

STM32学习笔记

前言 今天开始学习STM32&#xff0c;公司封闭git网络&#xff0c;所以选择CSDN来同步学习进度&#xff0c;方便公司和家里都能更新学习笔记。 参考学习资料 江科大STM32教学视频&#xff1a; 江科大自动协STM32视频_哔哩哔哩_bilibili

Java Kids-百倍提速【Mac IOS】

引言&#xff1a;当今社会&#xff0c;创新和提升效率已经成为了大家普遍的追求。无论是个人生活还是企业经营&#xff0c;我们都希望能够以更高的效率完成任务&#xff0c;节省时间和资源。因此&#xff0c;提速成为了一种时代的要求&#xff0c;而"Java Kids 百倍提速&q…

C#进阶——反射(Reflection)

定义&#xff1a;反射指的是在运行时动态地获取、检查和操作程序中的类型信息&#xff0c;而在我们的Unity中反射允许开发者在运行时通过代码来访问和修改对象的属性、方法和字段&#xff0c;而不需要提前知道这些成员的具体信息。 举一个例子&#xff0c;我们使用反射在运行的…

c++ --- 归并排序

2、归并排序 步骤&#xff1a; 选取中间点 mid (LR)/2递归排序 左边left 和 右边 right归并 ---- 将数组合二为一 模板代码 int temp[10]; void merge_sort(int q[], int l, int r) {//如果左右边界相等 直接退出if (l > r) return;//获取数组中心int mid (l r) / 2;/…

python实现批量数据库数据插入

import pandas as pd import pymysql # 连接 MySQL 数据库 conn pymysql.connect( hostlocalhost, useryour_username, passwordyour_password, databaseyour_database_name, charsetutf8mb4, ) # 读取已有数据 existing_data pd.read_csv("86w全…