4

I have a sensitive API key that my Angular 5 service needs access to. Since I plan on deploying this application to a cloud service that uses environment variables for production configuration (i.e. Heroku), ideally I would like to store this sensitive key as an environment variable rather than exposing it through an environment file that is publicly viewable in the repository. Unfortunately, it seems like Angular 5 does not support this (e.g. Use process.env in Angular 5 environment).

Is there a technique that I can use that will allow me to define my sensitive key as an environment variable and have my Angular service fetch it? Or is there another technique that I can use to allow me to not have to store my sensitive key in my repository, but still allow my production Angular service to access it?

Service Example

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class SpecialService {
  url = 'https://www.specialservice.com/';

  constructor(private http: HttpClient) { }

  getValue(userParm: string) {
    const SUPERSECRETKEY = 'fetch me from an env variable, please';
    return this.http.get(this.url + 'query?function=DO_SOMETHING&parm1='
      + userParm + '&apikey=' + SUPERSECRETKEY);
  }
}

I know I can use src/environments/environment.prod.ts for storing variables to be used in production versus src/environments/environment.ts for storing development variables. Unfortunately, this requires me to commit my sensitive variables to the production file which would be visible in the repository, which is not desirable. My preference is to use some sort of environment variable that I manually define in the production environment.

Thanks for any suggestions or ideas!

Community
  • 1
  • 1
Jason
  • 119
  • 1
  • 9
  • 2
    Angular runs in the browser. If your sensitive key is used in an Angular service, every user of your application will have access to the key, whether you store it in the environment file in your repo, or in an environment variable. – JB Nizet Apr 13 '18 at 16:56

1 Answers1

4

In this case you would be better off proxying the api call on your server. For example if you are using node you can make a call from your front end application to your node server and use that (along with the super secret key) to turn around and call the second api. Anything that you ship to the UI should be considered compromised. You would be able to use environmental variables on Node pretty easily.

zmanc
  • 5,201
  • 12
  • 45
  • 90
  • 2
    I understand - I could define a call server-side, in Node.js, to fetch my value and which can access process.env.SUPERSECRETKEY. This would keep it out of the client code and "secure" it in the server code. – Jason Apr 13 '18 at 17:31
  • 1
    correct, then your call from the UI to node can be a simple call that just says "fetchSecretThings" or something, then the node server would make the secure request. :) cheers – zmanc Apr 13 '18 at 17:32