企业官网建设流程全解析

console-ban：拦截浏览器控制台、防止静态资源被反查的1KB轻量工具

【免费下载链接】console-banDetect F12 open console, protect web static resources, support redirect, rewrite, callback strategies.项目地址: https://gitcode.com/gh_mirrors/co/console-ban

页面被 F12 一开就裸奔，很痛

你把页面辛苦上线，对方按个 F12，接口响应、令牌、业务逻辑全躺在控制台里，爬虫和竞品都是这么开工的。console-ban 就是专门拦截"DevTools 控制台被打开"这个动作的库，一旦探测到，立刻执行你预设的应对动作。

一行 init 调用的拦截器

它的定位很单一：监听用户是否打开了浏览器控制台，探测到之后做重定向、页面重写或执行你的回调，面向想抬高页面静态资源反查成本的开发者。

console-ban 是怎么知道 DevTools 被打开了

核心思路一句话：console.log 输出对象时，浏览器只在渲染控制台面板那一刻才会调用它的 toString 或属性 getter，普通代码执行不会调。于是把"陷阱对象"埋进日志，回调挂在 toString 上：

const re = /./ re.toString = fire // 控制台打开时执行的回调 console.log(re) // 面板渲染时才会触发 toString

这是 Firefox 的实现。Chrome 更复杂：要区分控制台渲染行为在不同版本（92 以下、93–101、102+）的差异，分别用 %c 样式参数、函数 toString 和 Error.message getter 覆盖；Safari 则监听 Image 的 id 属性 getter。三份检测实现放在 src/browser/ 目录，对照着读很清楚。

回调触发后，src/core.ts 按优先级执行三级策略：callback 优先，其次 redirect，最后才是 write 重写。

什么情况下你会打开 console-ban

• 电商详情页：配redirect: '/404'，爬虫或手快的人按出控制台，页面直接跳到静态 404，拿不到渲染好的数据。
• 内部管理后台：用write把 body 重写成警告页，想开控制台看数据的人先看到一片白。
• 风控敏感页：callback里先上报埋点再跳转，拿到比固定策略更灵活的切入点。

要清楚它是"劝退"而非"封死"——抬高反查成本，拦不住决心禁用 JavaScript 的对手。把它当安全边界，会失望。

npm 一行接入 console-ban

npm install console-ban，入口引入：

import { init } from 'console-ban'; init({ redirect: '/404' })

没有构建工具就引一段 CDN 脚本，调ConsoleBan.init()即可。所有参数都可缺省，空对象调用也能拿到默认防护。

顺手做了三件别人要自己写的事

1. 体积：压缩后不到 1KB，对页面总量基本是噪音。
2. 默认防护：init 后默认禁用console.clear，每 3 秒跑一次无限debugger（debugTime可调），并关闭 bfcache，防止靠返回键绕过检测。
3. 版本覆盖：Chrome/Firefox/Safari 三大内核各自独立的探测代码，Chrome 分支还细分了多个版本的行为差异。TypeScript 编写，零运行时依赖，MIT 协议。

一句话价值：它把"探测 DevTools"这个需要翻零散文章拼起来的活，打包成了一次调用。想验证检测手法，翻翻 src/core.ts 和 src/browser/ 那三个文件，一屏读完；觉得有用，顺手给个 star。

【免费下载链接】console-banDetect F12 open console, protect web static resources, support redirect, rewrite, callback strategies.项目地址: https://gitcode.com/gh_mirrors/co/console-ban