糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

禁止用户调试前端代码

禁止用户调试前端代码

原创 新闻资讯

于 2023-09-20 13:08:37 发布

16111 浏览

如果你不希望用户调试或复制你的前端代码,你可以采取一些措施来保护你的代码。一种方法是使用代码混淆和压缩技术,这可以使代码更难以理解和修改。另外,你可以使用 Content Security Policy (CSP) 来限制用户可以执行的脚本,这可以防止一些跨站脚本攻击。


此外,你可以考虑使用一些开源的前端工具,如 Disable Devtool,它可以一行代码禁用 Web 开发者工具。然而,需要注意的是,禁止用户调试前端代码可能会给开发带来不便,并且可能违反一些安全和道德准则。相反,你可以采取其他措施来保护你的代码和用户的安全。


功能简介

disable-devtool 可以禁用一切可以进入开发者工具的方法,阻止通过开发者工具进行的“代码抓取”。


它具有以下特点:

•  支持可配置是否禁用右键菜单

•  取消 f12 和 ctrl+shift+i 等快捷键

•  支持识别从浏览器菜单栏打开开发者工具并关闭当前页面

•  开发者可以绕过拒绝(url参数使用tk配合md5加密)

•  多种监测模式,支持几乎所有浏览器(IE,360,QQ浏览器,FireFox,Chrome,Edge...)

•  高度可配置、使用极简、体积紧凑

•  支持npm引用和脚本标签引用(属性配置)

•  识别真移动端与浏览器开发者工具设置插件格式化的移动端,为移动端节省性能

•  支持识别开发者工具关闭事件

•  支持可配置是否取消选择、复制、剪切、粘贴功能

•  支持识别eruda和vconsole调试工具

•  支持挂起和恢复支架工作

•  支持配置ignore属性,默认自定义控制是否启用

•  支持配置 iframe 中所有父页面的开发者工具禁用


基本使用

推荐使用 npm 进行安装(使用script脚本会被代理单独拦截掉从而无法执行),安装 disable-devtool:

npm i disable-devtool

基本使用:

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

这里的 options 就是配置项。可配置参数如下:

interface IConfig {
    md5?: string; // 绕过禁用的md5值,详情见3.2,默认不启用绕过禁用
    url?: string; // 关闭页面失败时的跳转页面,默认值为localhost
    tkName?: string; // 绕过禁用时的url参数名称,默认为 ddtk
    ondevtoolopen?(type: DetectorType, next: Function): void; // 开发者面板打开的回调,启用时url参数无效,type 为监测模式,详见3.5, next函数是关闭当前窗口
    ondevtoolclose?(): void; // 开发者面板关闭的回调
    interval?: number; // 定时器的时间间隔 默认200ms
    disableMenu?: boolean; // 是否禁用右键菜单 默认为true
    stopIntervalTime?: number; // 在移动端时取消监视的等待时长
    clearIntervalWhenDevOpenTrigger?: boolean; // 是否在触发之后停止监控 默认为false, 在使用ondevtoolclose时该参数无效
    detectors?: Array<DetectorType>; // 启用的检测器 检测器详情见 3.5 默认为全部,建议使用全部
    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;
}

DisableDevtool 的返回值类型如下:

interface IDDResult {
    success: boolean; // 表示是否正常启用
    reason: string; // 未正常启用的原因
}

Disable-Devtool 有以下监测模式,使用 detectors 定义:

enum DetectorType {
  Unknown = -1,
  RegToString = 0, // 根据正则检测
  DefineId, // 根据dom id检测
  Size, // 根据窗口尺寸检测
  DateToString, // 根据Date.toString 检测
  FuncToString, // 根据Function.toString 检测
  Debugger, // 根据断点检测,仅在ios chrome 真机情况下有效
  Performance, // 根据log大数据性能检测
  DebugLib, // 检测第三方调试工具 eruda 和 vconsole   
};

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

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

那么问题来了,如果把 Devtools 禁用了,那如果线上应用出了问题,作为应用的开发者,也是无法调试的,怎么办呢?该工具的作者当然想到了这一点,它使用 key 与 md5 配合的方式使开发者可以在线上绕过禁用。


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


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

DisableDevtool.md5('xxx');

web前端

网站开发

小程序开发

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 3. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情