Should I hide firebase api keys into backend? Not due to data security but project cloning issue

Question

Can someone help me with firebase security questions?
Here's what I was try to figure out:

I understand that to let a client side interacting with my firebase app, a config and firebase.initializeApp(config) will be exposed to public, and everyone using the client side can see it in browser developer console.

I also know that this is fine because I can use security rules and auth to secure data.

But, if someone copied all my client code (including configs) and build a lot of cloned sites, then they can use my firebase database as much as they want right?

In this case, should I hide configs(api keys) into backend like cloud functions or something? Thanks...

Answer 1

I've wondered something similar before, and found this handy article after a bit of searching. (The article itself is on mobile development, but there is a section addressing this specific question). The relevant section is titled "API Blockage by Domain and Package"

The article explains it better than I can, and just in case the link ever goes down, I'll copy the text below for future viewer's references. This was written by Jorge Vergara on his website https://javebratt.com/hide-firebase-api/ last updated July 20, 2018.

Another cool thing, if you go to your Google APIs account, you’ll see all of your Firebase projects, pick one, and in the Credentials Tab select your API key.

If you’ve never messed with it, it should be called something like Browser key (auto created by Google Service), open it, and you’ll find options for key restriction:

This key is unrestricted. To prevent unauthorized use and quota theft, restrict your key. Key restriction lets you specify which websites, IP addresses, or apps can use this key.

There you can choose HTTP referrers (websites) and add your domain. This means that the Firebase database will only accept requests for people writing from that domain.

Or Android apps and iOS apps, where you can add package name and fingerprints.

For example:

If you build myawesomeapp.com and add the domain in the HTTP referrers (websites) section, any attacker trying to connect from a different domain will get an error, and those requests will never make it to the database.

The link he provided to access your Google APIs account is: https://console.developers.google.com/apis/credentials

If you click on the link that says "Browser key (auto created by Google Service)" then you should see the "Application Restrictions" section towards the bottom, where you can select "HTTP Referrers"... clicking on that allows you to enter approved domains.