如何在 Angular 5 中为敏感键使用环境变量

Question

我有一个敏感的 API 密钥，我的 Angular 5 服务需要访问它。由于我计划将此应用程序部署到使用环境变量进行生产配置的云服务（即 Heroku），因此理想情况下，我希望将此敏感密钥存储为环境变量，而不是通过在存储库。不幸的是，Angular 5 似乎不支持这一点（例如Use process.env in Angular 5 environment）。

是否有一种技术可以让我将我的敏感密钥定义为环境变量并让我的 Angular 服务获取它？或者我可以使用另一种技术来允许我不必将我的敏感密钥存储在我的存储库中，但仍允许我的生产 Angular 服务访问它？

服务示例

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

我知道我可以使用 src/environments/environment.prod.ts 来存储要在生产中使用的变量，而 src/environments/environment.ts 来存储开发变量。不幸的是，这要求我将敏感变量提交到存储库中可见的生产文件，这是不可取的。我的偏好是使用我在生产环境中手动定义的某种环境变量。

感谢您的任何建议或想法！

Answer 1

在这种情况下，最好在服务器上代理 api 调用。例如，如果您正在使用节点，您可以从前端应用程序调用节点服务器并使用它（连同超级密钥）转身并调用第二个 api。您发送到 UI 的任何内容都应被视为受到损害。您将能够在Node pretty easily 上使用环境变量。