[英]Angular 6, should I put secret environment variables in environment.ts file?
There are two sub-questions:有两个子问题:
Should I put secret environment variables in the environment.ts
file?我应该在
environment.ts
文件中放置秘密环境变量吗?
The process
variable shim is gone. process
变量垫片消失了。 If I use it, tsc
will throw an error: Cannot find name 'process'
.如果我使用它,
tsc
会抛出一个错误: Cannot find name 'process'
。
Here is my thing:这是我的事情:
About Q1: I don't think put secret environment variables in environment.ts file is correct.关于 Q1:我认为在 environment.ts 文件中放置秘密环境变量是不正确的。 Because these files will be a push to source code management, like GitHub, GitLab, bitbucket.
因为这些文件会推动源代码管理,比如 GitHub、GitLab、bitbucket。 It's not safe.
这不安全。 So I think secret environment variables should be passed through
process.env
, like process.env.ACCESS_TOKEN
, or, if use docker-compose, should put the secret environment variables in .env
file and add this file to .gitignore
file.所以我认为秘密环境变量应该通过
process.env
传递,比如process.env.ACCESS_TOKEN
,或者,如果使用 docker-compose,应该将秘密环境变量放在.env
文件中并将这个文件添加到.gitignore
文件中。
About Q2: If I use Heroku to set up my environment variables, it depends on the process
variable.关于 Q2:如果我使用 Heroku 设置我的环境变量,它取决于
process
变量。 Now, angular6 get rid of the shim of process
, How can I work with Heroku?现在,angular6 摆脱了
process
的垫片,我如何与 Heroku 一起工作? Also, using docker-compose pass environment variables through .env
file depends on process
too.此外,使用
.env
-compose 通过.env
文件传递环境变量.env
取决于process
。
And if use .env
file for docker-compose, there is a new question come out: How to pass variables in .env file to angular6 environment.ts file如果使用
.env
文件进行.env
-compose,就会出现一个新问题: How to pass variables in .env file to angular6 environment.ts file
update 1:更新1:
Here is a case:这是一个案例:
First, there is no back-end一、没有后台
I use GitHub API and another open API, and there is an environment variable named access_token
, If I put this in the environment.ts
file and push my front-end source code to Github, Github will detect the secret information and give me a warning, they say:我用的是GitHub API和另外一个开放的API,有一个环境变量叫
access_token
,如果我把这个放在environment.ts
文件中,然后把我的前端源码推送到Github,Github会检测到秘密信息并给我一个警告, 他们说:
You should not put the GitHub access token in your source code and push it to repo, so they will revoke my access token.
你不应该把 GitHub 访问令牌放在你的源代码中并将其推送到 repo,这样他们就会撤销我的访问令牌。
So I want to use process.env.ACCESS_TOKEN
, but the process
variable shim is gone in Angular6
, how can I solve this?所以我想使用
process.env.ACCESS_TOKEN
,但process
变量 shim 在Angular6
消失了,我该如何解决? Should I add environment.ts
file to the .gitignore
file or what?我应该将
environment.ts
文件添加到.gitignore
文件还是什么?
update 2更新 2
Here is another case这是另一个案例
Continue with update 1. Now, I add docker-compose.yaml
and Dockerfile
to run my front-end app in the docker
container.与更新1.现在继续,我添加了
docker-compose.yaml
和Dockerfile
运行在我的前端应用程序docker
容器。
Here is the workflow:这是工作流程:
Write Dockerfile
, run npm run build
command and copy ./build
directory to nginx
static file directory of docker
container.写
Dockerfile
,运行npm run build
命令和复制./build
目录nginx
静态文件目录docker
容器。 the ./build
directory contains index.html
, bundle.js
file and so on. ./build
目录包含index.html
、 bundle.js
文件等。
Put access_token
and other secret environment variables into .env
file.将
access_token
和其他秘密环境变量放入.env
文件中。
Run docker-compose up
to run my app in a docker
container.运行
docker-compose up
以在docker
容器中运行我的应用程序。
I think this workflow is solid.我认为这个工作流程是可靠的。 No need back-end service, the secret environment variables in
.env
and .gitignore
contains .env
file, so it will not be pushed to Github repo.不需要后端服务,
.env
和.gitignore
中的秘密环境变量包含.env
文件,因此不会推送到 Github .env
。
But, the key point is process
shim is gone.但是,关键是
process
垫片消失了。 I can't get environment variables through process
.我无法通过
process
获取环境变量。
update 3更新 3
I think my question focus on front-end app development phase .我认为我的问题集中在前端应用程序开发阶段。 I continue to use above case to explain.
我继续用上面的案例来解释。
For production ready, the workflow is:对于生产就绪,工作流程是:
Make a back-end service for github oauth, when the oauth workflow is done.当 oauth 工作流完成后,为 github oauth 制作一个后端服务。 Back-end service send
access_token
to front-end.后端服务将
access_token
发送到前端。
front-end login successfully, get the access_token
from back-end service and store it in localStorage or cookie.前端登录成功,从后端服务获取
access_token
,存放在localStorage或cookie中。 Don't need get access_token
from process.env
不需要从
process.env
获取access_token
But for development phase, Front-end and back-end development are separated for the general situation.但是对于开发阶段,前端开发和后端开发一般是分开的。 So, Front-end should not depend on the back-end service.
所以,前端不应该依赖于后端服务。
And I don't want to build the whole big system for the beginning.而且我不想在一开始就构建整个大系统。
So I think the question is:所以我认为问题是:
Where to store secret environment variables and how to get within Angular6
front-end application code?在哪里存储秘密环境变量以及如何进入
Angular6
前端应用程序代码? Several situations need to be considered:需要考虑几种情况:
.env
file. .env
文件。.gitignore
, don't push to SCM(Github, GitLab and so on).gitignore
,不要推送到 SCM(Github、GitLab 等)TL; TL; DR
DR
You should not treat environment.ts
as something similar to process.env
.您不应该将
environment.ts
视为类似于process.env
东西。
The name is similar but the behaviour is absolutely not.名称相似,但行为绝对不是。 All the settings from
environment.ts
will directly go to your code. environment.ts
所有设置将直接转到您的代码。 That's why it is not secure to put secrets to environments.ts
in any way.这就是为什么以任何方式将机密放入
environments.ts
都是不安全的。
The browser alternatives to environment variables ( process.env
) are环境变量(
process.env
)的浏览器替代品是
export VAR=value
export VAR=value
export VAR=value
but put into your .bash_profile
and is persistent across sessions export VAR=value
但放入您的.bash_profile
并且跨会话持久process.env
, but still in some cases can send the secrets automatically to some backends process.env
,但在某些情况下仍然可以自动将机密发送到某些后端Long version长版
There is no such a thing as a secret in the client side application.客户端应用程序中没有秘密之类的东西。 Since your code in the browser will be able to get those variables, everybody will be able to get those variables in the runtime.
由于您在浏览器中的代码将能够获取这些变量,因此每个人都可以在运行时获取这些变量。
That means, all libraries you explicitly or implicitly use, user's browser extensions and anybody who is able to sniff your / your user's traffic - all they will get your secrets quite easily.这意味着,您显式或隐式使用的所有库、用户的浏览器扩展程序以及任何能够嗅探您/您的用户流量的人 - 所有这些都将很容易获得您的秘密。
It does not matter how you pass it.你如何通过它并不重要。 Through process.env or environment.ts, all will end up in the generated main.js file where they are so much not secret anymore that the furhter discussion is actually useless.
通过 process.env 或 environment.ts,所有这些最终都会在生成的 main.js 文件中,在那里它们不再是秘密了,进一步的讨论实际上是无用的。
Answer to updated part 1:回答更新的第 1 部分:
If access_token
is your (or your synthetic user) token, then you have two options:如果
access_token
是您(或您的合成用户)令牌,那么您有两个选择:
Answer to updated part 2:回答更新的第 2 部分:
You can build a docker around your frontend, run it within a kubernetes cluster inside a virtual machine which is hosted on the most secure server in the world, it will not make your token secure if you put it as angular environment variable because what is public cannot be secret.您可以围绕前端构建一个 docker,在托管在世界上最安全服务器上的虚拟机内的 kubernetes 集群中运行它,如果您将其作为 angular 环境变量,它不会使您的令牌安全,因为什么是公共的不能保密。
You seem to be not understanding the main point: GitHub gives you an error and does not allow to push the code, you should already be grateful that it finds a problem in your architecture.您似乎没有理解要点:GitHub 给您一个错误并且不允许推送代码,您应该已经感谢它在您的架构中发现了问题。 If you want to solve the problem then use the solutions above.
如果您想解决问题,请使用上述解决方案。 If you want to simply bypass the validation of GitHub and you don't care about the security then simply split your token string into two pieces and store it apart and GitHub will not be able to find it.
如果您只想绕过 GitHub 的验证并且不关心安全性,那么只需将您的令牌字符串分成两部分并将其分开存储,GitHub 将无法找到它。
Answer to updated part 3:对更新的第 3 部分的回答:
You can perform GitHub's Oauth2 requests directly from your frontend.您可以直接从前端执行 GitHub 的 Oauth2 请求。 Every of your users should have an account there and that would solve all your problems.
您的每个用户都应该在那里拥有一个帐户,这将解决您的所有问题。 That's actually the same what was proposed as a solution #2.
这实际上与作为解决方案 #2 提出的相同。
If you go with solution #1 with a backend, for development purposes just pre-set up the cookie or use localStorage.setItem('your-token-here')
.如果您使用带有后端的解决方案 #1,出于开发目的,只需预先设置 cookie 或使用
localStorage.setItem('your-token-here')
。 This is way more than enough for development purposes.这对于开发目的来说已经足够了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.