admin 管理员组文章数量: 1184232
鼠标键盘事件方式禁止：
禁用快捷键与右键菜单
// 这里展示win系统的浏览器
// 禁用F12、Ctrl+Shift+I等快捷键
document.addEventListener('keydown', (e) => {
if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.code === 'KeyI')) {
e.preventDefault();
}
});
// 禁用右键菜单
document.addEventListener('contextmenu', e => e.preventDefault());这种方式的缺点是用户仍可通过浏览器菜单或提前打开开发者工具绕过。
这里比较推荐使用第三方库disable-devtool来实现，官网地址：disable-devtool
什么是“disable-devtool”？
“disable-devtool”是一个JavaScript库，旨在通过多种方式禁用浏览器的开发者工具，例如按F12、右键点击“检查元素”或通过浏览器菜单打开开发者工具。
功能
1、disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’，该库有以下特性:
- 支持可配置是否禁用右键菜单
- 禁用 f12 和 ctrl+shift+i 等快捷键
- 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
- 开发者可以绕过禁用 (url参数使用tk配合md5加密)
- 多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge...）
- 高度可配置、使用极简、体积小巧
- 支持npm引用和script标签引用(属性配置)
- 识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能
- 支持识别开发者工具关闭事件
- 支持可配置是否禁用选择、复制、剪切、粘贴功能
- 支持识别 eruda 和 vconsole 调试工具
- 支持挂起和恢复探测器工作
- 支持配置ignore属性，用以自定义控制是否启用探测器
- 支持配置iframe中所有父页面的开发者工具禁用
2、“disable-devtool”支持多种检测模式来识别开发者工具的打开尝试（DetectorType枚举），包括：
- RegToString：根据正则表达式检查。
- DefineId：基于DOM ID检测。
- Size：基于窗口大小检测（在0.3.5版本后默认禁用）。
- Debugger：根据断点检测，仅在iOS Chrome真实设备上有效。
- DebugLib：检测第三方调试工具如eruda和vconsole。
这些检测模式确保了在不同浏览器（IE、360、QQ浏览器、Firefox、Chrome、Edge等）上的兼容性，同时支持识别真实移动终端与浏览器开发者工具伪装的移动终端。
如何使用？
示例代码如下：
DisableDevtool({
md5: '9468e356fcf902d70a3fb47b911499d5', // 加密绕过密钥 ‘disable-devtool’的md5码
tkName: 'tkn',
disableMenu: true, // 禁用右键菜单
detectors: [0, 1, 2, 3, 7], // 启用所有检测模式
ondevtoolopen(type) {
window.location.href = '/';
}
});假设正在使用的本地web服务地址为http://localhost:8080，启用上述配置后，如果需要开启浏览器的开发者工具，只能在地址栏输入http://localhost:8080?tkn=disable-devtool后才能跳过拦截
DisableDevtool的配置项如下所示：
interface IConfig {
md5: string; // 绕过禁用的md5值，详情见3.2，默认不启用绕过禁用
url: string; // 关闭页面失败时的跳转页面，默认值为localhost
timeOutUrl: string; // 关闭页面超时跳转的url
tkName: string; // 绕过禁用时的url参数名称，默认为 ddtk
ondevtoolopen(type: DetectorType, next: Function): void; // 开发者面板打开的回调，启用时url参数无效
ondevtoolclose: Function | null;
interval: number; // 定时器的时间间隔 默认200ms
disableMenu: boolean; // 是否禁用右键菜单 默认为true
stopIntervalTime: number; // 在移动端时取消监视的等待时长
clearIntervalWhenDevOpenTrigger: boolean; // 是否在触发之后停止监控
detectors: DetectorType[] | 'all'; // 启用的监测器 默认为全部
clearLog: boolean; // 是否每次都清除log
disableSelect: boolean; // 是否禁用选择文本 默认为false
disableCopy: boolean; // 是否禁用复制 默认为false
disableCut: boolean; // 是否禁用剪切 默认为false
disablePaste: boolean; // 是否禁用粘贴 默认为false
ignore: (string|RegExp)[] | null | (()=>boolean); // 某些情况忽略禁用
disableIframeParents: boolean; // iframe中是否禁用所有父窗口，默认 true
seo: boolean; // 是否启用对seo进行保护，默认 true
rewriteHTML: string; // 检测到打开之后重写页面
}版权声明：本文标题：禁止用户打开浏览器开发者工具 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1768017984a3526578.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论