記錄--別想除錯我的前端頁面程式碼

林恒發表於2024-07-31
除錯前端

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

這裡我們不介紹禁止右鍵選單, 禁止F12快捷鍵和程式碼混淆方案。

無限debugger

  • 前端頁面防止除錯的方法主要是透過不斷 debugger 來瘋狂輸出斷點，因為 debugger 在控制檯被開啟的時候就會執行
  • 由於程式被 debugger 阻止，所以無法進行斷點除錯，所以網頁的請求也是看不到的.

基礎方案

(() => {
  function ban() {
    setInterval(() => { debugger; }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();
  • 將 setInterval 中的程式碼寫在一行，可以禁止使用者斷點，即使新增 logpoint 為 false 也無用
  • 當然即使有些人想到用左下角的格式化程式碼，將其變成多行也是沒用的

瀏覽器寬高

根據瀏覽器寬高、與開啟F12後的寬高進行比對，有差值，說明開啟了除錯，則替換html內容；

  • 透過檢測視窗的外部高度和寬度與內部高度和寬度的差值，如果差值大於 200，就將頁面內容設定為 "檢測到非法除錯"。
  • 透過使用間隔為 50 毫秒的定時器，在每次間隔內執行一個函式，該函式透過建立一個包含 debugger 語句的函式，並立即呼叫該函式的方式來試圖阻止偵錯程式的正常使用。
(() => {
  function block() {
    if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
      document.body.innerHTML = "檢測到非法除錯";
    }
    setInterval(() => {
      (function () {
        return false;
      }
      ['constructor']('debugger')
      ['call']());
    }, 50);
  }
  try {
    block();
  } catch (err) { }
})();

關閉斷點，調整空頁面

在不開啟發者工具的情況下，debugger是不會執行將頁面卡住，而恰恰是利用debugger的這一點，如果你開啟開發者工具一定會被debugger卡住，那麼上下文時間間隔就會增加，在對時間間隔進行判斷，就能巧妙的知道絕對開了開發者工具，隨後直接跳轉到空白頁，一氣呵成。(文心一言採用方案)

setInterval(function () {
  var startTime = performance.now();
  // 設定斷點
  debugger;
  var endTime = performance.now();
  // 設定一個閾值，例如100毫秒
  if (endTime - startTime > 100) {
    window.location.href = 'about:blank';
  }
}, 100);

第三方外掛

disable-devtool

disable-devtool可以禁用所有一切可以進入開發者工具的方法，防止透過開發者工具進行的程式碼搬運。

該庫有以下特性:

  1. 支援可配置是否禁用右鍵選單
  2. 禁用 f12 和 ctrl+shift+i 等快捷鍵
  3. 支援識別從瀏覽器選單欄開啟開發者工具並關閉當前頁面
  4. 開發者可以繞過禁用 (url引數使用tk配合md5加密)
  5. 多種監測模式，支援幾乎所有瀏覽器（IE,360,qq瀏覽器,FireFox,Chrome,Edge...）
  6. 高度可配置、使用極簡、體積小巧
  7. 支援npm引用和script標籤引用(屬性配置)
  8. 識別真移動端與瀏覽器開發者工具設定外掛偽造的移動端，為移動端節省效能
  9. 支援識別開發者工具關閉事件
  10. 支援可配置是否禁用選擇、複製、剪下、貼上功能
  11. 支援識別 eruda 和 vconsole 除錯工具
  12. 支援掛起和恢復探測器工作
  13. 支援配置ignore屬性，用以自定義控制是否啟用探測器
  14. 支援配置iframe中所有父頁面的開發者工具禁用

🦂使用🦂

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>

更多使用方法參見官網：disable-devtool

disable-devtool

console-ban禁止 F12 / 審查開啟控制檯，保護站點資源、減少爬蟲和攻擊的輕量方案，支援重定向、重寫、自定義多種策略。

使用

<head>
  <!-- ... -->
  <script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
  <script>
    // default options
    ConsoleBan.init()
    // custom options
    ConsoleBan.init({
      redirect: '/404'
    })
  </script>
</head>

在專案中使用：

  yarn add console-ban
import { init } from 'console-ban'
​
init(options)

重定向

ConsoleBan.init({
  // 重定向至 /404 相對地址
  redirect: '/404',
  // 重定向至絕對地址
  redirect: 'http://domain.com/path'
})

使用重定向策略可以將使用者指引到友好的相關資訊地址（如網站介紹），亦或是純靜態 404 頁面，高防的邊緣計算或驗證碼等頁面。

注：若重定向後的地址可以透過 SPA 路由切換或 pjax 區域性載入技術等進行非真正意義上的頁面切換，則切換後的控制檯監測將不會再次生效，對於 SPA 你可以在路由衛士處重新註冊本例項，其他情況請引導至真正的其他頁面。

重寫

var div = document.createElement('div')
div.innerHTML = '不要偷看啦~'
​
ConsoleBan.init({
  // 重寫 body 為字串
  write: '<h1> 不要偷看啦~ </h1>',
  // 可傳入節點物件
  write: div
})

重寫策略可以完全阻斷對網站內容的審查，但較不友好，不推薦使用。

回撥函式

ConsoleBan.init({
  callback: () => {
    // ...
  }
})

回撥函式支援自定義開啟控制檯後的策略。

引數

注：redirect、write、callback 三種策略只能取其一，優先使用回撥函式。

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

相關文章