hello大家好，我是Range。作为web开发者，我们应该都有这样一个认识：前端代码是公开的，所有人都能拿到我们代码，不能把秘钥等信息写死在前端。为了避免他人轻易看懂前端代码，通常我们会对代码进行压缩、混淆等处理。今天带来一篇文章，作者介绍了几种避免他人调试前端代码的常见方式，感兴趣的同学可以在自己项目里试试。
下面是正文部分。
这里我们不介绍禁止右键菜单, 禁止F12快捷键和代码混淆方案。
无限debugger
-
前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点，因为 debugger 在控制台被打开的时候就会执行
-
由于程序被 debugger 阻止，所以无法进行断点调试，所以网页的请求也是看不到的.
基础方案
(() =>{ functionban() { setInterval(() =>{debugger; },50); } try{ ban(); }catch(err) { } })();
-
将setInterval中的代码写在一行，可以禁止用户断点，即使添加logpoint为false也无用
-
当然即使有些人想到用左下角的格式化代码，将其变成多行也是没用的
浏览器宽高
根据浏览器宽高、与打开F12后的宽高进行比对，有差值，说明打开了调试，则替换html内容；
-
通过检测窗口的外部高度和宽度与内部高度和宽度的差值，如果差值大于 200，就将页面内容设置为 "检测到非法调试"。
-
通过使用间隔为 50 毫秒的定时器，在每次间隔内执行一个函数，该函数通过创建一个包含debugger语句的函数，并立即调用该函数的方式来试图阻止调试器的正常使用。
(() =>{ functionblock() { if(window.outerHeight-window.innerHeight>200||window.outerWidth-window.innerWidth>200) { document.body.innerHTML="检测到非法调试"; } setInterval(() =>{ (function() { returnfalse; } ['constructor']('debugger') ['call']()); },50); } try{ block(); }catch(err) { } })();
关闭断点，调整空页面
在不打开发者工具的情况下，debugger是不会执行将页面卡住，而恰恰是利用debugger的这一点，如果你打开开发者工具一定会被debugger卡住，那么上下文时间间隔就会增加，在对时间间隔进行判断，就能巧妙的知道绝对开了开发者工具，随后直接跳转到空白页，一气呵成。(文心一言采用方案)
setInterval(function() { varstartTime = performance.now(); // 设置断点 debugger; varendTime = performance.now(); // 设置一个阈值，例如100毫秒 if(endTime - startTime >100) { window.location.href='about:blank'; } },100);
第三方插件
disable-devtool
disable-devtool可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的代码搬运。
该库有以下特性:
-
支持可配置是否禁用右键菜单
-
禁用 f12 和 ctrl+shift+i 等快捷键
-
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
-
开发者可以绕过禁用 (url参数使用tk配合md5加密)
-
多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge...）
-
高度可配置、使用极简、体积小巧
-
支持npm引用和script标签引用(属性配置)
-
识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能
-
支持识别开发者工具关闭事件
-
支持可配置是否禁用选择、复制、剪切、粘贴功能
-
支持识别 eruda 和 vconsole 调试工具
-
支持挂起和恢复探测器工作
-
支持配置ignore属性，用以自定义控制是否启用探测器
-
支持配置iframe中所有父页面的开发者工具禁用
使用
<scriptdisable-devtool-autosrc='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
更多使用方法参见官网：disable-devtool
disable-devtool
console-ban禁止 F12 / 审查开启控制台，保护站点资源、减少爬虫和攻击的轻量方案，支持重定向、重写、自定义多种策略。
使用
<head> <!-- ... --> <scriptsrc="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script> <script> // default options ConsoleBan.init() // custom options ConsoleBan.init({ redirect:'/404' }) </script> </head>
在项目中使用：
yarn add console-ban
import{ init }from'console-ban' init(options)
重定向
ConsoleBan.init({ // 重定向至 /404 相对地址 redirect:'/404', // 重定向至绝对地址 redirect:'http://domain.com/path' })
使用重定向策略可以将用户指引到友好的相关信息地址（如网站介绍），亦或是纯静态 404 页面，高防的边缘计算或验证码等页面。
注：若重定向后的地址可以通过 SPA 路由切换或 pjax 局部加载技术等进行非真正意义上的页面切换，则切换后的控制台监测将不会再次生效，对于 SPA 你可以在路由卫士处重新注册本实例，其他情况请引导至真正的其他页面。
重写
vardiv =document.createElement('div') div.innerHTML='不要偷看啦~' ConsoleBan.init({ // 重写 body 为字符串 write:'<h1> 不要偷看啦~ </h1>', // 可传入节点对象 write: div })
重写策略可以完全阻断对网站内容的审查，但较不友好，不推荐使用。
回调函数
ConsoleBan.init({ callback:() =>{ // ... } })
回调函数支持自定义打开控制台后的策略。
参数
| name | required | type | default | description |
|---|---|---|---|---|
| clear | no | boolean | true | 禁用console.clear函数 |
| debug | no | boolean | true | 是否开启定时debugger反爬虫审查 |
| debugTime | no | number | 3000 | 定时debugger时间间隔（毫秒） |
| redirect | no | string | - | 开启控制台后重定向地址 |
| write | no | string 或Element | - | 开启控制台后重写document.body内容，支持传入节点或字符串 |
| callback | no | Function | - | 开启控制台后的回调函数 |
| bfcache | no | boolean | true | 禁用bfcache功能 |
注：redirect、write、callback三种策略只能取其一，优先使用回调函数。
参考文章
禁止别人调试自己的前端页面代码
前端防止恶意调试
禁止调试，阻止浏览器F12开发者工具
前端防止调试技术
结语
需要注意的是，这些技术可以增加攻击者分析和调试代码的难度，但无法完全阻止恶意调试。因此，对于一些敏感信息或关键逻辑，最好的方式是在后端进行处理，而不是完全依赖前端来保护。
下篇文章主要介绍如何破解这些禁止调试的方法。
矛与盾：️不让我在控制台上调试，哼，休想️
本文采摘于网络，不代表本站立场，转载联系作者并注明出处：https://www.iotsj.com//kuaixun/3317.html
