說(shuō)在前面

作為一名開(kāi)發(fā)，相信大家對(duì)于瀏覽器控制臺(tái)都是不陌生的，平時(shí)頁(yè)面一出問(wèn)題第一反應(yīng)總是先打開(kāi)控制臺(tái)看看報(bào)錯(cuò)信息，而且還可以在控制臺(tái)里插入自己的腳本信息來(lái)修改頁(yè)面邏輯，那么你有沒(méi)有想過(guò) 怎么限制用戶打開(kāi)控制臺(tái) 呢？

禁用右鍵菜單 

在頁(yè)面上點(diǎn)擊鼠標(biāo)右鍵我們可以看到有個(gè) 檢查 選項(xiàng)，通過(guò)這個(gè)菜單可以直接打開(kāi)控制臺(tái)，我們可以直接在這個(gè)頁(yè)面上禁用右鍵菜單。

document.addEventListener("contextmenu", e => e.preventDefault());  

加上這段代碼后用戶在頁(yè)面上點(diǎn)擊右鍵就不會(huì)有反應(yīng)了。

攔截快捷鍵

除了右鍵菜單欄，還有最經(jīng)典的 F12 ，通過(guò) F12 快捷鍵也可以快速打開(kāi)控制臺(tái)，所以我們也可以將這個(gè)快捷鍵給攔截掉

document.addEventListener("keydown", e => {  
  if (e.keyCode === 123) {
    e.preventDefault();  
  }  
});

那么除了 F12 你知道還有什么快捷鍵可以打開(kāi)控制臺(tái)嗎？

• Ctrl+Shift+C
• Ctrl+Shift+I

上面這兩個(gè)快捷鍵也可以打開(kāi)控制臺(tái)，還有一個(gè)快捷鍵 Ctrl+U 可以打開(kāi)源碼頁(yè)面，這里我們也可以一起把它給攔截掉。

document.addEventListener("keydown", e => {  
  if (e.keyCode === 123 ||               // F12  
      (e.ctrlKey && e.shiftKey && e.keyCode === 67) || // Ctrl+Shift+C  
      (e.ctrlKey && e.shiftKey && e.keyCode === 73) || // Ctrl+Shift+I  
      (e.ctrlKey && e.keyCode === 85)) { // Ctrl+U  
    e.preventDefault();  
  }  
});  

加上這段代碼后用戶在頁(yè)面上按下這些快捷鍵就不會(huì)有反應(yīng)了。

檢測(cè)窗口變化

加上前面的攔截之后，其實(shí)我們還是有辦法打開(kāi)控制臺(tái)，可以通過(guò)瀏覽器設(shè)置來(lái)打開(kāi)控制臺(tái)，這里的入口我們并無(wú)法監(jiān)聽(tīng)攔截到

let lastWidth = window.innerWidth;
let lastHeight = window.innerHeight;

window.addEventListener("resize", () => {
  const widthDiff = Math.abs(window.innerWidth - lastWidth);
  const heightDiff = Math.abs(window.innerHeight - lastHeight);

  // 如果窗口尺寸變化但不是全屏切換，可能是控制臺(tái)打開(kāi)
  if ((widthDiff > 50 || heightDiff > 50) && !isFullScreen()) {
    //跳轉(zhuǎn)到空白頁(yè)面
    window.location.href = "about:blank";
    alert("檢測(cè)到異常窗口變化，請(qǐng)關(guān)閉開(kāi)發(fā)者工具");
  }
  lastWidth = window.innerWidth;
  lastHeight = window.innerHeight;
});

function isFullScreen() {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}

通常默認(rèn)是會(huì)在頁(yè)面內(nèi)靠邊打開(kāi)控制臺(tái)，所以可以通過(guò)監(jiān)聽(tīng)頁(yè)面大小變化來(lái)簡(jiǎn)單判斷是否打開(kāi)控制臺(tái)，監(jiān)聽(tīng)到打開(kāi)后直接跳轉(zhuǎn)到空白頁(yè)面。

但是還有這么兩種情況

• 全屏切換時(shí)的尺寸變化可能被誤判
• 獨(dú)立打開(kāi)控制臺(tái)頁(yè)面時(shí)無(wú)法監(jiān)聽(tīng)到

無(wú)限D(zhuǎn)ebugger

我們還可以通過(guò) Function("debugger") 來(lái)動(dòng)態(tài)生成斷點(diǎn)（動(dòng)態(tài)生成是為了防斷點(diǎn)禁用），通過(guò)無(wú)限循環(huán)生成斷點(diǎn)，讓頁(yè)面一直處于斷點(diǎn)狀態(tài)。

(() => {  
  function block() {  
    setInterval(() => {  
      (function(){return false;})["constructor"]("debugger")["call"]();  
    }, 50);  
  }  
  try { block(); } catch (err) {}  
})();  

雖然我們可以通過(guò)一些技術(shù)手段，給用戶打開(kāi)控制臺(tái)設(shè)置一些障礙，但對(duì)于經(jīng)驗(yàn)老到的用戶而言，繞過(guò)這些限制并非難事。依賴前端技術(shù)攔截控制臺(tái)訪問(wèn)是一種典型的“防君子不防小人”策略，不能想著靠這些手段來(lái)保障自己網(wǎng)站的安全。

總結(jié)

到此這篇關(guān)于前端頁(yè)面如何限制用戶打開(kāi)瀏覽器控制臺(tái)的文章就介紹到這了,更多相關(guān)前端限制用戶打開(kāi)瀏覽器控制臺(tái)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論