【安全】如何防止他人惡意調(diào)試你的web程序

1前言

看到社區(qū)很多都在討論如何調(diào)試,如何高級的調(diào)試,以及一些調(diào)試的奇技淫巧,今天我想和大家聊聊,怎么禁止調(diào)試,禁止他人調(diào)試我們的程序

為什么會有這篇文章呢,源自一次我尋找盜版電影的遭遇,一次好奇心的驅(qū)使下,由于很多這種平臺都是只做搬運,不做存儲,因為存儲盜版電影向他人提供是違法的,特別是那種剛出的新電影! 當(dāng)時好奇想通過看某站的控制臺,想了解一下他們是怎么是通過啥接口,怎么請求,請求來的格式啥樣的,抱著這樣的好奇心,開始了我的奇妙之旅...

看完本篇文章你將學(xué)會
我無法斷定你能學(xué)到什么,但是以下是我希望你能從本篇文章中學(xué)到的:

1. 如何簡單的防止你的程序被他人惡意調(diào)試
2. 逆向思維學(xué)會如何更好的調(diào)試

2具體實現(xiàn)

防止調(diào)試的方法,這里我們主要是通過不斷debugger的方法來瘋狂輸出斷點,讓控制臺打開后程序就無法正常執(zhí)行
我們都知道debugger只有在控制臺被打開的時候才會執(zhí)行,所以后面的所有方法都是圍繞著這一特性來進(jìn)行,廢話不多說,我將通過以下幾個案例向你們展示道高一尺魔高一丈的道理,先上代碼:

方法一:

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

通過上方的代碼我們可以看到,在頁面中打開控制臺后,會有以下結(jié)果:

需要在這里說明以下幾點:

1. 程序被debugger阻泄了,我們無法像以往一樣在 Source Tab 中的對應(yīng) js 代碼處添加斷點調(diào)試,無法調(diào)試程序的執(zhí)行邏輯.在程序異常復(fù)雜且被混淆后的代碼是異常難讀的!通常我們會在 source 的左邊加上 breakpoint 來讓程序每次走到加點的地方停下來,以便讓我們查看一些變量的值或是步驟的流程邏輯(如下圖所示)

2. 我們都知道,第一次打開控制臺是看不到 network tab 中的任何請求的,所以我們想通過 network tab 來查看網(wǎng)頁都做了哪些請求,也是看不到的,當(dāng)我們打開控制臺就會出debugger阻擋我們,我們可以通過下面的解決方法來處理,或者是用抓包工具來查看具體的請求

大家可以先不看解決方法,想想如果是你,這個時候怎么突破這個屏障呢? 第一次遇到這種情況我也是很懵,不知道咋處理,后面發(fā)現(xiàn)問題簡直不要太簡單,我們可以帶著疑問來看:

對于第一個示例,我們?nèi)绾谓鉀Q?(繞過它)

答案是: 禁止斷點

可以看到很簡單,在 Chrome 控制臺的 Source Tab 頁點擊 Deactivate breakpoints 按鈕或者按下 Ctrl + f8(如下圖所示)。但是對于控制臺不熟悉的小伙伴,很難會想到這里去.

但是,難道這篇文章就這樣結(jié)束了?那我可頂不住小伙伴們的 "就這?" ??

其實,上面的解決方法并沒有幫我們解決根本問題,我們需要做的是調(diào)試,上面雖然把debugger都去掉了,但是我們也無法在通過點擊每一行代碼左邊的行號添加 breakpoint 了,所以根本性的問題,并沒有解決,只是去除了那礙眼的瘋狂 debugger,我們還是得另辟蹊徑

方法二:

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

對應(yīng)的還有一種方法

即通過add script ignore list來添加需要忽略執(zhí)行代碼行或文件

可以看到,我們也可以通過刪除 script ignore list 里已添加的忽略代碼,恢復(fù)初始狀態(tài)

但是,你這么聰明,那人家不得想想對策?

對于上面的第一個方法 ??

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

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

對于第二個方法,我們對代碼進(jìn)行如下改造??

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

我們可以通過將debugger改寫成Function("debugger")();的形式,來應(yīng)對;Function 構(gòu)造器生成的 debugger 會在每一次執(zhí)行時開啟一個臨時 js 文件,哈哈~對方表示好無奈 ??

于是會有以下結(jié)果

這無限套娃,真夠狠的,我們要堅信正義最后總會勝利,不能給想非法調(diào)試我們程序的人機(jī)會,所以我們要把各種情況都考慮周全,可以說這種方法是最恨的,但是這還不算完~ (好家伙~ ?? 想非法調(diào)試我程序,那你就得戰(zhàn)勝我)

強(qiáng)化以上方法

上面的代碼由于沒有加密混淆,多少可能還是會被別人讀一些,那么我們加密混淆看看是啥樣的
好家伙,你這咋讀?

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,{}));

格式化后的樣子

我們繼續(xù)對代碼進(jìn)行改造,讓對方盡量的難以識別我們的代碼
將Function("debugger").call()改成(function(){return false;})["constructor"]("debugger")["call"]();并且,添加條件,當(dāng)窗口外部寬高,和內(nèi)部寬高的差值大于一定的值,我把 body 里的內(nèi)容全部清空掉,看你還能不能操作我的按鈕啊啥的~哈哈哈 ??

需要特別說明的是: 像 toG 的項目或者是一些為了保護(hù)自己的版權(quán)又或者是一些比較敏感的項目,出于安全的考慮在部署到生產(chǎn)環(huán)境后最好是不讓別人調(diào)試的,當(dāng)然,前端所做的也就那么一些,需要前后端一起配合,便可以很好的對項目或者數(shù)據(jù)進(jìn)行私密的保護(hù) ??

最后: 附上這份未混淆的來之不易的的代碼(記得混淆后使用哦~) ?? 一定要記得點贊加關(guān)注~原創(chuàng)太不容易了.

你可以把它當(dāng)作你的工具函數(shù),在需要不讓別人輕易調(diào)試的項目中引用

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

3推薦一個調(diào)試頁面的小技巧

說了那么多的防止被人調(diào)試,那么最后也說一個本人覺得眼前一亮的調(diào)試樣式的方法
通過給style標(biāo)簽添加style="display: block",contenteditable兩個屬性實現(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>

4最后

我所知道的禁止調(diào)試的方法就只有如上所述,但是肯定還有很多好玩的,小伙伴們可以在評論區(qū)留言,一起共同學(xué)習(xí)~

最后拋出一個問題,如何監(jiān)測控制臺是否被打開(我上面提到過),感興趣且有頭緒,或者已經(jīng)有方法的小伙伴可以小伙伴可以在評論下方說說自己的想法,也可以加我們交流群一起玩耍~