殴美成人A∨视频免费观看 ,午夜夜福利试看视频

說在前面

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

禁用右鍵菜單 ??

添加圖片注釋，不超過 140 字（可選）

在頁面上點擊鼠標(biāo)右鍵我們可以看到有個檢查選項，通過這個菜單可以直接打開控制臺，我們可以直接在這個頁面上禁用右鍵菜單。


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

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

攔截快捷鍵 ??

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


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

那么除了 F12 你知道還有什么快捷鍵可以打開控制臺嗎？

Ctrl+Shift+C
Ctrl+Shift+I

上面這兩個快捷鍵也可以打開控制臺，還有一個快捷鍵 Ctrl+U 可以打開源碼頁面，這里我們也可以一起把它給攔截掉。


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īng)了。

檢測窗口變化??

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

添加圖片注釋，不超過 140 字（可選）


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);

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

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

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

添加圖片注釋，不超過 140 字（可選）

但是還有這么兩種情況

全屏切換時的尺寸變化可能被誤判
獨立打開控制臺頁面時無法監(jiān)聽到

無限D(zhuǎn)ebugger?

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


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