⚠️重要提醒无论怎么加固前端防护永远不能100%杜绝源码查看只能提高破解门槛增加逆向成本。核心业务、密钥、算法必须放后端。目标对抗前面提到的破解手段控制台修改、油猴脚本、打印预览、地址栏javascript伪协议、定时器绕过等。1. 思路总览基础版漏洞点仅仅赋值oncontextmenu如果网页/油猴使用addEventListener注册右键事件可以覆盖绕过。防护变量、函数暴露在全局作用域控制台可以直接修改变量关闭检测。CtrlP打印预览页面内容完全暴露。debugger可以被开发者工具“禁用所有断点”直接废掉。防护逻辑只执行一次外部脚本可以直接重写oncontextmenu、checkDevTools函数。浏览器地址栏javascript:伪协议可以直接执行破解代码。升级手段使用捕获阶段注册contextmenu事件高优先级拦截使用IIFE闭包把检测变量、函数私有化不暴露到window全局增加media print媒体查询打印模式清空页面内容时间差反调试对抗直接禁用debugger断点循环定时校验防护逻辑一旦被篡改立刻恢复监听页面事件阻断伪协议书签篡改禁止选中文本增加复制难度。2. 升级版完整HTML页面代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title加固版前端防调试演示/titlestyle/* 打印预览模式下清空页面内容对抗CtrlP破解 */mediaprint{body *{display:none!important;}}/* 禁止页面选中文本 */body{user-select:none;-webkit-user-select:none;}/style/headbodydivh2加固版增强前端简易防调试/h2p增强对抗控制台篡改、油猴脚本、打印预览、伪协议书签/p/divscripttypetext/javascript// IIFE闭包所有变量、函数私有不暴露到window全局控制台无法直接修改变量(function(){constthreshold160;letdevToolsOpenfalse;// --------------------------// 1.多重拦截右键捕获阶段优先执行对抗addEventListener注册的右键事件// --------------------------functionbindContextMenu(){document.oncontextmenufunction(){returnfalse;};// capturetrue 捕获阶段优先执行优先级高于普通事件监听document.addEventListener(contextmenu,function(e){e.preventDefault();e.stopImmediatePropagation();returnfalse;},true);}// --------------------------// 2.键盘快捷键拦截 F12 CtrlU CtrlShiftI/J// --------------------------functionbindKeyDown(){document.onkeydownfunction(event){vareevent||window.event;if(e.keyCode123){e.preventDefault();returnfalse;}if(e.ctrlKeye.keyCode85){e.preventDefault();returnfalse;}if(e.ctrlKeye.shiftKeye.keyCode73){e.preventDefault();returnfalse;}if(e.ctrlKeye.shiftKeye.keyCode74){e.preventDefault();returnfalse;}};}// --------------------------// 3.窗口尺寸检测开发者工具// --------------------------functioncheckDevTools(){constwidthThresholdwindow.outerWidth-window.innerWidththreshold;constheightThresholdwindow.outerHeight-window.innerHeightthreshold;if(widthThreshold||heightThreshold){if(!devToolsOpen){devToolsOpentrue;document.body.innerHTMLdiv stylecolor:red;font-size:24px;text-align:center;margin-top:100px请勿打开开发者工具/div;}}else{devToolsOpenfalse;}}// --------------------------// 4.时间差反调试对抗直接禁用debugger断点// --------------------------functionantiDebugger(){conststartperformance.now();debugger;constendperformance.now();// 如果debugger被触发时间会明显变长时间差过大代表开发者工具打开if(end-start100){document.body.innerHTMLdiv stylecolor:red;font-size:24px;text-align:center;margin-top:100px请勿打开开发者工具/div;}}// --------------------------// 5.定时巡检防止外部脚本、油猴脚本篡改防护逻辑被篡改就立刻恢复// --------------------------functionwatchProtectLogic(){bindContextMenu();bindKeyDown();}// 初始化执行bindContextMenu();bindKeyDown();// 定时器循环setInterval(checkDevTools,500);setInterval(antiDebugger,1000);setInterval(watchProtectLogic,800);})();/script/body/html3. 各个加固点原理与代码解析3.1 多重阻止右键捕获阶段原版仅仅设置document.oncontextmenu油猴/插件可以通过addEventListener后注册事件绕过。document.addEventListener(contextmenu,function(e){e.preventDefault();e.stopImmediatePropagation();returnfalse;},true);true代表捕获阶段执行比普通冒泡阶段事件优先级更高stopImmediatePropagation()阻止页面上其他所有contextmenu事件回调执行配合定时watchProtectLogic定时重新绑定就算外部脚本清除事件800ms后自动恢复。3.2 闭包私有化变量函数全部逻辑包裹在(function(){ ... })()闭包内部。devToolsOpen、threshold、checkDevTools不会挂载到window控制台无法直接访问、修改这些变量不能直接通过控制台修改devToolsOpenfalse关闭检测。漏洞依然可以通过重写setInterval、或者禁用JS绕过。3.3 对抗打印预览CtrlPcss媒体查询打印样式mediaprint{body *{display:none!important;}}当用户按下CtrlP唤起打印预览页面所有元素直接隐藏看不到任何内容。漏洞浏览器修改打印设置关闭“使用页面样式”可以绕过。3.4 时间差反调试对抗禁用debugger断点conststartperformance.now();debugger;constendperformance.now();if(end-start100){// 判定打开调试工具}原理如果开发者工具关闭debugger语句直接跳过执行时间极短如果开发者工具打开哪怕勾选了禁用所有断点处理debugger语句依然会消耗额外时间通过performance.now()高精度时间判断时间差识别调试状态。3.5 定时巡检恢复防护逻辑setInterval(watchProtectLogic,800);每隔800ms重新绑定右键、键盘拦截事件。油猴脚本、控制台执行代码清除右键事件之后最多800ms页面会自动重新恢复禁止右键增加破解难度破解者需要持续不断覆盖事件。3.6 user-select禁止选中文本user-select:none;-webkit-user-select:none;禁止鼠标框选页面文字普通用户无法直接复制文本。注意快捷键CtrlA依然有概率选中文本不能完全杜绝复制。4. 仍然存在的漏洞浏览器禁用JavaScript全部防护直接失效这是浏览器底层权限JS无法阻止。view-source:协议直接在地址栏查看原始HTML源码JS完全拦截不到。抓包工具 Fiddler / Charles直接拿到HTTP响应原始HTML。开发者工具设置调试工具为独立窗口窗口尺寸检测逻辑失效。浏览器打印设置关闭页面CSS样式打印预览依旧可以看到内容。可以使用代理、无头浏览器(Puppeteer)后台获取页面DOM内容。截图 OCR识别文字绕开一切JS交互限制。结论前端JS只能做防普通人复制不能做安全保护。5. 防护等级对比破解手段基础版简易防护升级版进阶防护控制台设置document.oncontextmenunull✅直接破解短时间生效800ms自动恢复油猴脚本清除右键事件✅直接破解定时自动恢复破解需要持续劫持CtrlP打印预览泄露内容✅直接破解打印模式隐藏页面内容开发者工具禁用debugger断点✅直接绕过debugger增加时间差检测提升绕过成本控制台修改全局变量关闭检测✅直接修改闭包私有化控制台拿不到内部变量Shift右键绕过右键拦截✅可以绕过捕获阶段事件大部分场景拦截禁用JavaScript全部失效全部失效view‑source协议看源码全部失效全部失效6. 生产环境实战建议不要把密钥、核心算法、业务校验写在前端JS前端一切都可以被篡改。该类防护适合资讯展示页面防止普通访客随手复制、截图式复制不能用于保护敏感业务。如果需要真正保护内容图片资源加水印重要文本接口后端鉴权返回关键校验逻辑全部放在后端不要过度堆砌反调试代码大量debugger、循环检测会造成页面CPU占用升高影响普通用户性能体验。