別想調(diào)試我的前端代碼！
共 5005字，需瀏覽 11分鐘
·
2024-06-19 11:50
大廠技術(shù) 高級前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號
回復(fù)1，加入高級Node交流群
hello大家好，我是考拉??。作為web開發(fā)者，我們應(yīng)該都有這樣一個(gè)認(rèn)識：前端代碼是公開的，所有人都能拿到我們代碼，不能把秘鑰等信息寫死在前端。為了避免他人輕易看懂前端代碼，通常我們會對代碼進(jìn)行壓縮、混淆等處理。今天帶來一篇文章，作者介紹了幾種避免他人調(diào)試前端代碼的常見方式，感興趣的同學(xué)可以在自己項(xiàng)目里試試。
下面是正文部分。
這里我們不介紹禁止右鍵菜單, 禁止F12快捷鍵和代碼混淆方案。
無限debugger
前端頁面防止調(diào)試的方法主要是通過不斷 debugger 來瘋狂輸出斷點(diǎn)，因?yàn)?debugger 在控制臺被打開的時(shí)候就會執(zhí)行
由于程序被 debugger 阻止，所以無法進(jìn)行斷點(diǎn)調(diào)試，所以網(wǎng)頁的請求也是看不到的.
基礎(chǔ)方案
(() => {
function ban() {
setInterval(() => { debugger; }, 50);
}
try {
ban();
} catch (err) { }
})();
將
setInterval中的代碼寫在一行，可以禁止用戶斷點(diǎn)，即使添加logpoint為false也無用當(dāng)然即使有些人想到用左下角的格式化代碼，將其變成多行也是沒用的
瀏覽器寬高
根據(jù)瀏覽器寬高、與打開F12后的寬高進(jìn)行比對，有差值，說明打開了調(diào)試，則替換html內(nèi)容；
通過檢測窗口的外部高度和寬度與內(nèi)部高度和寬度的差值，如果差值大于 200，就將頁面內(nèi)容設(shè)置為 "檢測到非法調(diào)試"。
通過使用間隔為 50 毫秒的定時(shí)器，在每次間隔內(nèi)執(zhí)行一個(gè)函數(shù)，該函數(shù)通過創(chuàng)建一個(gè)包含
debugger語句的函數(shù)，并立即調(diào)用該函數(shù)的方式來試圖阻止調(diào)試器的正常使用。
(() => {
function block() {
if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
document.body.innerHTML = "檢測到非法調(diào)試";
}
setInterval(() => {
(function () {
return false;
}
['constructor']('debugger')
['call']());
}, 50);
}
try {
block();
} catch (err) { }
})();
關(guān)閉斷點(diǎn)，調(diào)整空頁面
在不打開發(fā)者工具的情況下，debugger是不會執(zhí)行將頁面卡住，而恰恰是利用debugger的這一點(diǎn)，如果你打開開發(fā)者工具一定會被debugger卡住，那么上下文時(shí)間間隔就會增加，在對時(shí)間間隔進(jìn)行判斷，就能巧妙的知道絕對開了開發(fā)者工具，隨后直接跳轉(zhuǎn)到空白頁，一氣呵成。(文心一言采用方案)
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)入開發(fā)者工具的方法，防止通過開發(fā)者工具進(jìn)行的代碼搬運(yùn)。
該庫有以下特性:
支持可配置是否禁用右鍵菜單
禁用 f12 和 ctrl+shift+i 等快捷鍵
支持識別從瀏覽器菜單欄打開開發(fā)者工具并關(guān)閉當(dāng)前頁面
開發(fā)者可以繞過禁用 (url參數(shù)使用tk配合md5加密)
多種監(jiān)測模式，支持幾乎所有瀏覽器（IE,360,qq瀏覽器,FireFox,Chrome,Edge...）
高度可配置、使用極簡、體積小巧
支持npm引用和script標(biāo)簽引用(屬性配置)
識別真移動(dòng)端與瀏覽器開發(fā)者工具設(shè)置插件偽造的移動(dòng)端，為移動(dòng)端節(jié)省性能
支持識別開發(fā)者工具關(guān)閉事件
支持可配置是否禁用選擇、復(fù)制、剪切、粘貼功能
支持識別 eruda 和 vconsole 調(diào)試工具
支持掛起和恢復(fù)探測器工作
支持配置ignore屬性，用以自定義控制是否啟用探測器
支持配置iframe中所有父頁面的開發(fā)者工具禁用
??使用??
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
更多使用方法參見官網(wǎng)：disable-devtool
disable-devtool
console-ban禁止 F12 / 審查開啟控制臺，保護(hù)站點(diǎn)資源、減少爬蟲和攻擊的輕量方案，支持重定向、重寫、自定義多種策略。
使用
<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 相對地址
redirect: '/404',
// 重定向至絕對地址
redirect: 'http://domain.com/path'
})
使用重定向策略可以將用戶指引到友好的相關(guān)信息地址（如網(wǎng)站介紹），亦或是純靜態(tài) 404 頁面，高防的邊緣計(jì)算或驗(yàn)證碼等頁面。
注：若重定向后的地址可以通過 SPA 路由切換或 pjax 局部加載技術(shù)等進(jìn)行非真正意義上的頁面切換，則切換后的控制臺監(jiān)測將不會再次生效，對于 SPA 你可以在路由衛(wèi)士處重新注冊本實(shí)例，其他情況請引導(dǎo)至真正的其他頁面。
重寫
var div = document.createElement('div')
div.innerHTML = '不要偷看啦~'
ConsoleBan.init({
// 重寫 body 為字符串
write: '<h1> 不要偷看啦~ </h1>',
// 可傳入節(jié)點(diǎn)對象
write: div
})
重寫策略可以完全阻斷對網(wǎng)站內(nèi)容的審查，但較不友好，不推薦使用。
回調(diào)函數(shù)
ConsoleBan.init({
callback: () => {
// ...
}
})
回調(diào)函數(shù)支持自定義打開控制臺后的策略。
參數(shù)
| name | required | type | default | description |
|---|---|---|---|---|
clear |
no | boolean | true |
禁用 console.clear 函數(shù) |
debug |
no | boolean | true |
是否開啟定時(shí) debugger 反爬蟲審查 |
debugTime |
no | number | 3000 |
定時(shí) debugger 時(shí)間間隔（毫秒） |
redirect |
no | string | - |
開啟控制臺后重定向地址 |
write |
no | string 或Element | - |
開啟控制臺后重寫 document.body 內(nèi)容，支持傳入節(jié)點(diǎn)或字符串 |
callback |
no | Function | - |
開啟控制臺后的回調(diào)函數(shù) |
bfcache |
no | boolean | true |
禁用 bfcache 功能 |
注：redirect、write、callback 三種策略只能取其一，優(yōu)先使用回調(diào)函數(shù)。
參考文章
禁止別人調(diào)試自己的前端頁面代碼
前端防止惡意調(diào)試
禁止調(diào)試，阻止瀏覽器F12開發(fā)者工具
前端防止調(diào)試技術(shù)
結(jié)語
需要注意的是，這些技術(shù)可以增加攻擊者分析和調(diào)試代碼的難度，但無法完全阻止惡意調(diào)試。因此，對于一些敏感信息或關(guān)鍵邏輯，最好的方式是在后端進(jìn)行處理，而不是完全依賴前端來保護(hù)。
下篇文章主要介紹如何破解這些禁止調(diào)試的方法。
矛與盾：??不讓我在控制臺上調(diào)試，哼，休想???
原文鏈接：https://juejin.cn/post/7368313344712179739
作者：Aplee
Node 社群
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
“分享、點(diǎn)贊、在看” 支持一下