Vibe Coding 数据库安全防护

开始透过 Vibe Coding 搭配 Firebase Realtime Database 作为数据库之后，最令人担心的莫过于数据变更、被恶意爬取或非法写入，这篇教学会介绍 Firebase 的超强防护机制：“App Check”，App Check 不仅能维持 Vibe Coding 的开发节奏，还可以同时确保“数据安全”，为云端数据库加上一层最强防护罩。

• 更多参考：Vibe Coding 全方位开发导读
• 请先行阅读：Vibe Coding 遇上 Firebase Realtime Database

快速导览：

• Firebase 常见的保护数据方式
• 认识 App Check 与 reCAPTCHA
• 为什么 Realtime Database 不使用基本 API Token 进行保护？
• 为什么 Realtime Database 要使用 App Check 进行保护？
• 前往 Google Cloud Platform 启用 reCAPTCHA
• 使用 App Check 保护云端数据库
• Vibe Coding 测试 App Check 是否运作
• Vibe Coding 保护指定网域的读写

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

Firebase 常见的保护数据方式

下方列出开发者在保护 Firebase 云端数据时，最常用到的几种“防线”，了解它们各自的角色与局限性，就会明白为什么 App Check 是维护安全性的最后一块拼图：

• 身份验证 ( Authentication )

  要求用户登录后才能存取数据，但许多网站都会希望不用登录就能显示内容。

• 不登录但限制来源

  透过“网域、IP”等限制，让数据库只能在特定网域读取或写入，这需要仰赖后台的白名单机制或 API Key 的限制，但如果没有设定好，极易被骇客透过工具伪造，难以完全阻挡有心的非法请求。

• 安全规则 ( Security Rules )

  Firebase 的核心安全性规则，但逻辑撰写有时较为繁琐。

• App Check 应用程序验证

  不只验证用户“是谁”，更进一步验证请求的“来源设备与程序”是否合法，从源头杜绝了所有非法的模拟请求。

认识 App Check 与 reCAPTCHA

Firebase App Check 是一种强大的安全防护层，它将安全性的边界从“身份验证”（ 是谁 ）扩展到“请求来自哪里”，简单来说，App Check 能确保发往 Firebase 的请求并非来自自动化脚本、爬虫或未经授权的第三方网页，而是源自于用户亲手打造、且受认可的应用程序。

而 App Check 又与 reCAPTCHA 的关系密不可分，在 Web 环境中，reCAPTCHA ( v3 或 Enterprise 版 ) 会先担任了关键的“证明提供者”( Attestation Provider ) 角色，只要通过 reCAPTCHA 验证，App Check 才会确认身份，让数据可以读取，这种机制最迷人之处在于它对用户几乎是“隐形”的，不需要扰人的图形验证跳窗，完全符合 Vibe Coding 追求的无障碍与极速体验。

下方 reCAPTCHA 的一些简单介绍：

• 无声的守门员

  当用户与应用程序互动时，reCAPTCHA 会在背景分析这次行为，判断这是一个真实的人类操作还是恶意脚本。

• 证明与授权

  一旦 reCAPTCHA 确认请求合法，它会向 App Check 提供一个证明，App Check 随即签发一个具时效性的“Token”( 金钥 )。

• 自动验证

  这个 Token 会自动附带在 Realtime Database 请求中，请求抵达 Firebase 时，系统会检查这个 Token，只有持有合法Token 的请求才会被允许通过。

为什么 Realtime Database 不使用基本 API Token 进行保护？

由于 Google 的专案也提供了 API Token 的防护机制，所以大多数人在刚入门 Realtime Database 时，往往会先尝试使用 API Token 保护数据，以为帮 API Key 设定了“网域绑定”就安全了，但实际上这却是一个常见的误会，单纯依赖 API Token 有以下致命限制：

• API Key 仅用于识别而非授权

  Firebase 的 API Key 本质上是为了“让 Google 知道要把账单算在谁头上”，它并不是用来保护数据内容的门票。

• Referer 标头极易伪造

  网域绑定是基于浏览器发送的 Referer HTTP 标头。然而，骇客只要使用简单的脚本 ( 例如 Python 的 requests 或 Node.js ) 甚至是一个可以模拟 HTTP Request 的 Postman工具，就能轻易地在 Header 中加入假的 Referer。

