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

简介: 在如今的互联网时代,网页源码的保护显得尤为重要,特别是前端代码,几乎就是明文展示,很容易造成源码泄露,黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的 Web 开发者工具面板,今天推荐一个不错的 npm 库,可以帮助开发者更好地保护自己的网站源码,本文将介绍该库的功能和使用方法。功能介绍npm 库名称:disable-devtool,github 路径:/theajack/disable-devtool。从 f12 按钮,右键单击和浏览器菜单都可以禁用 Web 开发工具。🚀 一行代码搞定禁用 web 开发者工具该库有以下特性:• 支持可配

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

功能介绍

npm 库名称:disable-devtool,github 路径:/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 脚本可以被代理单独拦截掉从而无法执行。

css

npm i disable-devtool

javascript

import DisableDevtool from 'disable-devtool';

DisableDevtool(options);

1.2 script 方式使用

xml

<script disable-devtool-auto src='/npm/disable-devtool'></script>

或者通过版本引用:

xml

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

1.3 npm 方式 options 参数说明

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

typescript

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 方式使用属性配置

ini

<script 
    disable-devtool-auto
    src='https://www.fgba.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 里执行业务逻辑,比如做数据上报、用户行为分析等。

scss

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 方法,可供开发者加密时使用:

arduino

DisableDevtool.md5('xxx');

更多细节可查阅官方文档。

最后

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

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

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

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

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


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


目录
相关文章
|
5月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
277 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
6月前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
442 17
Selenium:强大的 Web 自动化测试工具
|
6月前
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
203 7
Spring Boot 入门:简化 Java Web 开发的强大工具
|
7月前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
255 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
6月前
|
开发框架 .NET PHP
ASP.NET Web Pages - 添加 Razor 代码
ASP.NET Web Pages 使用 Razor 标记添加服务器端代码,支持 C# 和 Visual Basic。Razor 语法简洁易学,类似于 ASP 和 PHP。例如,在网页中加入 `@DateTime.Now` 可以实时显示当前时间。
|
8月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
303 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
7月前
|
前端开发 JavaScript 开发者
构建响应式设计的现代Web应用:实用技巧与工具
【10月更文挑战第24天】本文介绍了构建响应式Web应用的实用技巧和工具,涵盖流体网格布局、弹性图片、CSS媒体查询、CSS Grid和Flexbox、响应式导航菜单、图片和字体的响应式处理,以及测试和调试工具。掌握这些技能将帮助开发者提升用户体验和项目适应性。
|
8月前
|
缓存 前端开发 JavaScript
深入了解Webpack:现代Web开发的核心工具
【10月更文挑战第11天】深入了解Webpack:现代Web开发的核心工具
|
8月前
|
JavaScript 前端开发 API
深入了解jQuery:简化Web开发的强大工具
【10月更文挑战第11天】深入了解jQuery:简化Web开发的强大工具
68 0
|
8月前
|
开发框架 .NET 开发工具
visualstudio如何加入工作插件---Web developer工具
visualstudio如何加入工作插件---Web developer工具
123 0

热门文章

最新文章

下一篇
oss创建bucket