VueJS结合Firebase Realtime Database无登录限域名提交表单问题咨询

Firebase Realtime Database 无法通过原生CORS配置直接限制写入域名，可通过以下两种方案实现需求，无需用户手动登录：

方案1：基础Referer校验（轻量，适合低风险场景） #

通过安全规则校验请求来源的Referer头，仅允许你的域名下的请求写入，同时限制仅开放表单数据存储节点的权限，避免全局权限泄露：

安全规则配置示例 #

{
  "rules": {
    ".read": true,
    // 仅开放存储联系表单的指定节点写入权限，不要配置全局.write权限
    "contact_submissions": {
      ".write": "
        // 替换为你的实际域名，支持匹配http/https、子域名
        request.headers['referer'].matches(/^https?:\\/\\/(.*\\.)?your-domain\\.com\\//)
        // 限制提交的字段范围，避免写入非法数据
        && request.resource.data.keys().hasAll(['name', 'email', 'message'])
        // 限制各字段长度，避免恶意提交超大内容
        && request.resource.data.name.length <= 50
        && request.resource.data.email.length <= 100
        && request.resource.data.message.length <= 2000
      "
    }
  }
}

注意：Referer头可以被恶意伪造，该方案仅能阻挡基础的跨站请求，无法完全防御刻意的恶意提交

方案2：匿名身份校验（更安全，推荐使用） #

开启Firebase匿名认证，用户访问页面时自动完成无感知登录，安全规则仅允许匿名认证通过的请求写入，比校验Referer更可靠：

操作步骤 #

• 进入Firebase控制台 → 身份验证 → 登录方式，开启「匿名」登录提供者
• 在Vue项目中添加匿名登录逻辑，页面加载时自动触发，无需用户操作：

import { getAuth, signInAnonymously } from "firebase/auth";

const auth = getAuth();
// 页面加载时自动执行匿名登录
signInAnonymously(auth)
  .catch(err => console.error('登录初始化失败', err));

• 配置安全规则：

{
  "rules": {
    ".read": true,
    "contact_submissions": {
      ".write": "
        auth != null && auth.isAnonymous
        && request.resource.data.keys().hasAll(['name', 'email', 'message'])
        && request.resource.data.name.length <= 50
        && request.resource.data.email.length <= 100
        && request.resource.data.message.length <= 2000
      "
    }
  }
}

额外建议：可以结合云函数做提交频率校验，避免同一用户短时间内重复提交垃圾内容。

内容的提问来源于stack exchange，提问作者kibakoriasu