如何配置Firebase Storage规则仅允许指定网站读写数据？

咱们先聚焦核心问题：搞定Storage的安全规则配置，修正可能导致权限错误的细节，同时让你的上传逻辑和安全策略完美匹配。

一、配置符合需求的Firebase Storage安全规则 #

你需要修改规则，仅允许来自https://typichead.web.app的请求读写，同时可以通过路径匹配、文件属性校验进一步提升安全性。修改后的规则如下：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // 仅匹配你上传的特定路径：user目录下的png文件
    match /user/{file}.png {
      allow read, write: if 
        // 限制请求来源为你的官方域名
        request.origin == "https://typichead.web.app" &&
        // 兜底校验：确保文件是PNG格式（和前端验证互补）
        request.resource.contentType == "image/png" &&
        // 兜底校验：限制文件大小不超过15KB（对应你的前端限制）
        request.resource.size <= 15 * 1024;
    }
  }
}

规则细节说明： #

• match /user/{file}.png：只针对你实际使用的上传路径生效，避免其他无关路径被意外授权；
• request.origin校验：从根源上限制只有你的域名能发起请求；
• 额外的文件类型、大小校验：作为前端验证的兜底，即使前端逻辑被绕过，后端也能拦截不符合要求的文件。

二、修正Firebase初始化配置的小问题 #

你之前的配置里，authDomain和databaseURL末尾多了斜杠，这可能导致初始化异常，修正后的配置如下：

var config = { 
  apiKey: "你的有效apiKey", 
  authDomain: "typichead.firebaseapp.com", 
  databaseURL: "https://typichead.firebaseio.com", 
  storageBucket: "typichead.appspot.com" 
};
firebase.initializeApp(config);

三、优化前端上传的错误处理逻辑 #

为了更直观地排查上传问题，建议给put方法添加错误捕获：

if (img.width === 64 && img.height === 64) { 
  let uuid = createUUID(); 
  let storageRef = firebase.storage().ref(`user/${uuid}.png`); 
  storageRef.put(file)
    .then(snapshot => {
      console.log("上传成功！", snapshot);
      // 可选：获取文件下载链接做后续处理
      return snapshot.ref.getDownloadURL();
    })
    .then(downloadURL => {
      console.log("文件下载链接：", downloadURL);
    })
    .catch(error => {
      console.error("上传失败：", error);
      alert(`上传出错：${error.message}`);
    });
} else { 
  alert("Only 64x64 images are allowed!"); 
}

四、之前403错误的原因分析 #

你之前碰到的权限错误，主要是这两个原因：

1. 初始规则设置为!= auth（要求必须是认证用户才能访问），但你的上传请求是匿名的，所以被拒绝；
2. 临时改成request.auth == null（允许所有匿名访问）虽然能上传，但完全暴露了存储桶的安全风险，现在通过域名+路径+文件属性的多重限制，既解决了权限问题，又保证了安全性。

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