2

I am building a react application with firebase integration and the environment variables we are using can be inspected out by taking the page source of the page in a deployed website.

I am interested in knowing some ways to make it safer. the only way I can think is of take values from an API so that its not shown with the code at any point.

To connect to firebase I can use the reserved url method to automatically connect.Firebase remote config allows you to store key value pairs. I was thinking of moving all my env variables out to remove config setup and use it from there. So I can remove my .env file altogether and avoid exposing any hardcoded values.

Have anyone tried this already? what could be the recommended way to make .env values safer?

P-RAD
  • 1,293
  • 2
  • 15
  • 36
  • 1
    Normally I let the backend handle all the sensitive API calls. For eg If I want to connect to some secure services using an API key, I would let my backend make the call and then return the response to the frontend. Since you don't have a backend, you can set the [API restriction for your API keys](https://developers.google.com/maps/api-key-best-practices#api_restriction). that means they won't be able to do much even if they get your firebase API key by debugging – Naresh Feb 25 '21 at 05:14

1 Answers1

2

You should never load any values that you don't want users to be able to access into the browser, period. The browser is an open book and while you may be able to obscure values by changing where and how they are loaded, you cannot prevent a motivated attacker from reading absolutely anything and everything you do on the client.

This is why Firebase is designed to have API keys and configuration that are safe to be publicly readable -- when you write security rules you are essentially drawing boundaries around what clients can do.

Firebase Remote Config can and should be used for values that are safe for clients to have -- things like feature flags or environment-specific URLs for APIs. It should not be used for sensitive things like private API keys and secrets.

Michael Bleigh
  • 25,334
  • 2
  • 79
  • 85
  • thank you for the suggestion. What will we do with the secret keys in your app. where will we save it to be safe? creating a collection in firebase and storing it there would mean every sign in person needs access to that. what about realtime database? – P-RAD Feb 25 '21 at 03:47
  • For that it will depend on many things -- what are the secret keys? What do they give access to? Who needs to utilize them and when? You should design your security model such that anyone who isn't supposed to see a value never has that value in their client. This can be accomplished in a large number of different ways. – Michael Bleigh Feb 25 '21 at 21:39
  • These are config values for connecting to a secondary firestore db. The are accessible by the users who have enough permissions. The access is controlled by rules. But the configuration to connect stays in my .env file now. – P-RAD Feb 26 '21 at 00:25