一行代码搞定禁用 web 开发者工具
![一行代码搞定禁用web开发者工具](https://static001.geekbang.org/infoq/8f/8fedbaa16b6631adccf062c1e1920c4a.png)
在如今的互联网时代,网页源码的保护显得尤为重要,特别是前端代码,几乎就是明文展示,很容易造成源码泄露,黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的 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 脚本可以被代理单独拦截掉从而无法执行。
1.2 script 方式使用
或者通过版本引用:
1.3 npm 方式 options 参数说明
options 中的参数与说明如下,各方面的配置相当完善。
1.4 script 方式使用属性配置
1.5 事件监听
ondevtoolopen 事件的回调参数就是被触发的监测模式。可以在 ondevtoolopen 里执行业务逻辑,比如做数据上报、用户行为分析等。
1.6 md5 与 tk 绕过禁用
该库中使用 key 与 md5 配合的方式使得开发者可以在线上绕过禁用。
流程如下:
先指定一个 key a(该值不要记录在代码中),使用 md5 加密得到一个值 b,将 b 作为 md5 参数传入,开发者在访问 url 的时候只需要带上 url 参数 ddtk=a,便可以绕过禁用。
disableDevtool 对象暴露了 md5 方法,可供开发者加密时使用:
更多细节可查阅官方文档,中文文档地址:https://github.com/theajack/disable-devtool/blob/master/README.cn.md
最后
尽管该库可以有效地禁用浏览器的开发者工具面板,但仍然需要注意以下几点:
该库只能禁用开发者工具的面板,无法阻止用户通过其他途径访问网页源码。因此,建议结合其他安全措施来保护网站。
禁用开发者工具可能会对网站的调试和维护造成一定的困扰。需要调试线上代码的时候可以使用上述 1.6 绕过禁用进行调试。
该库仅适用于现代浏览器,对于一些较旧的浏览器可能存在兼容性问题。在使用前请确保测试过兼容性。
为了进一步加强网页源码的安全性,我们可以采取以下额外措施:
加密敏感代码,使用加密算法对关键代码进行加密,以防止非授权访问和修改。
使用服务器端渲染,将网页的渲染过程放在服务器端,只返回最终渲染结果给客户端,隐藏源代码和逻辑。
定期更新代码,定期更新代码库以充分利用新的安全特性和修复已知漏洞。
保护网页源码的安全性对于 Web 开发至关重要。通过使用 npm 库disable-devtool
,并结合其他安全措施,我们可以有效地降低用户访问和修改源代码的风险。但是绝对的安全是不存在的,因此定期更新和加强安全性措施也是必要的。
相关推荐
前端的世界总是在不断变化,作为开发者,我们需要保持好奇心和学习热情,不断探索新的技术,只有这样,我们才能在这个快速发展的时代中立于不败之地。低代码也是一个值得我们深入探索的领域,让我们拭目以待,它将给前端世界带来怎样的变革。
介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。
JNPF 可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量,通过图形化、可视化的界面,以拖放组件的方式,即可快速生成应用程序的产品,大幅降低了开发企业管理类软件的难度。
希望这篇文章对你有所帮助~
评论