亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2023年11月02日 09:12:45   作者:南城FE  
這篇文章主要為大家介紹了disable-devtool禁用web開發(fā)者工具保護(hù)網(wǎng)頁源碼的使用,防止源碼泄露保護(hù)網(wǎng)站源碼的最佳解決方案,一行代碼就可以搞定,有需要的可以學(xué)習(xí)參考下

引言

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

功能介紹

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

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

該庫有以下特性:

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

使用方法

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

1.1 npm 引用

推薦使用這種方式安裝使用,使用script腳本可以被代理單獨(dú)攔截掉從而無法執(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)閉頁面失敗時(shí)的跳轉(zhuǎn)頁面,默認(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è)模式, 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è)器詳情
    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)閉頁面超時(shí)跳轉(zhuǎn)的url;
}
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   
};

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)測(cè)模式??梢栽?ondevtoolopen 里執(zhí)行業(yè)務(wù)邏輯,比如做數(shù)據(jù)上報(bào)、用戶行為分析等。

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

1.6 md5 與 tk 繞過禁用

該庫中使用 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');

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

最后

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

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

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

  • 加密敏感代碼,使用加密算法對(duì)關(guān)鍵代碼進(jìn)行加密,以防止非授權(quán)訪問和修改。
  • 使用服務(wù)器端渲染,將網(wǎng)頁的渲染過程放在服務(wù)器端,只返回最終渲染結(jié)果給客戶端,隱藏源代碼和邏輯。
  • 定期更新代碼,定期更新代碼庫以充分利用新的安全特性和修復(fù)已知漏洞。

保護(hù)網(wǎng)頁源碼的安全性對(duì)于Web開發(fā)至關(guān)重要。通過使用npm庫disable-devtool,并結(jié)合其他安全措施,我們可以有效地降低用戶訪問和修改源代碼的風(fēng)險(xiǎn)。但是絕對(duì)的安全是不存在的,因此定期更新和加強(qiáng)安全性措施也是必要的。

以上就是disable-devtool禁用web開發(fā)者工具保護(hù)網(wǎng)頁源碼的詳細(xì)內(nèi)容,更多關(guān)于disable-devtool禁用web的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論