阻止某些網站中，debug調試跳轉頁面的方法

問題發生背景：

某些網站利用js代碼，阻止用戶使用F12打開debug調試，經過查看網頁源代碼，發現如下代碼：

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

以上代碼建立了一個<img>標籤，利用Object.defineProperty方法，在這個img上定義了id的getter，每當打印element時，就會調用這個getter，跳轉到百度。

在知乎上也看到過這個阻止debug調試的方法，但沒有給出破解方法，最近連續在兩個網站中發現這個代碼，因而嘗試破解

瀏覽器：chrome

 

破解過程：

1. 毀掉console.log，從而阻止跳轉

　　在查閱相關解決方法時，找到https://segmentfault.com/q/1010000013487697，其中有一個方法，在書籤中添加 javascript:console.log=function(){};，點一下這個書籤來運行這段js代碼，從而毀掉console.log方法（此前都不知道書籤還能用來運行js，長知識了）。然而實際上，瀏覽器會先執行console.log(element)再執行console.log=function(){}，仍然會跳轉到百度，此方法失敗。

2. 監聽beforeunload事件

　　再次利用書籤的方法來運行js：javascript:window.addEventListener('beforeunload', function (e) { e.preventDefault();e.returnValue = '' });

　　經過監聽beforeunload事件並指定returnValue，瀏覽器會在網頁跳轉前詢問是否離開此網頁，點擊取消便可留在當前頁面。這樣當咱們打開debug調試時，就能夠取消頁面跳轉了。

 

一些迷惑：

1. console.log的執行時機：

　　在Chrome中，console.log在控制檯打開後才起做用，它的確是調用了，可是還沒打印，也就是尚未觸發<img>標籤id的getter；所以用書籤來毀掉console.log是在調用以後的，沒法阻止打開debug時打印<img>標籤從而觸發getter方法。若是咱們用書籤再次定義element的id的getter呢，結果也是失敗，由於對getter的從新定義也是在console.log調用以後發生的。這個console.log就像薛定諤的貓，當你打開debug它纔會打印，但它已經發生了，你改變不了它發生的事實，除非在網頁加載前就去掉這段代碼或毀掉console.log。

2. 刷新頁面讀取network的數據：

　　用debug調試讀取network發過來的數據，必需要刷新頁面，一旦刷新，咱們對beforeunload的監聽就會失效，一定觸發重定向，致使沒法獲取network中資源的請求和響應數據。這時候單純使用瀏覽器的debug調試就很難拿到這些數據了，能夠考慮使用postman直接抓包處理。

 

總結：

　　js代碼沒法阻止用戶使用debug調試，可是可以增長用戶調試的難度，要看你的頁面代碼始終有辦法。

　　那麼有沒有僅用瀏覽器獲取network數據的方法呢，可否在頁面運行上述代碼前毀掉console.log？各位大佬求解！

 

（這裏是前端小白Jiny，甚至還沒找到工做）

原文出處：https://www.cnblogs.com/jinyuu/p/11590343.html