17
votes

I'm trying to understand how tokens work in Firebase Storage.

Whenever my web app uploads an image to FS it adds a token to its public url. The problem is whenever you upload that same image file to another part of the web app, it seems like you don't get another file, but a different token for the file url that was already uploaded, thus rendering a 403 error for the previous registered image display.

Is there a way to solve this?

Example:

storageRef.put(picture.jpg);
uploadTask.snapshot.downloadURL 
// returns something like https://firebasestorage.googleapis.com/v0/b/<your-app>/o/picture.jpg?alt=media&token=09cb2927-4706-4e36-95ae-2515c68b0d6e

That url is then displayed somewhere inside an img src.

<img src="https://firebasestorage.googleapis.com/v0/b/<your-app>/o/picture.jpg?alt=media&token=09cb2927-4706-4e36-95ae-2515c68b0d6e">

If the user repeats the process and uploads the same picture.jpg in another section of the app, instead of getting a brand new copy in Firebase Storage, the file is overwritten with an URL ending with a new token; say 12345.

So:

 <img src="https://...picture.jpg?alt=media&token=12345"> // New upload renders fine
 <img src="https://...picture.jpg?alt=media&token=09cb2927-4706..."> // But old upload breaks because of wrong url
2
Use local caching of imagesDima Rostopira
This is a web app, each image needs its own url even if the file is the same.cerealex
Sorry, I thought it's mobile appDima Rostopira
My bad for not pointing that out. Edited.cerealex
What type of token are you referring to? Can you add the minimal code that reproduces the problem? That typically clarifies a lot and allows us to help you more efficiently.Frank van Puffelen

2 Answers

24
votes

Tokens are unique for a particular version of an upload. If you overwrite the file with new content, then a new token will be generated with a new unguessable url.

So in other words, tokens are unique for a particular blob -- they are not unique per storage location. We did this as an increased measure of security to ensure that developers and end users did not accidentally expose data they did not intend.

You can, however, translate the storage location ("gs://mybucket/myfile.png") into a download url using our js SDK. That way, you can pass around the gs uri if you wish and translate it to a full URL once you want to place it into an image.

See: https://firebase.google.com/docs/reference/js/firebase.storage.Reference.html#getDownloadURL

5
votes

For public file upload: If you upload files in firebase functions you'll need to call makePublic() on the reference object in order to make it accessible without having a valid token.