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

在如今的互联网时代,网页源码的保护显得尤为重要,特别是前端代码,几乎就是明文展示,很容易造成源码泄露,黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的Web开发者工具面板,今天推荐一个不错的npm库,可以帮助开发者更好地保护自己的网站源码,本文将介绍该库的功能和使用方法。

功能介绍

npm库名称:disable-devtool,github地址:github.com/theajack/disable-devtool。从f12按钮,右键单击和浏览器菜单都可以禁用Web开发工具。

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

该库有以下特性:

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

使用方法

使用该库非常简单,只需按照以下步骤进行操作:

1.1 npm 引用

推荐使用这种方式安装使用,使用script脚本可以被代理单独拦截掉从而无法执行。

npm i disable-devtool
import DisableDevtool from 'disable-devtool';DisableDevtool(options);

1.2 script方式使用

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

或者通过版本引用:

<!--使用指定版本-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x'></script>
<!--使用最新版本-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest'></script>

1.3 npm 方式 options参数说明

options中的参数与说明如下,各方面的配置相当完善。

interface IConfig {md5?: string; // 绕过禁用的md5值,默认不启用绕过禁用url?: string; // 关闭页面失败时的跳转页面,默认值为localhosttkName?: string; // 绕过禁用时的url参数名称,默认为 ddtkondevtoolopen?(type: DetectorType, next: Function): void; // 开发者面板打开的回调,启用时url参数无效,type 为监测模式, next函数是关闭当前窗口ondevtoolclose?(): void; // 开发者面板关闭的回调interval?: number; // 定时器的时间间隔 默认200msdisableMenu?: boolean; // 是否禁用右键菜单 默认为truestopIntervalTime?: number; // 在移动端时取消监视的等待时长clearIntervalWhenDevOpenTrigger?: boolean; // 是否在触发之后停止监控 默认为false, 在使用ondevtoolclose时该参数无效detectors?: Array<DetectorType>; // 启用的检测器 检测器详情clearLog?: boolean; // 是否每次都清除logdisableSelect?: boolean; // 是否禁用选择文本 默认为falsedisableCopy?: boolean; // 是否禁用复制 默认为falsedisableCut?: boolean; // 是否禁用剪切 默认为falsedisablePaste: boolean; // 是否禁用粘贴 默认为falseignore?: (string|RegExp)[] | null | (()=>boolean); // 某些情况忽略禁用disableIframeParents?: boolean; // iframe中是否禁用所有父窗口timeOutUrl?: // 关闭页面超时跳转的url;
}enum DetectorType {Unknown = -1,RegToString = 0, // 根据正则检测DefineId, // 根据dom id检测Size, // 根据窗口尺寸检测DateToString, // 根据Date.toString 检测FuncToString, // 根据Function.toString 检测Debugger, // 根据断点检测,仅在ios chrome 真机情况下有效Performance, // 根据log大数据性能检测DebugLib, // 检测第三方调试工具 eruda 和 vconsole   
};

1.4 script 方式使用属性配置

<script disable-devtool-autosrc='https://cdn.jsdelivr.net/npm/disable-devtool'md5='xxx'url='xxx'tk-name='xxx'interval='xxx'disable-menu='xxx'detectors='xxx'clear-log='true'disable-select='true'disable-copy='true'disable-cut='true'disable-paste='true'
></script>

1.5 事件监听

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

DisableDevtool({ondevtoolopen(type, next){alert('Devtool opened with type:' + type);next();}
});

1.6 md5 与 tk 绕过禁用

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

流程如下:

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

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

DisableDevtool.md5('xxx');

更多细节可查阅官方文档,中文文档地址:https://github.com/theajack/disable-devtool/blob/master/README.cn.md

最后

尽管该库可以有效地禁用浏览器的开发者工具面板,但仍然需要注意以下几点:

  • 该库只能禁用开发者工具的面板,无法阻止用户通过其他途径访问网页源码。因此,建议结合其他安全措施来保护网站。
  • 禁用开发者工具可能会对网站的调试和维护造成一定的困扰。需要调试线上代码的时候可以使用上述1.6绕过禁用进行调试。
  • 该库仅适用于现代浏览器,对于一些较旧的浏览器可能存在兼容性问题。在使用前请确保测试过兼容性。

