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

Question

分两个问题：

>

是否应该将秘密环境变量放入environment.ts文件中？

process变量shim已消失。如果使用它，tsc将抛出一个错误:无法找到名称'process'。

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

如果docker-compose使用.env文件，就会出现一个新问题：如何将.env文件中的变量传递给angular6环境.ts文件

更新1：

一是没有后端

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

您不应该将GitHub访问令牌放在您的源代码中并将其推送给repo，这样他们就会撤销我的访问令牌。

所以我想使用process.env.access_token，但是process变量shim在Angular6中不见了，我该如何解决这个问题呢？我应该将environment.ts文件添加到.gitignore文件中还是什么？

更新2

这是另一个案例

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

以下是工作流程：

运行docker-compose up在docker容器中运行我的应用程序。

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

但是，关键是processshim没有了。我无法通过process获取环境变量。

更新3

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

为生产就绪，工作流程为：

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

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

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

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

Answer 1

TL；博士

您不应将environment.ts视为类似于process.env的东西。

名字相似，但行为却完全不同。environment.ts中的所有设置都将直接转到您的代码中。这就是为什么以任何方式向environments.ts放入机密都不安全的原因。

• SessionStorage：行为类似导出var=value
• LocalStorage：行为与导出var=value类似，但放入.bash_profile中，并且跨会话持久
• IndexedDB：与localStorage相同，仅有差异，其异步
• cookies：看起来不像process.env，但在某些情况下仍然可以将机密自动发送到某些后端
• 后端：从后端获取机密始终是一个选项，异步

长版本

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

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

对更新的第1部分的答复：

如果access_token是您（或您的合成用户）的令牌，那么您有两个选项：

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

对更新的第2部分的答复：

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

您似乎没有理解要点：GitHub给了您一个错误并且不允许推送代码，您应该已经感激它在您的架构中发现了问题。如果你想解决这个问题，那么就使用上面的解决方案。如果您想简单地绕过GitHub的验证，并且不关心安全性，那么只需将令牌字符串分成两部分并将其分开存储，GitHub将无法找到它。

对更新的第3部分的答复：

您可以直接从前端执行GitHub的Oauth2请求。你的每一个用户都应该有一个帐户在那里，这将解决你的所有问题。这实际上与作为解决方案#2提出的相同。

如果使用带后端的解决方案#1，出于开发目的，只需预先设置cookie或使用localstorage.setitem('your-token-here')。这对于开发来说已经足够了。