I'm building an Angular app hosted on Firebase with authentication and Firestore database. I have my environment.prod.ts that look like this:
export const environment = {
production: true,
debug: false,
firebase: {
apiKey: "MY_API_KEY",
authDomain: "MY_AUTH_DOMAIN",
projectId: "MY_PROJECT_ID",
storageBucket: "MY_STORAGE_BUCKET",
messagingSenderId: "MY_MESSAGING_SENDER_ID",
appId: "MY_APP_ID",
measurementId: "MY_MEASUREMENT_ID"
}
};
In my gitlab-ic pipeline, I use the sed command to replace the firebase placeholder with real values and then build the app like this:
build_app:
stage: build
dependencies:
- install_dependencies
script:
- sed -i "s|MY_API_KEY|${FIREBASE_API_KEY}|g" src/environments/environment.prod.ts
- sed -i "s|MY_AUTH_DOMAIN|${FIREBASE_AUTH_DOMAIN}|g" src/environments/environment.prod.ts
- sed -i "s|MY_PROJECT_ID|${FIREBASE_PROJECT_ID}|g" src/environments/environment.prod.ts
- sed -i "s|MY_STORAGE_BUCKET|${FIREBASE_STORAGE_BUCKET}|g" src/environments/environment.prod.ts
- sed -i "s|MY_MESSAGING_SENDER_ID|${FIREBASE_MESSAGING_SENDER_ID}|g" src/environments/environment.prod.ts
- sed -i "s|MY_APP_ID|${FIREBASE_APP_ID}|g" src/environments/environment.prod.ts
- sed -i "s|MY_MEASUREMENT_ID|${FIREBASE_MEASUREMENT_ID}|g" src/environments/environment.prod.ts
- npm run build --prod
artifacts:
paths:
- dist/
rules:
- if: '$CI_COMMIT_BRANCH == "main"'
changes:
- '**/*'
Then, the next stage deploy my app on Firebase and this work just fine.
My problem is that if I open the developer tools in Firefox and read the generated main.xxxxxx.js file, I can clearly find my Firebase configuration as the environment.prod.ts file doesn't seem to be obfuscate: Plain text Firebase configuration
I'm aware that the best way is to modify the security rules on my Firebase project, but I think that code obfuscation should not be neglected as it would make it more difficult for attackers.
How can I prevent the Firebase configuration from being in plain text?
Thank you in advance.