• 浏览器网域限制仍然可能失效

  Realtime Database 主要是透过 WebSocket 进行通讯，而 API Key 的网域限制只对标准的 HTTP 请求有效，而且 Firebase SDK 在初始化后，数据流的传输往往能避开这些初级的标头检查，因此就算在 A 网域设定了限制，在 B 网域仍然能顺利读写数据。

• 前端程序码全公开

  任何打开网页的人，都能在源代码中找到 API Key。

为什么 Realtime Database 要使用 App Check 进行保护？

由于单纯使用 API Token 会有不少安全性的误会，进而造成不利数据库安全的状况，因此需要改用 App Check 进行保护，使用 App Check 能有下列优势：

• 后端加密验证

  采用后端验证机制，不再依赖前端容易被伪造的 Referer 标头。

• 不可伪造的 Token

  检查由 Google 签署、具时效性且无法被第三方模拟的证明 ( Attestation Token )。

• 强制拒绝机制

  如果请求中缺乏经过 reCAPTCHA 认证的合法 Token，Firebase 数据库端会直接拒绝连线，无视任何正确的 API Key 或伪造的标头。

前往 Google Cloud Platform 启用 reCAPTCHA

在进行所有安全性防护之前，需要先建立 Firebase 专案，参考“开始使用 Firebase Realtime Database”教学，注册并登录 Firebase，建立一个 Firebase 专案，确认可以顺利读取和写入数据。

使用 App Check 需要搭配 reCAPTCHA，reCAPTCHA 需要前往 Google Cloud Platform ( Google 云端平台 ) 才能启用，点击下方网址，使用自己的 Google 账号登录 Google Cloud Platform，第一次使用时会出现下方的画面。

前往：https://console.cloud.google.com/

进入 Google Cloud Platform 之后点击左上角“选取专案”，选取自己刚刚建立的 Firebase 专案。

进入专案之后，从左侧选单选择“安全性 > reCAPTCHA”。

进入 reCAPTCHA 启用画面后，点击“启用”。

完成后继续点击“设定 reCAPTCHA 防护机制”。

在防护机制中，加入要限制的网域，通常在测试阶段会加入“localhost”，如果会将 Vibe Coding 的网页部署到 Github，就要将 Github 的网址加入 ( 参考“使用 GitHub 部署你的网页作品” )。

完成后会出现下图的画面，点击右上方“编辑金钥”。

接着就能看到这个金钥的 ID 和 Secret Key，ID 是金钥的识别代码，Secret Key 是要提供给 App Check 的认证码，点击 Reveal 可以看到完整代码，这两组代码在后续的步骤都会用到。

使用 App Check 保护云端数据库

完成 reCAPTCHA 的设定并取得 ID 和 Secret Key 之后，接下来就要开始在 Vibe Coding 的过程中导入 App Check，参考“建立 Firebase 应用程序”，在刚刚刚启用 Firebase 专案里建立一个应用程序，并且可以看到这个应用程序的设定码。

在 Firebase 专案里，点击左侧选单“App Check”，点击“开始使用”。

进入 App Check 界面后，切换到“应用程序”页签，在刚刚的应用程序后方点击“注册”，表示 App Check 会对这个应用程序进行宝检查和防护的动作。

注册时展开 reCAPTCHA 项目。

在 reCAPTCHA 密钥的位置，填入刚刚在 Google Cloud Platform 中 reCAPTCHA 金钥里面的 Secret Key，完成后点击储存。

如果 reCAPTCHA 前方出现“打勾”图案，右上方出现“已注册”，表示 App Check 完成注册应用程序。

切换回 API 页签，可以看见 Realtime Database 后方出现“未强制执行”的说明文字，表示 APP Check 已经开始运作，只是没有“强制执行”防护动作。

Vibe Coding 测试 App Check 是否运作

如果 App Check 都设定完成，接下来就进入 Vibe Coding 的步骤，使用下列提示词产生一个网页，由于 AI 的自动保护机制，无法直接提供 Token、ID 等隐私信息，因此可以先请 AI 产生假的数据，完成后自行替换成真实数据。

