I noticed that whenever I check the main.js file on the source tab of my website lunched on Netlify I noticed that my environmental variable is showing and I use the Environmental variable on Netlify to avoid this but some how it is showing. And this allow people to keep attcaking my site. Is there anything I can do to stop making the environmental variable showing. Please help.
This the source tab of my website.
This is my Netlify Envirnomental variable
Please help
@abeebabdullahi033 I think you’ve misunderstood a few things.
Having values as environment variables only keeps them separate from your codebase.
How you use them during build, and subsequently where they end up, is up to your project.
If you have referenced them in front-end code, then they’re going to get compiled into front-end code.
Separate from that confusion, the environment variables that you’re referring to are Firebase keys and they do not need to be secret, see:
API Key Info:
https://firebase.google.com/docs/projects/api-keys
Security Rules:
You mean the apiKey of firebase do not need to be secret? But people are using the apiKey to attack my firestore cloud
Hello but Netlify keeps expose my other private keys
That’s correct, did you read the documentation that I linked to:
Unlike how API keys are typically used, API keys for Firebase services are not used to control access to backend resources ; that can only be done with Firebase Security Rules (to control which users can access resources) and App Check (to control which apps can access resources).
As I already said:
Having values as environment variables only keeps them separate from your codebase.
How you use them during build, and subsequently where they end up, is up to your project
You’re misunderstanding what “Environment variables” do.
It’s not a magic system that allows them to be used on the front-end without being exposed.
They are stored separately from your codebase, (e.g. they are not in your repository), and then they become available during your build.
If you then reference them in code that is compiled into front-end code, they will end up in the output.
To hide any API requests entirely from the front end you would put them into a Serverless Function and call that, instead of calling any API directly. In the case of Firebase/Firestire though, this is probably not what you want to do, as they’re designed to be used on the front-end.
Ohh that makes now. Is there any way you would recommend that I can use to store my other private keys so it doesn’t show on the frontend. For more clarity I am using Github to host my codebase and I am connecting Netlify to my codebase. I have other private keys on the codebase how can I make them secret? So it doesn’t show on the frontend. Thank you in advance.
@abeebabdullahi033 I’ve already answered these questions, see the last paragraph in my previous post, then click the link and ready the documentation.
If you’ve got “private keys” that are used to make requests that should be private, you don’t “keep the key private” you “keep the entire call private”.
As if you tried to keep only the key private, but left the call itself public, and tried to pass the “secret key” into it, you would almost certainly just be exposing it.
