企业官网建设流程全解析

console-ban - 检测 F12 打开控制台、防站点资源被爬取的轻量方案

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

console-ban 是一个零依赖的轻量库，检测用户按 F12 打开浏览器控制台的行为，命中后可重定向、重写页面内容或触发自定义回调。支持 Chrome、Firefox、Safari 等主流浏览器，适合需要给站点做基础防爬虫与资源保护的开发者。

你是不是也遇到过这种情况

如果你发现站点的文章或商品页正被脚本批量抓取，如果你发现有人打开 F12 就能在控制台里直接拿到页面数据，而你又不想为此上一整套 WAF 或反爬服务，这类轻量工具可能就是你要找的东西。

它是什么，凭什么值得看

console-ban 只干一件事：判断用户是否打开了浏览器控制台，命中后执行预设的应对动作。它对 Chrome、Firefox、Safari 三种浏览器内核分别写了检测逻辑，压缩后的产物不到 1KB，对页面加载几乎没有负担。它不是 WAF（Web 应用防火墙，用于拦截恶意请求的服务），只处理“开控制台翻资源”这一个场景。

核心能力拆解

控制台打开检测：识别用户通过 F12 等方式打开控制台的行为，命中后触发你配置的应对策略，不用自己写检测代码。

重定向：检测到控制台打开后，把用户带到指定的相对或绝对路径，比如 404 页或说明页，把访问者引开。

文档重写：用一个字符串或 DOM 节点整体替换 document.body 的内容（页面正文区），彻底隐藏原始页面内容，官方提示该策略比较生硬，慎用。

自定义回调：检测命中后执行你自己的逻辑，方便接入自己的日志或告警，三个策略中它的优先级最高。

内置干扰手段：默认禁用 console.clear（一键清空控制台的功能），并循环插入 debugger 断点语句（让代码停在断点处、便于调试的机制），避免用户轻松恢复出干净的调试环境。

谁适合用

• 内容站与个人博客：抬高静态资源和文章内容被直接抓走的成本。
• 电商与中小业务站：用户打开控制台就重定向到 404 或说明页，正常访问不受影响。
• 内部系统与后台：限制团队里随意的 F12 翻查，减少接口字段信息的暴露。
• 个人项目与演示页：一行代码加一层基础防爬取，几乎没有性能开销。

怎么接进来

两种方式任选。项目里在终端执行yarn add console-ban（npm 同理），再引入 init 方法并传入配置即可。纯 HTML 页面则直接用 script 标签引入 dist 产物，然后调用ConsoleBan.init({ redirect: '/404' })完成初始化，不需要任何服务端配置。

选型前想清楚

• 支持 Chrome、Firefox、Safari 三种浏览器内核，检测逻辑按内核分别适配。
• 重定向、重写、回调三类策略可自由组合，clear、debug、bfcache 等选项均可单独开关。
• 产物体积极小，script 标签直接引入即可，不需要构建步骤。
• 边界要留意：官方明确说明 SPA（单页应用，路由切换不重载页面）路由 push 场景下检测不会再次生效；它拦住的只是“打开控制台”这一动作，无法阻止不渲染页面的脚本直接拉取静态资源。

如果你的站点需要防随意翻查和基础抓取，console-ban 是个低成本选项，可以先用一行代码接入试试。

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