特别注意，免费版本 reCAPTCHA 每月只有 10,000 次验证额度，而且只能使用 v3 的版本。

我已經使用 app check 和 reCAPTCHA v3 限制 Firebase Realtime Database，請幫我按照下列規則，用畫布幫我產生一個網頁：
- 使用基本的 html 和 js，不要套用任何框架和樣式。
- 畫面中有一個多行輸入欄位，以及一個「送出」按鈕和一個「重填」按鈕。
- 如果輸入欄位沒有內容，無法點擊按鈕。
- 如果輸入欄位有內容按下「送出」會把內容儲存到 Firebase realtime 資料庫。
- 如果輸入欄位有內容，按下「重填」會把輸入欄位清空。
- 下方輸入欄位和按鈕的下方有一個清單，顯示儲存後的資料。
- 不需要使用任何登入機制。
- 我會把資料存到我自己的 Firebase realtime database，請先用假的測試標記。
- 不要使用 Firebase Firestore。

如果 AI 已经可以正常产生网页，参考“下载 Vibe Coding 网页程序码”教学的做法，下载并用编辑器打开程序码，并把假数据换成自己的信息。

• Firebase 设定区域：换成 Firebase 应用程序的设定代码 ( 参考：建立 Firebase 应用程序 )
• reCAPTCHA 区域：换成 reCAPTCHA 的 ID 代码。

完成后可以使用像是 JSBin 等线上编辑器测试网页，因为网域并不是刚刚 reCAPTCHA 所设定的合法网域，所以虽然可以读写，在网页开发模式却会出现 App Check 的错误消息，这表示 App Check 有正常运作，只是因为刚刚没有强制执行，所以还是可以读写。

回到 App Check 的 API 页签，点击 Realtime Database。

点击 Realtime Database 后可以看见 App Check 对于这个数据库的防护状况，稍作等待后重新整理画面 ( 此处的画面并不是即时更新 )，就可以看见刚刚使用 JSBin 打开的网页，虽然可以读写，但是 100% 都是“未经验证的要求”，这表示 App Check 有顺利拦截到所有不合规定的连线。

Vibe Coding 保护指定网域的读写

确认 App Check 可以保护数据库之后，接下来就可以点击“强制执行”，正式启用 App Check 防护。

强制执行后，大约等待几分钟，就会套用对应的保护措施。

完成后在右上角会看见“已强制执行”的图示，表示开始强制执行防护。

等待几分钟让强制执行生效 ( 约 3~5 分钟 )，回到 JSBin 重新整理刚刚的网站内容，因为网域并不是刚刚 reCAPTCHA 所设定的合法网域，又强制执行 App Check，就无法正常读写数据，在网页开发者工具里也会看见被阻挡的错误消息。

如果切换到 reCAPTCHA 所设定的合法网域，就可以读写数据，在开发者工具中也不会出现错误消息。

过一段时间后再回到 App Check 里观察防护状况，就可以发现有些是“已验证的要求”，有些是“未验证的要求”，表示 App Check 已经正式对数据库进行“合法网域”的防护。

注意，如果在 API Token 有设定网域保护，虽然无法保护数据库，但却会限制 App Check 可以使用的网域。

小结

在享受 Vibe Coding 带来的灵感喷发与即时同步时，只要透过 Firebase App Check，就不再需要担心数据库沦为骇客的游乐场，现在，就为 Vibe Coding 的数据库加上这层最强防护，让创意在安全的环境下自由流动！

延伸阅读

Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:

• 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
• Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
• Vibe Coding 重要的准备工作：架构流程图
• Vibe Coding 网页必备知识：开发者的“沟通工具箱”
• Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
• Vibe Coding 固定网页样式：解决样式不一致的恼人问题
• Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
• Vibe Coding 玩家必备的 SVG 进阶操作指南
• Vibe Coding 字体指南：用文字风格定义网页灵魂
• 下载 Vibe Coding 网页程序码，掌握程序码的主导权
• Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
• Vibe Coding 实战：使用 GitHub 部署你的网页作品
• AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
• 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
• 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
• 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
• Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