Angular 6,我应该在environment.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也取决于.

如果使用.envdocker-compose文件,则会出现一个新问题:如何将.env文件中的变量传递给angular6 environment.ts文件

更新1:

这是一个案例:

首先,没有后端

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

您不应该在源代码中放置GitHub访问令牌并将其推送到repo,因此他们将撤销我的访问令牌.

所以我想使用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 repo.

但是,关键点是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.名称相似但行为绝对不是.如果我们谈论浏览器,环境变量就是你的sessionStorage/localStorage项(localStorage更像是添加到你的bash配置文件的变量; cookies和indexedDB的行为方式相同).它environment.ts是在应用程序内部构建的,因此它只是代码的一部分.

这就是为什么以任何方式将秘密泄露给环境都是不安全的.在某些服务层或任何上述存储中的后端使用秘密.

长版

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

这意味着,您明确或隐含使用的所有库,用户的浏览器扩展以及任何能够嗅探您/您的用户流量的人 - 他们都可以轻松获取您的秘密.

你怎么通过它并不重要.通过process.env或environment.ts,所有这些都将最终生成在生成的main.js文件中,在那里它们不再是秘密,因为讨论实际上是无用的.

回答第1部分的更新:

如果environments.ts是您的(或您的合成用户)令牌,那么您有两个选择:

1. 编写后端服务,代表此Github用户推送代码.这意味着令牌将存储在后端的环境变量中,这是一种非常合适的做事方式
2. 要求您的用户为每次推送输入令牌或询问一次并将其存储在localStorage中.这仅在每个用户都有自己的/不同令牌的情况下才有意义

回答第2部分的更新:

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

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

回答第3部分的更新:

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

如果您使用带有后端的解决方案#1,出于开发目的,只需预先设置cookie或使用即可process.env.这对于开发来说已经足够了.