如何在不使用 firebase 身份验证的情况下保护 firebase 存储？ （下一个）

Question

Im using firebase storage for uploading files within my next.js page. Clients fill in a form and the files are going to be uploaded in firebase storage. (Im using a different database)

I'm wondering how I can only allow uploading files within this post request.

import React, { useState } from "react";
import { render } from "react-dom";
import { storage } from "../src/firebase/index";

const ReactFirebaseFileUpload = () => {
  const [image, setImage] = useState(null);
  const [url, setUrl] = useState("");
  const [progress, setProgress] = useState(0);

  const handleChange = e => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
    }
  };

  const handleUpload = () => {
    const uploadTask = storage.ref(`images/${image.name}`).put(image);
    uploadTask.on(
      "state_changed",
      snapshot => {
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(progress);
      },
      error => {
        console.log(error);
      },
      () => {
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then(url => {
            setUrl(url);
          });
      }
    );
  };

  return (
    <div>
      <progress value={progress} max="100" />
      <br />
      <br />
      <input type="file" onChange={handleChange} />
      <button onClick={handleUpload}>Upload</button>
      <br />
      {url}
      <br />
      <img src={url || "http://via.placeholder.com/300"} alt="firebase-image" />
    </div>
  );

}

export default ReactFirebaseFileUpload;

This is my working example with open rules.

My rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

I want to put the upload on the next.js api route system, so we have an api to call. In my imagination either I can somehow secure this part then with headers or something OR maybe even better define something in my storage rules.

i really didn't find anything smart to define there.

Please help me guide threw this.

Answer 1

If anyone (without Auth) needs to upload data you need to give him write access to a specific path in your storage.

To get the donwloadURL from that ref it needs the read rights.

If it is possible from your bussines logic that anyone can upload but desn't need the downloadURL you could remove the read for everyone.

I would deffinitely recommend to upload such files under a specific path like "public" and at least make restrictions like file size and contentType like here for images:

match /public/{allPaths=**} {
        allow read: if true
        allow write: if request.resource.size < 15 * 1024 * 1024
                    && request.resource.contentType.matches('image/.*') 
    }

Don't forget that the downloadURL is a public access URL for every file. So anone who has that URL can acess that file. You need the read rules to get that downloadURL from a reference but if you got the downloadURL from somewhere else you could still access the file. They are made in a way that could not ques them very easy so it's is quite safe approach.

You could use the admin SDK to do it on your own if you can and just return the downloadURL or use Firebase Cloud Functions with storage triggers to listen for file uploads (with restricted access like above) and store the downloadURL somewhere you need it.

Here you have a very good explanation how all that can work together.