关于javascript:如何防止他人恶意调试你的web程序

看到社区很多都在探讨 如何调试, 如何高级的调试, 以及一些调试的奇技淫巧 , 明天我想和大家聊聊, 怎么禁止调试, 禁止别人调试咱们的程序

为什么会有这篇文章呢, 源自一次我寻找盗版电影的遭逢, 一次好奇心的驱使下, 因为很多这种平台都是只做搬运, 不做存储, 因为存储盗版电影向别人提供是守法的, 特地是那种刚出的新电影! 过后好奇想通过看某站的控制台, 想理解一下他们是怎么是通过啥接口, 怎么申请, 申请来的格局啥样的, 抱着这样的好奇心, 开始了我的微妙之旅 …

看完本篇文章你将学会
我无奈判定你能学到什么, 然而以下是我心愿你能从本篇文章中学到的:

如何简略的避免你的程序被别人歹意调试
逆向思维学会如何更好的调试

避免调试的办法, 这里咱们次要是通过一直 debugger 的办法来疯狂输入断点, 让控制台关上后程序就无奈失常执行
咱们都晓得 debugger 只有在控制台被关上的时候才会执行, 所以前面的所有办法都是围绕着这一个性来进行, 废话不多说, 我将通过以下几个案例向你们展现 道高一尺魔高一丈 的情理, 先上代码:

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

通过上方的代码咱们能够看到, 在页面中关上控制台后, 会有以下后果:

须要在这里阐明以下几点:

程序被 debugger 阻泄了, 咱们无奈像以往一样在 Source Tab 中的对应 js 代码处增加断点调试, 无奈调试程序的执行逻辑. 在程序异样简单且被混同后的代码是异样难读的! 通常咱们会在 source 的右边加上 breakpoint 来让程序每次走到加点的中央停下来, 以便让咱们查看一些变量的值或是步骤的流程逻辑(如下图所示)

咱们都晓得, 第一次关上控制台是看不到 network tab 中的任何申请的, 所以咱们想通过 network tab 来查看网页都做了哪些申请, 也是看不到的, 当咱们关上控制台就会出 debugger 阻挡咱们, 咱们能够通过上面的解决办法来解决, 或者是用抓包工具来查看具体的申请

大家能够先不看解决办法, 想想如果是你, 这个时候怎么冲破这个屏障呢? 第一次遇到这种状况我也是很懵, 不晓得咋解决, 前面发现问题几乎不要太简略, 咱们能够带着疑难来看:

对于第一个示例, 咱们如何解决?(绕过它)

答案是: 禁止断点

能够看到很简略, 在 Chrome 控制台的 Source Tab 页点击 Deactivate breakpoints 按钮或者按下 Ctrl + f8(如下图所示)。然而对于控制台不相熟的小伙伴, 很难会想到这里去.

然而, 难道这篇文章就这样完结了? 那我可顶不住小伙伴们的 “ 就这?” 😂

其实, 下面的解决办法并没有帮咱们解决基本问题,咱们须要做的是调试, 下面尽管把 debugger 都去掉了, 然而咱们也无奈在通过点击每一行代码右边的行号增加 breakpoint 了, 所以根本性的问题, 并没有解决, 只是去除了那碍眼的疯狂 debugger, 咱们还是得另辟蹊径

对对应的代码行, 通过增加 logpoint 为 false，而后按回车后刷新网页，发现胜利跳过有限 debugger, 于是咱们就能够欢快的自在调试了~

对应的还有一种办法

即通过 add script ignore list 来增加须要疏忽执行代码行或文件

能够看到, 咱们也能够通过删除 script ignore list 里已增加的疏忽代码, 复原初始状态

然而, 你这么聪慧, 那人家不得想想对策?

对于下面的第一个办法 🎈

将 setInterval(() => {debugger;}, 50); 写在一行中, 你即便通过增加 logpoint 为 false, 也没用, 依然是疯狂 debugger, 即便你可能想到, 通过左下角的代码格式化, 来格局一下 setInterval(() => {debugger;}, 50); 将它变成多行的, 也是没用的, 依然会在刷新后从新弹 debugger

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

对于第二个办法, 咱们对代码进行如下革新😬

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

咱们能够通过将 debugger 改写成 Function("debugger")(); 的模式, 来应答;Function 结构器生成的 debugger 会在每一次执行时开启一个长期 js 文件, 哈哈~ 对方示意好无奈 😅

于是会有以下后果

这有限套娃, 真够狠的, 咱们要深信 正义最初总会胜利 , 不能给想非法调试咱们程序的人机会, 所以咱们要把各种状况都思考周全, 能够说这种办法是最恨的, 然而这还不算完~ (好家伙~ 😀 想非法调试我程序, 那你就得战败我)

下面的代码因为没有加密混同, 多少可能还是会被他人读一些, 那么咱们加密混同看看是啥样的
好家伙, 你这咋读?

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

格式化后的样子

咱们持续对代码进行革新, 让对方尽量的难以辨认咱们的代码
将 Function("debugger").call() 改成 (function(){return false;})["constructor"]("debugger")["call"]();
并且, 增加条件, 当窗口内部宽高, 和外部宽高的差值大于肯定的值, 我把 body 里的内容全副清空掉, 看你还能不能操作我的按钮啊啥的~ 哈哈哈 😀

须要特地阐明的是: 像 toG 的我的项目或者是一些为了爱护本人的版权又或者是一些比拟敏感的我的项目, 出于平安的思考在部署到生产环境后最好是不让他人调试的, 当然, 前端所做的也就那么一些, 须要前后端一起配合, 便能够很好的对我的项目或者数据进行私密的爱护 🧡

最初: 附上这份未混同的来之不易的的代码(记得混同后应用哦~) 😢 肯定要记得点赞加关注~ 原创太不容易了.

你能够把它当作你的工具函数, 在须要不让他人轻易调试的我的项目中援用

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

说了那么多的避免被人调试, 那么最初也说一个自己感觉眼前一亮的调试款式的办法
通过给 style 标签增加 style="display: block",contenteditable 两个属性实现在页面中便捷的调试款式

复制下方代码到你的 html 文件中, 玩一下~

<!DOCTYPE html>
<body>
    <div> 来调试我吧~</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>

我所晓得的禁止调试的办法就只有如上所述, 然而必定还有很多好玩的, 小伙伴们能够在评论区留言, 一起独特学习~

最初抛出一个问题, 如何监测控制台是否被关上(我下面提到的通过), 网上找了一些办法, 貌似都没用, 感兴趣且有脉络, 或者曾经有办法的小伙伴能够小伙伴能够在评论下方说说本人的想法, 也能够加咱们交换群一起游玩~

关注我的公众号 前埔寨 ，获取更多好玩与乏味的前端常识。 如果你也一样对技术酷爱并且为之着迷, 欢送加我集体微信（ChicSparrow），将会邀请你退出咱们的前端交流学习群一起面向高兴编程~ 🦄
我是荣顶，在这个互联网技术疯狂疾速迭代的时代中, 很快乐能和你一起变强！😉

关于javascript:如何防止他人恶意调试你的web程序

前言

具体实现

办法一:

办法二:

强化以上办法

举荐一个调试页面的小技巧

最初

Just My Socks（注册教程内含优惠码）

关于javascript:如何防止他人恶意调试你的web程序

前言

具体实现

办法一:

办法二:

强化以上办法

举荐一个调试页面的小技巧

最初

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）