Use Kubernetes secrets as environment variables in Angular 6

Question

I configured an automatic build of my Angular 6 app and deployment in Kubernetes each time is push to my code repository (Google Cloud Repository).

Dev environment variables are classically store in a environment.ts file like this:

export const environment = {
  production: false,
  api_key: "my_dev_api_key"
};

But I don't want to put my Prod secrets in my repository so I figured I could use Kubernetes secrets.

So, I create a secret in Kubernetes:

kubectl create secret generic literal-token --from-literal api_key=my_prod_api_key

But how to use it in my Angular app?

Lachezar Balev · Accepted Answer · 2019-02-10 12:38:59Z

4

Nevertheless what you do, your Angular app is a client application i.e. the user's browser downloads the source code of the app (a bunch of CSS/JS/HTML files, images etc.) and it executes it on the user's machine. So you can't hide anything like you do when implementing a client/server app. In client/server applications all the secrets will reside in the server part. If you put the secret in a k8s secret you will not commit it in the repository, but you will expose it to all of your users anyway.

If you still want to populate a configuration based on environment variables (which is a legit use-case), I've seen and used the following approach. The app is Angular 6 and is served to the browser by an nginx server. The startup script in the docker container is a bit odd and looks similar to those lines below:

envsubst < /usr/share/nginx/html/assets/config.json.tpl > /usr/share/nginx/html/assets/config.json
rm /usr/share/nginx/html/assets/config.json.tpl
echo "Configuration:"
cat /usr/share/nginx/html/assets/config.json
nginx -g 'daemon off;'

As you see we've used envsubst to substitute a config template in the assets folder. The config.json.tpl may look like this:

{
  "apiUrl": "${API_URL}"
}

envsubst will substitute the environment variables with their real values and you will have a valid JSON configuration snippet in your assets. Then nginx will then startup.

answered Feb 10, 2019 at 12:38

Lachezar Balev

12.1k9 gold badges57 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manuel RODRIGUEZ Over a year ago

Thank you Lachezar. But secret will still be exposed if I understand correctly?

Lachezar Balev Over a year ago

Of course it will. It is in your assets. You can't hide anything form the client app.

Lachezar Balev Over a year ago

See the Single-page Apps section in this wonderful article - aaronparecki.com/oauth-2-simplified

Collectives™ on Stack Overflow

Use Kubernetes secrets as environment variables in Angular 6

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related