Angular 6，我应该在环境.ts文件中放置秘密环境变量吗？

Question

有两个子问题：

1. 我应该在environment.ts文件中放置秘密环境变量吗？

2. 变量process消失了。如果我使用它，tsc将引发错误：Cannot find name 'process'。

这是我的事：

关于Q1：我不认为将秘密的环境变量放在environment.ts文件中是正确的。因为这些文件将推动源代码管理，例如GitHub，gitlab，bitbucket。不安全因此，我认为秘密环境变量应该像process.env一样通过process.env.ACCESS_TOKEN传递，或者，如果使用docker-compose，则应将秘密环境变量放入.env文件中，并将此文件添加到{ {1}}文件。

关于Q2：如果我使用Heroku设置环境变量，则取决于.gitignore变量。现在，angular6摆脱了process的填充，我该如何使用Heroku？另外，通过process文件使用docker-compose传递环境变量也取决于.env。

如果将process文件用于docker-compose，则会出现一个新问题：How to pass variables in .env file to angular6 environment.ts file

更新1：

这里是一种情况：

首先，没有后端

我使用GitHub API和另一个开放的API，并且有一个名为.env的环境变量， 如果我将其放在access_token文件中并将前端源代码推送到Github，Github将检测到机密信息并给我警告，他们会说：

  

您不应在源代码中放入GitHub访问令牌并将其推送回购，否则它们将撤消我的访问令牌。

因此我想使用environment.ts，但是process.env.ACCESS_TOKEN中没有使用process变量垫片，我该如何解决呢？我应该将Angular6文件添加到environment.ts文件中还是什么？

更新2

这是另一种情况

继续进行更新1。现在，我添加.gitignore和docker-compose.yaml在Dockerfile容器中运行前端应用程序。

这是工作流程：

1. 编写docker，运行Dockerfile命令并将npm run build目录复制到./build容器的nginx静态文件目录中。 docker目录包含./build，index.html文件，依此类推。

2. 将bundle.js和其他秘密环境变量放入access_token文件中。

3. 运行.env以在docker-compose up容器中运行我的应用。

我认为这个工作流程很扎实。不需要后端服务，docker和.env中的秘密环境变量包含.gitignore文件，因此不会将其推送到Github存储库。

但是，关键是.env垫片消失了。我无法通过process获取环境变量。

更新3

我认为我的问题集中在前端应用程序开发阶段。 我继续用上面的案例来解释。

要准备生产，工作流程为：

1. 在完成oauth工作流程后，为github oauth提供后端服务。后端服务将process发送到前端。

2. 前端登录成功，从后端服务获取access_token并将其存储在localStorage或cookie中。不需要从access_token

获取access_token

但是对于开发阶段，一般情况下前端和后端开发是分开的。因此，前端不应该依赖于后端服务。

我不想一开始就构建整个大型系统。

所以我认为问题是：

在哪里存储秘密环境变量，以及如何在process.env前端应用程序代码中使用？有几种情况需要考虑：

• 使用PaaS Heroku配置变量
• dockerlize（docker-compose，Dockerfile），Angular6文件。
• 没有后端服务。
• 将环境变量文件添加到.env，不要推送到SCM（Github，gitlab等）

Answer 1

TL； DR

您不应将environment.ts与process.env类似。名称相似，但行为绝对不同。如果我们谈论浏览器，那么环境变量就是您的sessionStorage / localStorage项（localStorage的行为更像是添加到bash配置文件中的变量； cookie和indexedDB的行为方式相同）。 environment.ts是内置在应用程序内部的，因此它只是代码的一部分。

这就是为什么以任何方式将机密信息放入环境都不安全的原因。在某些服务层下的后端或上述任何存储中的后端上使用机密。

长版

在客户端应用程序中没有秘密。由于您在浏览器中的代码将能够获取这些变量，因此每个人都将能够在运行时获取这些变量。

这意味着，您显式或隐式使用的所有库，用户的浏览器扩展以及能够嗅探您/您的用户流量的任何人-所有这些都将很容易地获得您的秘密。

通过它并不重要。通过process.env或environment.ts，所有这些都将最终保存在生成​​的main.js文件中，在这里它们不再是秘密，以至于进一步的讨论实际上是没有用的。

回答第1部分：

如果access_token是您（或您的综合用户）令牌，那么您有两种选择：

1. 写一个后端服务，代表该Github用户推送代码。这意味着令牌将存储在后端的环境变量中，这是一种非常合适的处理方式
2. 让您的用户为每次推送输入令牌，或者询问一次并将其存储在localStorage中。仅当每个用户都有自己的/不同的令牌时，这才有意义

回答第2部分：

您可以围绕前端构建一个docker，在虚拟机中的kubernetes集群中运行它，该虚拟机托管在世界上最安全的服务器上，如果将其作为角度环境变量放置，则不会使令牌安全，因为公开的内容不能保密。

您似乎不太了解要点：GitHub会给您带来错误，并且不允许推送代码，您应该已经感激它在您的体系结构中发现了问题。如果您想解决问题，请使用上面的解决方案。如果您只想绕过GitHub的验证而又不关心安全性，那么只需将令牌字符串分成两部分并将其分开存放，GitHub将无法找到它。

回答了第3部分：

您可以直接从前端执行GitHub的Oauth2请求。您的每个用户都应该在该处拥有一个帐户，这将解决您的所有问题。实际上与解决方案2的建议相同。

如果您将解决方案＃1与后端一起使用，则出于开发目的，只需预先设置cookie或使用localStorage.setItem('your-token-here')。对于开发目的来说，这是绰绰有余的。