我可以将 Firebase 存储用于只能通过我的 React Web 应用访问的图像吗？

Posted 2023-03-22

【中文标题】我可以将 Firebase 存储用于只能通过我的 React Web 应用访问的图像吗？

【英文标题】：Can I use Firebase Storage for images accessible only via my React web app?

【发布时间】：2018-04-24 08:35:09

【问题描述】：

我正在创建一个约会 React 网络应用程序，用户可以在其中将自己的照片上传到他们的用户个人资料中。我想使用 Firebase 存储。我想保护图像，以便只有经过身份验证的用户从我的网络应用程序访问它们时才能看到它们 - 现在我得到这样的图像：

  let storageRef = firebase.storage().ref(`images/$userid/$userImageName`);

// Get the download URL
storageRef.getDownloadURL().then(function(url) 
    // Insert url into an <img> tag to "download"
)

这很好 - 但是一旦我将 URL 放入图像标记中的 src 属性中，任何查看源代码的人都可以复制 URL 并通过电子邮件、短信等方式发送它，使其成为"public"。我曾尝试使用 putString() 函数上传 base64 字符串中的图像，也仅用于 Firebase 存储，以便在使用 put() 函数时再次为其创建 URL，就像普通图像上传一样。

所以我的问题是 - 我可以使用 Firebase Storage 存储图像并将它们设为"private"，以便只有经过身份验证的网络应用用户才能查看它们吗？有没有办法只获取图像数据并使用它在frontend/client 中生成图像，这样就不会在 JS 代码中放置实际的 URL？

【参考方案1】：

对getDownloadURL() 的调用受安全规则保护，这意味着如果您编写如下规则：

service firebase.storage 
  match /b/bucket/o 
    match /images/userId/userImageName 
      // any authenticated user can read the bytes or get a download URL
      allow read: if request.auth != null;
      // only the given user can upload their photo
      allow write: if request.auth.uid == userId;
    
  

他们不会允许未经身份验证的人下载 URL。

至于第二个问题：一旦有人可以看到文件，假设他们已经下载/截屏并可以共享它，即使 URL 不可公开访问（甚至在页面上）。看东西就等于下载东西，所以它从哪里来真的没有区别，因为最终结果可能是一样的。