禁止使用者開啟瀏覽器debug除錯視窗的方法

王子飛發表於2020-09-22
瀏覽器除錯

禁用方法

以下程式碼是檢視某個網站的時候發現的,的確很管用。

//debug除錯時跳轉頁面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="http://www.xxx.com/aboutus.html"}});
console.log(element);

上面這段程式碼的意思是：

  1. 建立一個<img>標籤，
  2. 利用Object.defineProperty方法，在這個img上定義了id的getter，
  3. 每當列印element(即定義的img)時，就會呼叫這個getter，跳轉到指定頁面。
  4. 在控制檯列印這個元素

破解方法：

以上方法的確在大部分瀏覽器中都奏效，作為碼農的我們當然是很好奇的，該如何破解這個限制呢？
其實破解方法很簡單,只要用到瀏覽器書籤欄，萬能的書籤不僅可以儲存連結，還可以執行 JS 程式碼。

  1. 建立一個書籤,在位址列存入如下程式碼
    javascript:window.addEventListener('beforeunload', function (e) { e.preventDefault();e.returnValue = '' });
  2. 透過監聽beforeunload事件並指定returnValue，瀏覽器會在網頁跳轉前詢問是否離開此網頁，點選取消即可留在當前頁面了。這樣當我們開啟debug除錯時，就可以取消頁面跳轉了。

console.log 的執行時機

在Chrome中，console.log 在控制檯開啟後才起作用，它的確是呼叫了，但是還沒列印，也就是還沒有觸發<img>標籤id的getter；因此用書籤來毀掉console.log是在呼叫之後的，無法阻止開啟debug時列印<img>標籤從而觸發getter方法。

重新整理頁面讀取network的資料

用debug除錯讀取network發過來的資料，必須要重新整理頁面，一旦重新整理，我們對beforeunload的監聽就會失效，必定觸發重定向，導致無法獲取network中資源的請求和響應資料。這時候單純使用瀏覽器的debug除錯就很難拿到這些資料了。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章