一行代碼禁止用戶調(diào)試前端代碼！

作者：CUGGZ 2023-09-12 10:10:57

開發(fā) 開發(fā)工具

有時(shí)候不希望用戶去調(diào)試或復(fù)制前端代碼，那該如何禁止用戶調(diào)試前端代碼呢？今天就來分享一個(gè)開源的前端工具：Disable Devtool，一行代碼禁用 Web 開發(fā)者工具！

功能簡(jiǎn)介

disable-devtool 可以禁用一切可以進(jìn)入開發(fā)者工具的方法，阻止通過開發(fā)者工具進(jìn)行的“代碼抓取”。

它具有以下特點(diǎn)：

支持可配置是否禁用右鍵菜單。
取消 f12 和 ctrl+shift+i 等快捷鍵。
支持識(shí)別從瀏覽器菜單欄打開開發(fā)者工具并關(guān)閉當(dāng)前頁(yè)面。
開發(fā)者可以繞過拒絕（url參數(shù)使用tk配合md5加密）。
多種監(jiān)測(cè)模式，支持幾乎所有瀏覽器（IE,360,QQ瀏覽器,FireFox,Chrome,Edge...）。
高度可配置、使用極簡(jiǎn)、體積緊湊。
支持npm引用和腳本標(biāo)簽引用（屬性配置）。
識(shí)別真移動(dòng)端與瀏覽器開發(fā)者工具設(shè)置插件格式化的移動(dòng)端，為移動(dòng)端節(jié)省性能。
支持識(shí)別開發(fā)者工具關(guān)閉事件。
支持可配置是否取消選擇、復(fù)制、剪切、粘貼功能。
支持識(shí)別eruda和vconsole調(diào)試工具。
支持掛起和恢復(fù)支架工作。
支持配置ignore屬性，默認(rèn)自定義控制是否啟用。
支持配置 iframe 中所有父頁(yè)面的開發(fā)者工具禁用。

基本使用

推薦使用 npm 進(jìn)行安裝（使用script腳本會(huì)被代理單獨(dú)攔截掉從而無法執(zhí)行），安裝 disable-devtool：

npm i disable-devtool

基本使用：

import DisableDevtool from 'disable-devtool';

DisableDevtool(options);

這里的 options 就是配置項(xiàng)。可配置參數(shù)如下：

interface IConfig {
    md5?: string; // 繞過禁用的md5值，詳情見3.2，默認(rèn)不啟用繞過禁用
    url?: string; // 關(guān)閉頁(yè)面失敗時(shí)的跳轉(zhuǎn)頁(yè)面，默認(rèn)值為localhost
    tkName?: string; // 繞過禁用時(shí)的url參數(shù)名稱，默認(rèn)為 ddtk
    ondevtoolopen?(type: DetectorType, next: Function): void; // 開發(fā)者面板打開的回調(diào)，啟用時(shí)url參數(shù)無效，type 為監(jiān)測(cè)模式，詳見3.5， next函數(shù)是關(guān)閉當(dāng)前窗口
    ondevtoolclose?(): void; // 開發(fā)者面板關(guān)閉的回調(diào)
    interval?: number; // 定時(shí)器的時(shí)間間隔 默認(rèn)200ms
    disableMenu?: boolean; // 是否禁用右鍵菜單 默認(rèn)為true
    stopIntervalTime?: number; // 在移動(dòng)端時(shí)取消監(jiān)視的等待時(shí)長(zhǎng)
    clearIntervalWhenDevOpenTrigger?: boolean; // 是否在觸發(fā)之后停止監(jiān)控 默認(rèn)為false， 在使用ondevtoolclose時(shí)該參數(shù)無效
    detectors?: Array<DetectorType>; // 啟用的檢測(cè)器 檢測(cè)器詳情見 3.5 默認(rèn)為全部，建議使用全部
    clearLog?: boolean; // 是否每次都清除log
    disableSelect?: boolean; // 是否禁用選擇文本 默認(rèn)為false
    disableCopy?: boolean; // 是否禁用復(fù)制 默認(rèn)為false
    disableCut?: boolean; // 是否禁用剪切 默認(rèn)為false
    disablePaste: boolean; // 是否禁用粘貼 默認(rèn)為false
    ignore?: (string|RegExp)[] | null | (()=>boolean); // 某些情況忽略禁用
    disableIframeParents?: boolean; // iframe中是否禁用所有父窗口
    timeOutUrl?: // 關(guān)閉頁(yè)面超時(shí)跳轉(zhuǎn)的url;
}

DisableDevtool 的返回值類型如下：

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

Disable-Devtool 有以下監(jiān)測(cè)模式，使用 detectors 定義：

enum DetectorType {
  Unknown = -1,
  RegToString = 0, // 根據(jù)正則檢測(cè)
  DefineId, // 根據(jù)dom id檢測(cè)
  Size, // 根據(jù)窗口尺寸檢測(cè)
  DateToString, // 根據(jù)Date.toString 檢測(cè)
  FuncToString, // 根據(jù)Function.toString 檢測(cè)
  Debugger, // 根據(jù)斷點(diǎn)檢測(cè)，僅在ios chrome 真機(jī)情況下有效
  Performance, // 根據(jù)log大數(shù)據(jù)性能檢測(cè)
  DebugLib, // 檢測(cè)第三方調(diào)試工具 eruda 和 vconsole   
};

ondevtoolopen 事件的回調(diào)參數(shù)就是被觸發(fā)的監(jiān)測(cè)模式。可以在 ondevtoolopen 里執(zhí)行業(yè)務(wù)邏輯，比如做數(shù)據(jù)上報(bào)、用戶行為分析等：

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

那么問題來了，如果把 Devtools 禁用了，那如果線上應(yīng)用出了問題，作為應(yīng)用的開發(fā)者，也是無法調(diào)試的，怎么辦呢？該工具的作者當(dāng)然想到了這一點(diǎn)，它使用 key 與 md5 配合的方式使開發(fā)者可以在線上繞過禁用。

使用流程：指定一個(gè) key a（該值不要記錄在代碼中），使用 md5 加密得到一個(gè)值 b，將 b 作為 md5 參數(shù)傳入，開發(fā)者在訪問 url 的時(shí)候只需要帶上url參數(shù) ?ddtk=a即可繞過禁用。

disableDevtool對(duì)象暴露了 md5 方法，可供開發(fā)者加密時(shí)使用：

DisableDevtool.md5('xxx');

責(zé)任編輯：姜華來源：前端充電寶

開發(fā)者工具開源