I am working on an Angular application deployed on Firebase Hosting. I want to keep my sensitive API keys and tokens secure without exposing them in environment.ts, environment.prod.ts, etc files. I have already created pipeline in Gitlab for build and deploy stage, by hard coding the values the application gets build and deploy successfully but secrets, keys gets exposed in the JavaScript bundle when we inspect it.
I tried passing the variables through the CICD secrets/env variables but they get expose in the client side JavaScript bundle.
I am working on an Angular application deployed on Firebase Hosting. I want to keep my sensitive API keys and tokens secure without exposing them in environment.ts, environment.prod.ts, etc files. I have already created pipeline in Gitlab for build and deploy stage, by hard coding the values the application gets build and deploy successfully but secrets, keys gets exposed in the JavaScript bundle when we inspect it.
I tried passing the variables through the CICD secrets/env variables but they get expose in the client side JavaScript bundle.
Share Improve this question edited Jan 29 at 6:12 Nikhil Shinde asked Jan 29 at 6:09 Nikhil ShindeNikhil Shinde 11 bronze badge 2- If you are going to use any of these keys in your frontend code, it's not possible to secure them entirely. They must be available somehow in order to use them, and no amount of obfuscation will "secure" them from determined attackers. The only way to hide them fully is to move them to your backend code where they can't be accessed publicly at all, and make your frontend use backend endpoints to do the work. – Doug Stevenson Commented Jan 29 at 13:35
- If you are talking about your Firebase configuration (since you tagged this question with "firebase"), you should know that those config strings are meant to be exposed to the public and are not a security problem at all (as long as you've secured your backend resources correctly). Read this to understand the issue: stackoverflow/questions/37482366/… – Doug Stevenson Commented Jan 29 at 13:38
1 Answer
Reset to default 0There are two options:
- You either build some kind of backend that keeps API secrets away from the frontend, and it will make sure they are only used in authorized cases.
- You will use some access tokens that are safe to be shared publicly.
If you have access to some data on the frontend side, it's already outside your control.