本文详解前端页面防调试的多种技术手段。从基础的无限 debugger 循环策略入手，分析其局限性及绕过方法；进而探讨单行代码与忽略列表的对抗；最后介绍通过动态构造函数生成临时脚本及检测窗口尺寸变化的终极增强方案，帮助开发者提升前端代码安全性，防止接口数据被恶意爬取。
🎈 为何需要禁止调试？
- 前端页面在运行过程中通常会调用大量接口，部分接口逻辑若暴露，容易被恶意用户通过爬虫工具进行分析，进而破解并获取敏感数据。
- 为彻底杜绝此类风险，最直接且有效的防御手段便是禁止用户调试前端代码。
🎈 基础策略：无限 debugger
- 前端防止调试的核心思路是利用
debugger语句不断触发断点。当用户打开控制台时，debugger语句会立即执行，导致程序执行流被 强制暂停。 - 由于程序执行被
debugger阻断，用户无法进行正常的断点调试操作，同时也无法查看网页发出的网络请求。 - 基础实现代码如下：
/**
* 基础禁止调试代码
*/
(() => {
function ban() {
setInterval(() => {
debugger;
}, 50);
}
try {
ban();
} catch (err) { }
})();
🎈 应对无限 debugger 的策略
- 仅依靠上述简单的代码逻辑，对于具备一定技术能力的用户而言，防御效果十分有限。
- 攻击者可通过控制台中的
Deactivate breakpoints按钮，或使用快捷键Ctrl + F8来关闭无限debugger机制。 - 尽管这种方法可以移除令人困扰的
debugger弹窗，但攻击者仍可通过左侧行号手动添加breakpoint来绕过限制。
🎈 禁止断点的进阶对策
- 若将
setInterval中的代码压缩为单行，可有效禁止用户添加断点。即使攻击者将logpoint设置为false，也无法生效。 - 此外，即便攻击者尝试使用左下角的格式化代码功能将其展开为多行，同样无法绕过限制。
(() => {
function ban() {
setInterval(() => { debugger; }, 50);
}
try {
ban();
} catch (err) { }
})();
🎈 忽略执行的代码策略
- 用户可通过添加
add script ignore list来指定需要忽略执行的代码行或文件。 - 此方法同样能达到阻止无限
debugger执行的效果。
🎈 针对忽略执行代码的对策
- 那么，如何进一步应对上述操作中的恶意用户呢？
- 可通过将
debugger改写为Function("debugger")();的形式来进行防御。 - 由
Function构造函数生成的debugger会在每次执行时动态开启一个临时的js脚本文件，从而增加调试难度。 - 当然，在实际使用时，为了进一步提升安全性，建议对脚本进行加密后再部署使用。
// 加密前
(() => {
function ban() {
setInterval(() => {
Function('debugger')();
}, 50);
}
try {
ban();
} catch (err) { }
})();
// 加密后
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中的内容替换为指定提示信息。 - 同样地，为了保障安全，建议在使用前对代码进行加密处理。
(() => {
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) { }
})();
以上即为 JavaScript 安全加密中禁止他人调试前端页面代码的详细实现方案，更多关于 JavaScript 前端页面防调试的资料，敬请关注本站其他相关文章！