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

前端之家收集整理的这篇文章主要介绍了Angular 6,我应该在environment.ts文件中放置秘密环境变量吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有两个子问题:

>我应该在environment.ts文件中放置秘密环境变量吗?
>过程变量垫片消失了.如果我使用它,tsc将抛出一个错误:找不到名称’process’.

这是我的事:

关于Q1:我不认为在environment.ts文件中放置秘密环境变量是正确的.因为这些文件将推动源代码管理,如GitHub,gitlab,bitbucket.这不安全.所以我认为秘密环境变量应该通过process.env传递,比如process.env.ACCESS_TOKEN,或者,如果使用docker-compose,应该将秘密环境变量放在.env文件中,并将此文件添加到.gitignore文件中.

关于Q2:如果我使用Heroku来设置我的环境变量,它取决于流程变量.现在,angular6摆脱了过程的垫片,我如何使用Heroku?此外,通过.env文件使用docker-compose传递环境变量也取决于进程.

如果使用docker-compose的.env文件,则会出现一个新问题:How to pass variables in .env file to angular6 environment.ts file

更新1:

这是一个案例:

首先,没有后端

我使用github api或其他开放的api,并且有一个名为access_token的环境变量,
如果我把它放在environment.ts文件中并将我的前端源代码推送到Github,Github将检测到秘密信息并给我一个警告,他们说,你不应该在源代码中放入github访问令牌并将其推送到repo,所以他们将撤销我的访问令牌.

所以我想使用process.env.ACCESS_TOKEN,但是过程变量shim在Angular6中消失了,我该如何解决这个问题呢?我应该将environment.ts文件添加到.gitignore文件中还是什么?

更新2

这是另一个案例:

继续更新1.现在,我添加docker-compose和Dockerfile来在docker容器中运行我的前端应用程序.这是工作流程:

>编写Dockerfile,运行npm run build命令并将./build目录复制到docker容器的Nginx静态文件目录. ./build目录包含index.html,bundle.js文件等.
>将access_token和其他秘密环境变量放入.env文件中.
>运行docker-compose以在docker容器中运行我的应用程序.

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

但是,关键点是流程垫片已经消失.我无法通过流程获取环境变量.

更新3

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

为了准备生产,工作流程是:

>当oauth工作流完成时,为github oauth提供后端服务.Back-end服务将access_token发送到前端.
>前端登录成功,从后端服务获取access_token并将其存储在localStorage或cookie中.不需要从process.env获取access_token

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

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

所以我认为问题是:

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

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

TL; DR

您不应将environment.ts视为与process.env类似的内容.名称相似但行为绝对不是.如果我们谈论浏览器,环境变量就是你的sessionStorage / localStorage项(localStorage更像是添加到你的bash配置文件的变量; cookies和indexedDB的行为方式相同). environment.ts是在应用程序内部构建的,因此它只是代码的一部分.

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

长版

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

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

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

回答第1部分的更新:

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

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

回答第2部分的更新:

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

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

回答第3部分的更新:

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

如果您使用带有后端的解决方案#1,出于开发目的,只需预先设置cookie或使用localStorage.setItem(‘your-token-here’).这对于开发来说已经足够了.

猜你在找的Angularjs相关文章