禁止別人調試前端代碼的幾種常見方法
前言
作為web開發(fā)者，我們應該都有這樣一個認識：前端代碼是公開的，所有人都能拿到我們代碼，不能把秘鑰等信息寫死在前端。為了避免他人輕易看懂前端代碼，通常我們會對代碼進行壓縮、混淆等處理。今天帶來一篇文章，作者介紹了幾種避免他人調試前端代碼的常見方式，感興趣的同學可以在自己項目里試試。
下面是正文部分。
這里我們不介紹禁止右鍵菜單, 禁止F12快捷鍵和代碼混淆方案。
無限debugger
前端頁面防止調試的方法主要是通過不斷 debugger 來瘋狂輸出斷點，因為 debugger 在控制臺被打開的時候就會執(zhí)行
由于程序被 debugger 阻止，所以無法進行斷點調試，所以網頁的請求也是看不到的.
基礎方案
(() => {
function ban() {
setInterval(() => { debugger; }, 50);
}
try {
ban();
} catch (err) { }
})();
將 setInterval 中的代碼寫在一行，可以禁止用戶斷點，即使添加 logpoint 為 false 也無用
當然即使有些人想到用左下角的格式化代碼，將其變成多行也是沒用的
瀏覽器寬高
根據瀏覽器寬高、與打開F12后的寬高進行比對，有差值，說明打開了調試，則替換html內容；
通過檢測窗口的外部高度和寬度與內部高度和寬度的差值，如果差值大于 200，就將頁面內容設置為 “檢測到非法調試”。
通過使用間隔為 50 毫秒的定時器，在每次間隔內執(zhí)行一個函數，該函數通過創(chuàng)建一個包含 debugger 語句的函數，并立即調用該函數的方式來試圖阻止調試器的正常使用。
(() => {
function block() {
if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
document.body.innerHTML = "檢測到非法調試";
}
setInterval(() => {
(function () {
return false;
}
['constructor']('debugger')
['call']());
}, 50);
}
try {
block();
} catch (err) { }
})();
關閉斷點，調整空頁面
在不打開發(fā)者工具的情況下，debugger是不會執(zhí)行將頁面卡住，而恰恰是利用debugger的這一點，如果你打開開發(fā)者工具一定會被debugger卡住，那么上下文時間間隔就會增加，在對時間間隔進行判斷，就能巧妙的知道絕對開了開發(fā)者工具，隨后直接跳轉到空白頁，一氣呵成。
setInterval(function () {
var startTime = performance.now();
// 設置斷點
debugger;
var endTime = performance.now();
// 設置一個閾值，例如100毫秒
if (endTime - startTime > 100) {
window.location.href = 'about:blank';
}
}, 100);
第三方插件
disable-devtool
disable-devtool可以禁用所有一切可以進入開發(fā)者工具的方法，防止通過開發(fā)者工具進行的代碼搬運。
該庫有以下特性:
支持可配置是否禁用右鍵菜單
禁用 f12 和 ctrl+shift+i 等快捷鍵
支持識別從瀏覽器菜單欄打開開發(fā)者工具并關閉當前頁面
開發(fā)者可以繞過禁用 (url參數使用tk配合md5加密)
多種監(jiān)測模式，支持幾乎所有瀏覽器（IE,360,qq瀏覽器,FireFox,Chrome,Edge…）
高度可配置、使用極簡、體積小巧
支持npm引用和script標簽引用(屬性配置)
識別真移動端與瀏覽器開發(fā)者工具設置插件偽造的移動端，為移動端節(jié)省性能
支持識別開發(fā)者工具關閉事件
支持可配置是否禁用選擇、復制、剪切、粘貼功能
支持識別 eruda 和 vconsole 調試工具
支持掛起和恢復探測器工作
支持配置ignore屬性，用以自定義控制是否啟用探測器
支持配置iframe中所有父頁面的開發(fā)者工具禁用
使用：
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
更多使用方法參見官網：disable-devtool
disable-devtool
console-ban禁止 F12 / 審查開啟控制臺，保護站點資源、減少爬蟲和攻擊的輕量方案，支持重定向、重寫、自定義多種策略。
<head>
<!-- ... -->
<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
<script>
// default options
ConsoleBan.init()
// custom options
ConsoleBan.init({
redirect: '/404'
})
</script>
</head>
在項目中使用：
yarn add console-ban
import { init } from 'console-ban'
init(options)
重定向
ConsoleBan.init({
// 重定向至 /404 相對地址
redirect: '/404',
// 重定向至絕對地址
redirect: 'http://domain.com/path'
})
使用重定向策略可以將用戶指引到友好的相關信息地址（如網站介紹），亦或是純靜態(tài) 404 頁面，高防的邊緣計算或驗證碼等頁面。
注：若重定向后的地址可以通過 SPA 路由切換或 pjax 局部加載技術等進行非真正意義上的頁面切換，則切換后的控制臺監(jiān)測將不會再次生效，對于 SPA 你可以在路由衛(wèi)士處重新注冊本實例，其他情況請引導至真正的其他頁面。
重寫
var div = document.createElement('div')
div.innerHTML = '不要偷看啦~'
ConsoleBan.init({
// 重寫 body 為字符串
write: '<h1> 不要偷看啦~ </h1>',
// 可傳入節(jié)點對象
write: div
})
重寫策略可以完全阻斷對網站內容的審查，但較不友好，不推薦使用。
回調函數
ConsoleBan.init({
callback: () => {
// ...
}
})
回調函數支持自定義打開控制臺后的策略。
總結
到此這篇關于禁止別人調試前端代碼的幾種常見方法的文章就介紹到這了,更多相關禁止調試前端代碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript實現三種常用網頁特效(offset、client、scroll系列)
這篇文章主要為大家介紹了三種常用的PC端網頁特效：元素偏移量offset系列，元素可視區(qū)client系列和元素滾動scroll系列，文中示例代碼介紹詳細，需要的可以參考一下2021-12-12
這篇文章主要介紹了js右下角彈出提示框示例代碼，即網頁右下角彈出廣告信息框實例代碼，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了微信小程序實現圖片上傳、刪除和預覽功能的方法,涉及微信小程序界面布局、事件響應及圖片操作相關實現技巧,需要的朋友可以參考下2017-12-12
javascript動態(tài)添加、修改、刪除對象的屬性與方法詳解
本篇文章主要是對javascript動態(tài)添加、修改、刪除對象的屬性與方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了plupload+artdialog實現多平臺上傳文件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家分享了純JS單頁面賽車游戲制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
以下頁面在運行中,調試輸出的永遠是alter('1'),原因是按照頁面加載從上至下的順序,同名的方法以最后一個為準.2009-01-01
前幾天一個項目讓我頭疼了很久，一個關于圖片加載時的loading效果，因為不是太懂js，所以在網上各種找資料，但還是不理想，無賴苦心研究，終于有了一點眉目了，雖然個中還有一些道理不懂，至少目的達到了2013-11-11
這個select2組件的功能確實很強大，可以將圖片放入到select里面隨著文字一起顯示。接下來通過本文給大家分享BootStrap與Select2使用小結，需要的朋友參考下2017-02-02
當頁面設計好后需要打印出來,如網頁的的打印瀏覽和打印功能,有些公司需要讓前端開發(fā)好頁面打印出來或者轉為pdf格式的文檔,下面這篇文章主要給大家介紹了關于前端實現打印功能的兩種方法,需要的朋友可以參考下2023-01-01