Angular 6, should I put secret environment variables in environment.ts file?

Question

There are two sub-questions:

1. Should I put secret environment variables in environment.ts file?

2. The process variabl

Answer 1

TL; DR

You should not treat environment.ts as something similar to process.env.

The name is similar but the behaviour is absolutely not. All the settings from environment.ts will directly go to your code. That's why it is not secure to put secrets to environments.ts in any way.

The browser alternatives to environment variables (process.env) are

• sessionStorage: behaves like export VAR=value
• localStorage: behaves like export VAR=value but put into your .bash_profile and is persistent across sessions
• indexedDB: same as localStorage with only difference its asynchronous
• cookies: does not really look like process.env, but still in some cases can send the secrets automatically to some backends
• backend: it is always an option to get secrets from backend, asynchronous

Long version

There is no such a thing as a secret in the client side application. Since your code in the browser will be able to get those variables, everybody will be able to get those variables in the runtime.

That means, all libraries you explicitly or implicitly use, user's browser extensions and anybody who is able to sniff your / your user's traffic - all they will get your secrets quite easily.

It does not matter how you pass it. Through process.env or environment.ts, all will end up in the generated main.js file where they are so much not secret anymore that the furhter discussion is actually useless.

Answer to updated part 1:

If access_token is your (or your synthetic user) token, then you have two options:

1. Write a backend service that pushes the code on behalf of this Github user. That means the token will be stored in the environment variable on a backend side, which is a very much appropriate way of doing stuff
2. Ask your user to enter the token for every push or ask it once and store it in a localStorage. This make sense only in case when every user has its own / different token

Answer to updated part 2:

You can build a docker around your frontend, run it within a kubernetes cluster inside a virtual machine which is hosted on the most secure server in the world, it will not make your token secure if you put it as angular environment variable because what is public cannot be secret.

You seem to be not understanding the main point: GitHub gives you an error and does not allow to push the code, you should already be grateful that it finds a problem in your architecture. If you want to solve the problem then use the solutions above. If you want to simply bypass the validation of GitHub and you don't care about the security then simply split your token string into two pieces and store it apart and GitHub will not be able to find it.

Answer to updated part 3:

You can perform GitHub's Oauth2 requests directly from your frontend. Every of your users should have an account there and that would solve all your problems. That's actually the same what was proposed as a solution #2.

If you go with solution #1 with a backend, for development purposes just pre-set up the cookie or use localStorage.setItem('your-token-here'). This is way more than enough for development purposes.