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

2024-07-09
福建
本文字数：2927 字
阅读完需：约 10 分钟

在如今的互联网时代，网页源码的保护显得尤为重要，特别是前端代码，几乎就是明文展示，很容易造成源码泄露，黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的 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; // 关闭页面失败时的跳转页面，默认值为localhost    tkName?: string; // 绕过禁用时的url参数名称，默认为 ddtk    ondevtoolopen?(type: DetectorType, next: Function): void; // 开发者面板打开的回调，启用时url参数无效，type 为监测模式， next函数是关闭当前窗口    ondevtoolclose?(): void; // 开发者面板关闭的回调    interval?: number; // 定时器的时间间隔 默认200ms    disableMenu?: boolean; // 是否禁用右键菜单 默认为true    stopIntervalTime?: number; // 在移动端时取消监视的等待时长    clearIntervalWhenDevOpenTrigger?: boolean; // 是否在触发之后停止监控 默认为false， 在使用ondevtoolclose时该参数无效    detectors?: Array<DetectorType>; // 启用的检测器 检测器详情    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;}
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-auto    src='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，并结合其他安全措施，我们可以有效地降低用户访问和修改源代码的风险。但是绝对的安全是不存在的，因此定期更新和加强安全性措施也是必要的。

创作场景

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

功能介绍

使用方法

1.1 npm 引用

1.2 script 方式使用

1.3 npm 方式 options 参数说明

1.4 script 方式使用属性配置

1.5 事件监听

1.6 md5 与 tk 绕过禁用

最后

相关推荐

秃头小帅oi

评论