Comment utiliser les variables d'environnement pour les touches sensibles en Angular 5

Question

J'ai une clé API sensible à laquelle mon service Angular 5 doit avoir accès. Comme je prévois de déployer cette application sur un service en nuage qui utilise des variables d'environnement pour la configuration de la production (c'est-à-dire Heroku), j'aimerais idéalement stocker cette clé sensible en tant que variable d'environnement plutôt que de l'exposer par le biais d'un fichier d'environnement visible par tous dans le référentiel. Malheureusement, il semble qu'Angular 5 ne prenne pas en charge cette fonctionnalité (par ex. Utiliser process.env dans l'environnement Angular 5 ).

Y a-t-il une technique que je peux utiliser qui me permettra de définir ma clé sensible comme une variable d'environnement et la faire récupérer par mon service Angular ? Ou existe-t-il une autre technique que je peux utiliser pour ne pas avoir à stocker ma clé sensible dans mon référentiel, tout en permettant à mon service Angular de production d'y accéder ?

Exemple de service

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);
  }
}

Je sais que je peux utiliser src/environnements/environnement.prod.ts pour stocker les variables à utiliser en production et src/environnements/environnement.ts pour stocker les variables de développement. Malheureusement, cela m'oblige à commiter mes variables sensibles dans le fichier de production qui serait visible dans le référentiel, ce qui n'est pas souhaitable. Ma préférence est d'utiliser une sorte de variable d'environnement que je définis manuellement dans l'environnement de production.

Merci pour toute suggestion ou idée !

Answer 1

Dans ce cas, vous feriez mieux d'utiliser un proxy pour l'appel api sur votre serveur. Par exemple, si vous utilisez node, vous pouvez faire un appel de votre application frontale vers votre serveur node et l'utiliser (avec la clé super secrète) pour appeler la deuxième api. Tout ce que vous envoyez à l'interface utilisateur doit être considéré comme compromis. Vous pourriez utiliser des variables environnementales sur Node assez facilement .