角度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文件并将此文件添加到.gitignore文件中。

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

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

更新1：

这里是一种情况：

首先，没有后端

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

您不应该将GitHub访问令牌放在源代码中并推送到存储库中，这样他们就会撤消我的访问令牌。

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

更新2

这里是另一种情况

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

这是工作流程：

1. 写入Dockerfile，运行npm run build命令并将./build目录复制到nginx容器的docker静态文件目录中。 ./build目录包含index.html，bundle.js文件等。

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

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

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

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

更新3

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

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

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

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

获得process.env

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

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

所以我认为问题是：

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

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

Answer 1

TL; DR

您不应该将environment.ts视为类似于process.env。

名称是相似的，但是行为绝对不是。 environment.ts中的所有设置都将直接转到您的代码。因此，以任何方式向environments.ts放置机密都是不安全的。

环境变量（process.env）的浏览器替代方法是

• sessionStorage：行为类似于export VAR=value
• localStorage：行为类似于export VAR=value，但放入您的.bash_profile中，并且在各个会话之间均保持不变
• indexedDB：与localStorage相同，只是其异步
• Cookie：看起来并不像process.env，但在某些情况下仍可以将机密自动发送到某些后端
• 后端：始终是从后端获取机密的选项，异步

长版

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

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

您通过它并不重要。通过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')。对于开发目的来说，这已经绰绰有余。