快捷導(dǎo)航

disable-devtool禁用web開發(fā)者工具保護(hù)網(wǎng)頁源碼

更新時間：2023年11月02日 09:12:45 作者：南城FE

這篇文章主要為大家介紹了disable-devtool禁用web開發(fā)者工具保護(hù)網(wǎng)頁源碼的使用，防止源碼泄露保護(hù)網(wǎng)站源碼的最佳解決方案，一行代碼就可以搞定，有需要的可以學(xué)習(xí)參考下

引言

在如今的互聯(lián)網(wǎng)時代，網(wǎng)頁源碼的保護(hù)顯得尤為重要，特別是前端代碼，幾乎就是明文展示，很容易造成源碼泄露，黑客和惡意用戶往往會利用瀏覽器的開發(fā)者工具來竊取網(wǎng)站的敏感信息。為了有效防止用戶打開瀏覽器的Web開發(fā)者工具面板，今天推薦一個不錯的npm庫，可以幫助開發(fā)者更好地保護(hù)自己的網(wǎng)站源碼，接下來就介紹該庫的功能和使用方法。

功能介紹

npm庫名稱：disable-devtool，github地址：github.com/theajack/disable-devtool。從f12按鈕，右鍵單擊和瀏覽器菜單都可以禁用Web開發(fā)工具。

?? 一行代碼搞定禁用web開發(fā)者工具

該庫有以下特性:

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

使用方法

使用該庫非常簡單，只需按照以下步驟進(jìn)行操作：

1.1 npm 引用

推薦使用這種方式安裝使用，使用script腳本可以被代理單獨攔截掉從而無法執(zhí)行。

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參數(shù)說明

options中的參數(shù)與說明如下，各方面的配置相當(dāng)完善。

interface IConfig {
    md5?: string; // 繞過禁用的md5值，默認(rèn)不啟用繞過禁用
    url?: string; // 關(guān)閉頁面失敗時的跳轉(zhuǎn)頁面，默認(rèn)值為localhost
    tkName?: string; // 繞過禁用時的url參數(shù)名稱，默認(rèn)為 ddtk
    ondevtoolopen?(type: DetectorType, next: Function): void; // 開發(fā)者面板打開的回調(diào)，啟用時url參數(shù)無效，type 為監(jiān)測模式， next函數(shù)是關(guān)閉當(dāng)前窗口
    ondevtoolclose?(): void; // 開發(fā)者面板關(guān)閉的回調(diào)
    interval?: number; // 定時器的時間間隔 默認(rèn)200ms
    disableMenu?: boolean; // 是否禁用右鍵菜單 默認(rèn)為true
    stopIntervalTime?: number; // 在移動端時取消監(jiān)視的等待時長
    clearIntervalWhenDevOpenTrigger?: boolean; // 是否在觸發(fā)之后停止監(jiān)控 默認(rèn)為false， 在使用ondevtoolclose時該參數(shù)無效
    detectors?: Array<DetectorType>; // 啟用的檢測器 檢測器詳情
    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)閉頁面超時跳轉(zhuǎn)的url;
}
enum DetectorType {
  Unknown = -1,
  RegToString = 0, // 根據(jù)正則檢測
  DefineId, // 根據(jù)dom id檢測
  Size, // 根據(jù)窗口尺寸檢測
  DateToString, // 根據(jù)Date.toString 檢測
  FuncToString, // 根據(jù)Function.toString 檢測
  Debugger, // 根據(jù)斷點檢測，僅在ios chrome 真機情況下有效
  Performance, // 根據(jù)log大數(shù)據(jù)性能檢測
  DebugLib, // 檢測第三方調(diào)試工具 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 事件監(jiān)聽

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

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

1.6 md5 與 tk 繞過禁用

該庫中使用 key 與 md5 配合的方式使得開發(fā)者可以在線上繞過禁用。

流程如下：

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

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

DisableDevtool.md5('xxx');

更多細(xì)節(jié)可查閱官方文檔，中文文檔地址：https://github.com/theajack/disable-devtool/blob/master/README.cn.md

最后

盡管該庫可以有效地禁用瀏覽器的開發(fā)者工具面板，但仍然需要注意以下幾點：

該庫只能禁用開發(fā)者工具的面板，無法阻止用戶通過其他途徑訪問網(wǎng)頁源碼。因此，建議結(jié)合其他安全措施來保護(hù)網(wǎng)站。
禁用開發(fā)者工具可能會對網(wǎng)站的調(diào)試和維護(hù)造成一定的困擾。需要調(diào)試線上代碼的時候可以使用上述1.6繞過禁用進(jìn)行調(diào)試。
該庫僅適用于現(xiàn)代瀏覽器，對于一些較舊的瀏覽器可能存在兼容性問題。在使用前請確保測試過兼容性。

為了進(jìn)一步加強網(wǎng)頁源碼的安全性，我們可以采取以下額外措施：