快捷導(dǎo)航

前端頁面禁止別人調(diào)試的方法

更新時(shí)間：2023年03月23日 08:42:23 作者：已注銷

這篇文章主要介紹了前端頁面禁止別人調(diào)試的方法的相關(guān)資料,需要的朋友可以參考下

1. 前端防止調(diào)試的思路與方法

我們都知道 debugger 在控制臺(tái)被打開的時(shí)候就會(huì)執(zhí)行，前端頁面防止調(diào)試的方法主要是通過不斷 debugger 來瘋狂輸出斷點(diǎn)，讓控制臺(tái)打開后程序就無法正常執(zhí)行，以下是一個(gè)基本防止調(diào)式的代碼：

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

這里需要說明以下幾點(diǎn)：

1. 程序被 debugger 阻止了，我們無法像以往一樣在 Source Tab 中的對(duì)應(yīng) JS 代碼處添加斷點(diǎn)調(diào)試，無法調(diào)試程序的執(zhí)行邏輯。

2. 當(dāng)我們打開控制臺(tái)就會(huì)出被 debugger 阻止，所以想通過 network tab 來查看網(wǎng)頁都做了哪些請(qǐng)求也是看不到的。

2. 禁止斷點(diǎn)方法及對(duì)策

遇到防止調(diào)試我們可以禁止斷點(diǎn)，在 Chrome 控制臺(tái)的 Source Tab 頁點(diǎn)擊 Deactivate breakpoints 按鈕或者按下 Ctrl + f8。

操作動(dòng)畫效果如下所示：

注意：上面的解決方法并沒有幫我們解決根本問題，我們需要做的是調(diào)試，上面雖然把 debugger 都去掉了，但是我們也無法在通過點(diǎn)擊每一行代碼左邊的行號(hào)添加 breakpoint 了，所以根本性的問題并沒有解決，只是去除了那礙眼的瘋狂 debugger。

如何防止惡意用戶禁止斷點(diǎn)呢？

將 setInterval(() =>{ debugger;},50); 寫在一行中，你即使通過添加 logpoint 為 false 也沒用，仍然是瘋狂 debugger，即使你可能想到通過左下角的代碼格式化來格式一下setInterval(() => {debugger;}, 50); 將它變成多行的也是沒用，仍然會(huì)在刷新后重新彈 debugger。

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

3. 突破防止調(diào)試的方法及對(duì)策

在對(duì)應(yīng)的代碼行添加logpoint為 false，然后按回車后刷新網(wǎng)頁，發(fā)現(xiàn)成功跳過無限 debugger，于是我們就可以愉快的自由調(diào)試了。

對(duì)應(yīng)的還有一種方法，即通過來添加 add script ignore list 需要忽略執(zhí)行代碼行或文件。

如果想恢復(fù)初始狀態(tài)，可以通過刪除 script ignore list 里已添加的忽略代碼。

針對(duì)這種操作如何防止惡意用戶呢？

我們可以通過將debugger改寫成 Function("debugger")(); 的形式來應(yīng)對(duì)，F(xiàn)unction 構(gòu)造器生成的 debugger 會(huì)在每一次執(zhí)行時(shí)開啟一個(gè)臨時(shí) js 文件，代碼改造如下所示：

(() => {
    function block() {
        setInterval(() => {
            Function("debugger")();
        }, 50);
    }
    try {
        block();
    } catch (err) {}
})();

4. 防止調(diào)試方法增強(qiáng)

上面的代碼由于沒有加密混淆，多少可能還是會(huì)被別人讀懂一些，我們可以嘗試對(duì)代碼進(jìn)行加密混淆，如下所示：

eval（function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\\b"+d(a)+"\\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));

為了讓對(duì)方盡量的難以識(shí)別我們的代碼，我們將Function("debugger").call()改成 (function(){return false;})["constructor"]("debugger")["call"](); 并且添加條件，當(dāng)窗口外部寬高和內(nèi)部寬高的差值大于一定的值，我把 body 里的內(nèi)容全部清空掉。

操作動(dòng)畫如下所示：

下面附上這份未混淆的來之不易的的代碼，你可以把它當(dāng)作工具函數(shù)，在需要不讓別人調(diào)試的項(xiàng)目中引用，使用時(shí)記得加密混淆。

(() => {
    function block() {
        if (window.outerHeight - window.innerHeight > 200 ||window.outerWidth - window.innerWidth > 200) {
            document.body.innerHTML ="檢測(cè)到非法調(diào)試,請(qǐng)關(guān)閉后刷新重試!";
        }
        setInterval(() => {
            (function () {
                return false;
            }
                ["constructor"]("debugger")
                ["call"]());
        }, 50);
    }
    try {
        block();
    } catch (err) {}
})();

通過給 style 標(biāo)簽添加 style="display: block",contenteditable 兩個(gè)屬性實(shí)現(xiàn)在頁面中便捷的調(diào)試樣式。

復(fù)制下方代碼到你的 html 文件中，建議試試。

<!DOCTYPE html>
<body>
    <div>來調(diào)試我吧~</div>
    <style style="display: block" contenteditable>
        body {
            background-color: rgb(140, 209, 230);
            color: white;
        }
        div {
            background-color: green;
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
        }
    </style>
</body>

到此這篇關(guān)于前端頁面禁止別人調(diào)試的方法的文章就介紹到這了,更多相關(guān)前端頁面禁止別人調(diào)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: