日日干日日插,天天爽天天色,人妻18p,日本乱伦一区二区,日本特黄网站,日韩国产专区,国产操逼视频,思思热思思操

    
     
      
       
      
      點(diǎn)擊上方 前端Q，關(guān)注公眾號(hào)

      回復(fù)加群，加入前端Q技術(shù)交流

hello大家好，我是winty。作為web開(kāi)發(fā)者，我們應(yīng)該都有這樣一個(gè)認(rèn)識(shí)：前端代碼是公開(kāi)的，所有人都能拿到我們代碼，不能把秘鑰等信息寫(xiě)死在前端。為了避免他人輕易看懂前端代碼，通常我們會(huì)對(duì)代碼進(jìn)行壓縮、混淆等處理。今天帶來(lái)一篇文章，作者介紹了幾種避免他人調(diào)試前端代碼的常見(jiàn)方式，感興趣的同學(xué)可以在自己項(xiàng)目里試試。

下面是正文部分。

這里我們不介紹禁止右鍵菜單, 禁止F12快捷鍵和代碼混淆方案。

無(wú)限debugger

前端頁(yè)面防止調(diào)試的方法主要是通過(guò)不斷 debugger 來(lái)瘋狂輸出斷點(diǎn)，因?yàn)?debugger 在控制臺(tái)被打開(kāi)的時(shí)候就會(huì)執(zhí)行
由于程序被 debugger 阻止，所以無(wú)法進(jìn)行斷點(diǎn)調(diào)試，所以網(wǎng)頁(yè)的請(qǐng)求也是看不到的.

基礎(chǔ)方案


     