为了进一步加强网页源码的安全性,我们可以采取以下额外措施:

  • 加密敏感代码,使用加密算法对关键代码进行加密,以防止非授权访问和修改。
  • 使用服务器端渲染,将网页的渲染过程放在服务器端,只返回最终渲染结果给客户端,隐藏源代码和逻辑。
  • 定期更新代码,定期更新代码库以充分利用新的安全特性和修复已知漏洞。

保护网页源码的安全性对于Web开发至关重要。通过使用npm库disable-devtool,并结合其他安全措施,我们可以有效地降低用户访问和修改源代码的风险。但是绝对的安全是不存在的,因此定期更新和加强安全性措施也是必要的。


看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

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

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

相关文章

X64(64位)汇编指令与机器码转换原理

X64&#xff08;64位&#xff09;汇编指令与机器码转换原理 1 64位寻址形式下的ModR/M字节1.1 寻址方式1.2 寄存器编号 2 汇编指令转机器码2.1 mov rcx, 1122334455667788h2.2 mov rcx,[r8]与mov [r8],rcx2.3 mov rcx,[r8r9*2] 本文属于《 X86指令基础系列教程》之一&#xff…

HPE Compute Scale-up Server 3200服务器来了!突破算力瓶颈,护航企业数字化转型

在全球数字化步入深水区的同时&#xff0c;伴随AIGC的迅速发展&#xff0c;对计算需求的迅速增长&#xff0c;如何高效灵活地使用算力资源成为开发者和企业发展的关注焦点。 服务器作为重要的算力基础设施之一&#xff0c;能快速处理大量数据&#xff0c;在AI时代其市场价值愈…

网络安全方向相关课题和材料

项目介绍 搜集大量网络安全行业开源项目 项目收集的思路: 一个是关注互联网企业/团队的安全开源项目,经企业内部实践,这些最佳实践值得借鉴。 一个是来自企业安全能力建设的需求,根据需求分类,如WAF、HIDS、Git监控等。 这个收集是一个长期的过程,我在GitHub创建了这…

9.MySQL索引的操作

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 索引操作 查询索引 创建主键索引 唯一索引的创建 普通索引的创建 全文索引的创建 删除索引 索引创建原则 索引操作 查询索引 第一种方法&#xff1a; show keys from 表名\G 我们了解其中几个就好。 第二种方法…

双目视觉检测 KX02-SY1000型测宽仪 有效修正和消除距离变化对测量的影响

双目视觉检测的基本原理 利用相机测量宽度时&#xff0c;由于单个相机在成像时存在“近大远小”的现象&#xff0c;并且单靠摄入的图像无法知道被测物的距离&#xff0c;所以由被测物的跳动导致的被测物到工业相机之间距离变化&#xff0c;使测量精度难以提高。 因此测宽仪需…

项目综合实训,vrrp+bfd,以及策略路由的应用

目录 一&#xff0e; 项目需求 二&#xff0e; Visio设备画图 三&#xff0e; 设备选型 三&#xff0e;vlan规划 四&#xff0e;Ip地址规划 五&#xff0e;实验拓扑图 六&#xff0e;配置过程及结果 项目需求 1.S1作为VLAN10的主网关和根桥&#xff0c;S2作为v…

【C语法学习】5 - fputc()函数

文章目录 1 函数原型2 参数3 返回值4 示例4.1 示例14.2 示例24.3 示例3 1 函数原型 fputc()&#xff1a;将一个字符发送至指定流stream&#xff0c;函数原型如下&#xff1a; int fputc(int c, FILE *stream);2 参数 fputc()函数有两个参数c和stream&#xff1a; 参数c是待…

【JAVA学习笔记】 56 - 开发中如何选择集合实现类,以及Collection工具类

项目代码 https://github.com/yinhai1114/Java_Learning_Code/blob/main/IDEA_Chapter14/src/com/yinhai/Collections_.java 在开发中&#xff0c;选择什么集合实现类&#xff0c;主要取决于业务操作特点&#xff0c;然后根据集合实现类特性进行 选择&#xff0c;分析如下: 0.…

npm工具使用方法介绍

npm 使用方法 文章目录 npm 使用方法安装 npm初始化项目安装依赖更新依赖卸载依赖发布包其他命令下载相关 npm 是 Node.js 的包管理工具&#xff0c;用于管理 Node.js 项目的依赖关系。npm 提供了丰富的命令和功能&#xff0c;可以帮助开发者快速构建和部署 Node.js 应用程序。…

Servlet

