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 variable shim is gone. If I use it, tsc will throw an error: Cannot find name 'process'.

Here is my thing:

About Q1: I don't think put secret environment variables in environment.ts file is correct. Because these files will be a push to source code management, like GitHub, gitlab, bitbucket. It's not safe. So I think secret environment variables should be passed through process.env, like process.env.ACCESS_TOKEN, or, if use docker-compose, should put the secret environment variables in .env file and add this file to .gitignore file.

About Q2: If I use Heroku to set up my environment variables, it depends on process variable. Now, angular6 get rid of the shim of process, How can I work with Heroku? Also, using docker-compose pass environment variables through .env file depends on process too.

And if use .env file for docker-compose, there is a new question come out: How to pass variables in .env file to angular6 environment.ts file

update 1:

Here is a case:

First, there is no back-end

I use GitHub API and another open API, and there is an environment variable named access_token, If I put this in environment.ts file and push my front-end source code to Github, Github will detect the secret information and give me a warning, they say:

You should not put GitHub access token in your source code and push it to repo, so they will revoke my access token.

So I want to use process.env.ACCESS_TOKEN, but the process variable shim is gone in Angular6, how can I solve this? Should I add environment.ts file to .gitignore file or what?

update 2

Here is another case

Continue with update 1. Now, I add docker-compose.yaml and Dockerfile to run my front-end app in docker container.

Here is the workflow:

1. Write Dockerfile, run npm run build command and copy ./build directory to nginx static file directory of docker container. the ./build directory contains index.html, bundle.js file and so on.

2. Put access_token and other secret environment variables into .env file.

3. Run docker-compose up to run my app in a docker container.

I think this workflow is solid. No need back-end service, the secret environment variables in .env and .gitignore contains .env file, so it will not be pushed to Github repo.

But, the key point is process shim is gone. I can't get environment variables through process.

update 3

I think my question focus on front-end app development phase. I continue to use above case to explain.

For production ready, the workflow is:

1. Make a back-end service for github oauth, when the oauth workflow is done.Back-end service send access_token to front-end.

2. front-end login successfully, get the access_token from back-end service and store it in localStorage or cookie. Don't need get access_token from process.env

But for development phase, Front-end and back-end development is separated for general situation. So, Front-end should not depend on back-end service.

And I don't want to build the whole big system for the beginning.

So I think the question is:

Where to store secret environment variables and how to get within Angular6 front-end application code? There are several situation need consider:

• Work with PaaS Heroku config vars
• dockerlize(docker-compose, Dockerfile), .env file.
• Without back-end service.
• add the environment variables file to .gitignore, don't push to SCM(Github, gitlab and so on)

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. If we speak about the browser, the environment variables are your sessionStorage / localStorage items (localStorage acts more like variables that are added to your bash profile; cookies and indexedDB behave the same manner). The environment.ts is built inside the application so it is just a part of the code.

That's why it is not secure to put secrets to environments.ts in any way. Use secrets on the backend under some service layers or in any of the mentioned above storages.

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.