(() => {
  function ban() {
    setInterval(() => { debugger; }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();

將 setInterval 中的代碼寫(xiě)在一行，可以禁止用戶(hù)斷點(diǎn)，即使添加 logpoint 為 false 也無(wú)用
當(dāng)然即使有些人想到用左下角的格式化代碼，將其變成多行也是沒(méi)用的

瀏覽器寬高

根據(jù)瀏覽器寬高、與打開(kāi)F12后的寬高進(jìn)行比對(duì)，有差值，說(shuō)明打開(kāi)了調(diào)試，則替換html內(nèi)容；

通過(guò)檢測(cè)窗口的外部高度和寬度與內(nèi)部高度和寬度的差值，如果差值大于 200，就將頁(yè)面內(nèi)容設(shè)置為 "檢測(cè)到非法調(diào)試"。
通過(guò)使用間隔為 50 毫秒的定時(shí)器，在每次間隔內(nèi)執(zhí)行一個(gè)函數(shù)，該函數(shù)通過(guò)創(chuàng)建一個(gè)包含 debugger 語(yǔ)句的函數(shù)，并立即調(diào)用該函數(shù)的方式來(lái)試圖阻止調(diào)試器的正常使用。


     

(() => {
  function block() {
    if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
      document.body.innerHTML = "檢測(cè)到非法調(diào)試";
    }
    setInterval(() => {
      (function () {
        return false;
      }
      ['constructor']('debugger')
      ['call']());
    }, 50);
  }
  try {
    block();
  } catch (err) { }
})();

關(guān)閉斷點(diǎn)，調(diào)整空頁(yè)面

在不打開(kāi)發(fā)者工具的情況下，debugger是不會(huì)執(zhí)行將頁(yè)面卡住，而恰恰是利用debugger的這一點(diǎn)，如果你打開(kāi)開(kāi)發(fā)者工具一定會(huì)被debugger卡住，那么上下文時(shí)間間隔就會(huì)增加，在對(duì)時(shí)間間隔進(jìn)行判斷，就能巧妙的知道絕對(duì)開(kāi)了開(kāi)發(fā)者工具，隨后直接跳轉(zhuǎn)到空白頁(yè)，一氣呵成。(文心一言采用方案)


     

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

第三方插件

disable-devtool

disable-devtool可以禁用所有一切可以進(jìn)入開(kāi)發(fā)者工具的方法，防止通過(guò)開(kāi)發(fā)者工具進(jìn)行的代碼搬運(yùn)。

該庫(kù)有以下特性:

支持可配置是否禁用右鍵菜單
禁用 f12 和 ctrl+shift+i 等快捷鍵
支持識(shí)別從瀏覽器菜單欄打開(kāi)開(kāi)發(fā)者工具并關(guān)閉當(dāng)前頁(yè)面
開(kāi)發(fā)者可以繞過(guò)禁用 (url參數(shù)使用tk配合md5加密)
多種監(jiān)測(cè)模式，支持幾乎所有瀏覽器（IE,360,qq瀏覽器,FireFox,Chrome,Edge...）
高度可配置、使用極簡(jiǎn)、體積小巧
支持npm引用和script標(biāo)簽引用(屬性配置)
識(shí)別真移動(dòng)端與瀏覽器開(kāi)發(fā)者工具設(shè)置插件偽造的移動(dòng)端，為移動(dòng)端節(jié)省性能
支持識(shí)別開(kāi)發(fā)者工具關(guān)閉事件
支持可配置是否禁用選擇、復(fù)制、剪切、粘貼功能
支持識(shí)別 eruda 和 vconsole 調(diào)試工具
支持掛起和恢復(fù)探測(cè)器工作
支持配置ignore屬性，用以自定義控制是否啟用探測(cè)器
支持配置iframe中所有父頁(yè)面的開(kāi)發(fā)者工具禁用

??使用??


     

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

更多使用方法參見(jiàn)官網(wǎng)：disable-devtool

disable-devtool

console-ban禁止 F12 / 審查開(kāi)啟控制臺(tái)，保護(hù)站點(diǎn)資源、減少爬蟲(chóng)和攻擊的輕量方案，支持重定向、重寫(xiě)、自定義多種策略。

使用


     

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

在項(xiàng)目中使用：


     

  yarn add console-ban


     

import { init } from 'console-ban'

init(options)

重定向


     

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

使用重定向策略可以將用戶(hù)指引到友好的相關(guān)信息地址（如網(wǎng)站介紹），亦或是純靜態(tài) 404 頁(yè)面，高防的邊緣計(jì)算或驗(yàn)證碼等頁(yè)面。

注：若重定向后的地址可以通過(guò) SPA 路由切換或 pjax 局部加載技術(shù)等進(jìn)行非真正意義上的頁(yè)面切換，則切換后的控制臺(tái)監(jiān)測(cè)將不會(huì)再次生效，對(duì)于 SPA 你可以在路由衛(wèi)士處重新注冊(cè)本實(shí)例，其他情況請(qǐng)引導(dǎo)至真正的其他頁(yè)面。

重寫(xiě)


     

var div = document.createElement('div')
div.innerHTML = '不要偷看啦~'

ConsoleBan.init({
  // 重寫(xiě) body 為字符串
  write: '<h1> 不要偷看啦~ </h1>',
  // 可傳入節(jié)點(diǎn)對(duì)象
  write: div
})

重寫(xiě)策略可以完全阻斷對(duì)網(wǎng)站內(nèi)容的審查，但較不友好，不推薦使用。

回調(diào)函數(shù)


     

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

回調(diào)函數(shù)支持自定義打開(kāi)控制臺(tái)后的策略。

參數(shù)

name	required	type	default	description
`clear`	no	boolean	`true`	禁用 `console.clear` 函數(shù)
`debug`	no	boolean	`true`	是否開(kāi)啟定時(shí) `debugger` 反爬蟲(chóng)審查
`debugTime`	no	number	`3000`	定時(shí) `debugger` 時(shí)間間隔（毫秒）
`redirect`	no	string	`-`	開(kāi)啟控制臺(tái)后重定向地址
`write`	no	string 或Element	`-`	開(kāi)啟控制臺(tái)后重寫(xiě) `document.body` 內(nèi)容，支持傳入節(jié)點(diǎn)或字符串
`callback`	no	Function	`-`	開(kāi)啟控制臺(tái)后的回調(diào)函數(shù)
`bfcache`	no	boolean	`true`	禁用 `bfcache` 功能