How to configure Cloud Storage for Firebase bucket CORS when using preview channels? - firebase

I am relying on the getBlob function to download files from Cloud Storage for Firebase directly from the browser. For this to work, I have allowlisted my app's origin in my Cloud Storage bucket. Everything works fine and is as expected.
However, I am also using Firebase Hosting's preview channels, each creating a new, unique origin. In consequence, for the getBlob function to work, I need to re-configure CORS for every new preview channel (and remove configurations for obsolete preview channels).
Is there a way to configure CORS of Cloud Storage buckets to automatically allow origins from all preview channels?

There is no way to automatically allowlist all preview channels (without allowlisting all origins. However, something you could do is use the CORS configuration API and the Firebase Hosting REST API to script automatically adding all channels after each deploy.
How this would work is essentially you would call ListChannels on your site, then use the resulting URLs from that list to populate the CORS configuration via the Cloud Storage API.

Related

Downloading file in firebase storage blocked by CORs [duplicate]

I'm using google storage public bucket for serving binary resources on the web right now.
As the docs mentioned
https://cloud.google.com/storage/docs/cross-origin
The authenticated browser download endpoint storage.cloud.google.com does not allow CORS requests. Note that the Google Cloud console provides this endpoint for each object's public URL link.
So in order to allow CORS, I need to put my proxy server in front.
I'm not sure there is a way I don't know to enable me to fetch resources directly from Cloud Storage with CORS but without having a relay server.
It looks like you're trying to use the URLs for objects that you're getting from the console. Those URLs use the domain storage.cloud.google.com. Because that domain allows callers to use their Google account cookies for authentication, its capabilities are intentionally kept very limited, and one such limitation is blocking cross-origin requests.
Instead, configure CORS using the standard Cloud Storage tools, then link your users to a URL like https://storage.googleapis.com/bucket_name/object_name, which will work fine with CORS. That will only work for publicly readable objects, but that sounds like what you've got.

Can I make firebase file URLs publicly available without requiring token?

I am using firebase to allow users to upload their files to the Storage buckets. I was using the getDownLoadURL() to fetch the publicly available URL...however, this comes with an embedded token to allow access to the file.
In my same app, I'm using the Google Document viewer which takes a URL to preview the doc. Unfortunately, the Google Doc Viewer does not work with the firebase URLs's with the embedded token.
In Google Console, on an individual file, I click to make it public. In that case, the URL is now reachable via the https://storage.googleapis.com// format...and I don't need to use the token which works great.
So, what I want to do is mark/make a file public when I'm uploading it to firebase. I have reviewed the firebase docs and there doesn't seem to be a makePublic() method like there is on the Google API's.
Is there a way I can mark a file as public during upload, so that it can be accessed without any token?
The other solution was that I could update the bucket to be accessible, but this makes it totally open to be browsed at https://storage.googleapis.com/, which I don't want to do.
The client-side Firebase APIs don't know anything about the underlying Google Cloud Platform configurations for public content in storage buckets. So that won't be an option.
You will have to involve some backend code to change the object's configuration after it's uploaded. You could set up your own API endpoint via Cloud Functions (or whatever backend you want) to run one of the Google Cloud Storage server SDKs to set the file as public. (You will probably also want some way to authorize that the user calling your API should be able to make this change.)

How to get Firebase storage URL

I am sending FCM notifications with image links from my backend written in Go. The images are stored in Firebase-storage. I need to resolve the bucket path into a Url that I can use to create the FCM notification.
There seems to be a Javascript function (getDownloadUrl) to do this. How do I get the download URL in Go?
getDownloadUrl is a feature of Firebase client SDKs that read and write Cloud Storage. There is no direct equivalent for backend and server SDKs.
Cloud Storage has a similar concept called signed URLs that you can use to create URLs that directly access content in Cloud Storage. You can use the REST APIs directly as shown in the documentation, or if you're using the Go SDK, you can simply call SignedURL directly to get a URL that meets your specifications.

How can i implement a CDN with Firebase Storage?

I'm currently working on a social media app for Android mobile, and I have a problem regarding the cost-efficiency of my app especially with Firebase Storage. Therefore I want to implement a CDN for Firebase, which would cache the videos and images, preferably using a CDN service that offers scalable pricing (Google CDN offers this price model). I have been searching everywhere on how I could implement the google CDN with Firebase Storage but found no clear instructions. How can I achieve this?
There are a few ways to implement a CDN with Firebase Cloud Storage.
Please have a look at the documentation Firebase Cloud Storage:
Cloud Storage stores your files in a Google Cloud Storage bucket, making them accessible through both Firebase and Google Cloud. This allows you the flexibility to upload and download files
from mobile clients via the Firebase SDKs, and do server-side
processing such as image filtering or video transcoding using Google
Cloud Platform.
As a result, you can follow the documentation Setting up Cloud CDN with a backend bucket, but keep in mind that Cloud CDN will only kick in if you're accessing your data via that External HTTP(S) Load Balancer. You can find an example in the updated article Create a Custom Domain CDN with Google mentioned by #Yanan C.
As an alternative, you can use Cloudflare or other CDN. To do it you can follow instructions provided in the article How to Put a CDN in Front of Firebase Cloud Storage:
In Cloudflare create a new CNAME pointing your subdomain to c.storage.googleapis.com. For example: CNAME images.firerun.io c.storage.googleapis.com.
In the Firebase console -> Storage, create a new bucket named the subdomain. In the example above, the bucket name would be
"images.firerun.io". This is restriction where only the bucket named
the same as the subdomain will work.
Add a test file, for example: keep-calm.jpg
Next, give public access to the bucket the Google Console. Note, this is different from Firebase security rules where you should set
the security rules to allow externally allow read:
Go to Storage Management in the Google Console. Select your Firebase project.
Click on your new bucket (e.g. images.firerun.io) and click on the tab "permissions."
Click the "Add Members" button.
Enter New Member as "allUsers" and Role as Cloud Storage -> Storage Object Viewer".
Click "Save" and accept the warning that this is publicly accessible.
Now go to your subdomain with the file appended. For example: https://images.firerun.io/keep-calm.jpg
In addition, please have a look on the article Why You Should Put a CDN Like Cloudflare in Front of Firebase.
For Firebase Storage, I suppose the contents to cache, such as videos and images, are objects stored in buckets, please let me know otherwise. If it is the case, the post provides an answer from Firebase Support regarding how to use CDN with Firebase Storage, with an excerpt as below:
Now, there are ways to add a CDN to Cloud
Storage content; I found this small guide using Google CDN:
https://medium.com/#marco_37432/create-a-custom-domain-cdn-with-google-beta-7ad9531dfbae
Another use that I have seen is creating a static website with Cloud
Storage and adding on top another CDN provider, like CloudFlare. You
can see more details in this links:
https://cloudplatform.googleblog.com/2015/09/push-google-cloud-origin-content-out-to-users.html
https://cloud.google.com/interconnect/docs/how-to/cdn-interconnect
Hope it helps.

integrate Firebase storage with Google cloud CDN

i'm making an app using firebase.
photos uploaded by users are saved in firebase storage.
I use firebase cloud functions to make thumbnails to load photo feed faster,
but in one page, I need to load original photos(max 30 pics) at once.
To load original photos faster, I want to use google cloud CDN.
I followed docs here google cloud cdn docs , made load balancer and cdn
I can see Cloud CDN : Enabled (that Backend buckets are my firebase storage), but it seems to be not working.
in my app, I load those pictures with firebase storage urls which look like 'firebasestorage.googleapis.com/....'.
How can I integrate my firebase storage with google cloud cdn??
Using firebasestorage.googleapis.com sounds like the problem here. When you set up Cloud CDN in your project, you had to create an HTTP(S) Load-Balancer in order to expose a bucket. Cloud CDN will only kick in if you're accessing your data via that Load-Balancer. Try accessing the Load-Balancer's public IP instead of the firebase URL. You can find the IP address right there in the same page you've screenshot. Finally, don't forget to make sure the files you want to make available via the CDN obey these restrictions.

Resources