Servlet是运行在服务端的小型Java程序&#xff0c;是sun公司提供一套规范&#xff0c;用来处理客户端请求&#xff0c;响应给浏览器的动态资源。但servlet的实质就是Java代码&#xff0c;通过Java的API动态的向客户端输出内容&#xff08;HTML&#xff09; 一、使用servlet2.5实…

量化交易Copula建模应对市场低迷

一、简介 传统上,我们依靠相关矩阵来理解资产间的动态。然而,正如过去的市场崩盘所表明的那样,当风暴袭来时,许多模型都会陷入混乱。突然之间,相关性似乎趋于一致,而多样化这一经常被吹捧的风险管理口号似乎并没有提供什么庇护。 这种出乎意料的同步,即资产在经济低迷时…

虹科分享 | 太赫兹成像技术透视分层结构助力文物研究

文章来源&#xff1a;虹科光电Hophotonix 阅读链接&#xff1a;虹科分享 | 太赫兹成像技术透视分层结构助力文物研究 对于时间分辨成像方法来说&#xff0c;分层结构的无创检测具有挑战性&#xff0c;其中分辨率和对比度可能会因层间反射和色散的突出信号衰减而受到影响。在一…

【Java 进阶篇】Java Response 输出字符数据案例

在Java Web开发中&#xff0c;使用HTTP响应对象&#xff08;Response&#xff09;来向客户端发送数据是一项非常重要的任务。本篇博客将详细介绍如何使用Java中的Response对象来输出字符数据&#xff0c;并提供示例代码以帮助读者更好地理解和应用这一概念。不仅将讨论基础知识…

Redis 原理缓存过期、一致性hash、雪崩、穿透、并发、布隆、缓存更新策略、缓存数据库一致性

redis过期策略 redis的过期策略可以通过配置文件进行配置 一、定期删除 redis会把设置了过期时间的key放在单独的字典中&#xff0c;定时遍历来删除到期的key。 1&#xff09;.每100ms从过期字典中 随机挑选20个&#xff0c;把其中过期的key删除&#xff1b; 2&#xff09;.…

前端食堂技术周刊第 102 期:Next.js 14、Yarn 4.0、State of HTML、SEO 从 0 到 1

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;肥牛宽粉 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…

MS3142电机驱动器可兼容LV8548M

MS3142/MS3142S 是一个双全桥电机驱动。可兼容LV8548M&#xff08;功能基本一致&#xff0c;管脚不兼容&#xff09;。电源电压供电范围 4V 到 18V&#xff0c;平均电流 1.1A&#xff0c;电流峰值 1.54A。如果需要更高的电流能力&#xff0c;可以将双全桥并联使用。 四个输入脚…

11月的『备考学习计划』+高效的作息时间表 超好用~

每日作息时间表 每天有三个时间段学习效率高 上午10点左右 下午4点左右 晚上8点-10点左右 坚持住了&#xff0c;学习效果事半功倍 有同感的同学 可以举举手&#x1f91a;&#xff0c;点点赞&#x1f493; 每日作息时间表 6:30-7:00起床 6:30---7:00是起床的最佳时刻&am…

Spring中Bean的完整生命周期!(Bean实例化的流程,Spring后处理器,循环依赖解释及解决方法)附案例演示

Bean实例化的基本流程 加载xml配置文件&#xff0c;解析获取配置中的每个的信息&#xff0c;封装成一个个的BeanDefinition对象将BeanDefinition存储在一个名为beanDefinitionMap的Map<String,BeanDefinition>中ApplicationContext底层遍历beanDefinitionMap&#xff0c…

MySQL开发者社区交流与分享心得

MySQL是一个流行的开源关系型数据库管理系统&#xff0c;它被广泛应用于各种规模的企业和组织中。为了更好地使用MySQL&#xff0c;许多开发者会加入MySQL开发者社区&#xff0c;与其他开发者交流和分享经验。本文将介绍一些MySQL开发者社区交流与分享的心得体会。 MySQL开发者…

虚拟人运营系统介绍丨支持实时互动/直播/短视频创作,赋能元宇宙营销

2023年&#xff0c;以虚拟人为代表的元宇宙营销成为品牌营销黑马。 品牌通过虚拟人IP运营&#xff0c;形成具有一定影响力的品牌效应&#xff0c;围绕“内容持续输出——粉丝沉淀——优质运营——商业变现”的创新模式&#xff0c;打破同质化营销形式&#xff0c;利用虚拟人IP以…