Angular 6，我应该在 environment.ts 文件中放置秘密环境变量吗? [英] Angular 6, should I put secret environment variables in environment.ts file?

问题描述

有两个子问题:

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

1. Should I put secret environment variables in the environment.ts file?

process 变量 shim 消失了.如果我使用它，tsc 会抛出一个错误:Cannot find name 'process'.

The process variable shim is gone. If I use it, tsc will throw an error: Cannot find name 'process'.

这是我的东西:

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

About Q1: I don't think put secret environment variables in environment.ts file is correct. Because these files will be a push to source code management, like 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.

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

About Q2: If I use Heroku to set up my environment variables, it depends on the process variable. Now, angular6 get rid of the shim of process, How can I work with Heroku? Also, using docker-compose pass environment variables through .env file depends on process too.

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

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

更新 1:

这是一个案例:

首先，没有后端

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

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 访问令牌放在源代码中并将其推送到 repo，否则他们会撤销我的访问令牌.

You should not put the GitHub access token in your source code and push it to repo, so they will revoke my access token.

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

So I want to use process.env.ACCESS_TOKEN, but the process variable shim is gone in Angular6, how can I solve this? Should I add environment.ts file to the .gitignore file or what?

更新 2

这是另一个案例

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

Continue with update 1. Now, I add docker-compose.yaml and Dockerfile to run my front-end app in the docker container.

这是工作流程:

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

1. Write Dockerfile, run npm run build command and copy ./build directory to nginx static file directory of docker container. the ./build directory contains index.html, bundle.js file and so on.

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

Put access_token and other secret environment variables into .env file.

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

Run docker-compose up to run my app in a docker container.

我认为这个工作流程很可靠.不需要后端服务，.env和.gitignore中的secret环境变量包含.env文件，所以不会被push到Github 存储库.

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.

但是，关键是 process shim 不见了.我无法通过 process 获取环境变量.

But, the key point is process shim is gone. I can't get environment variables through process.

更新 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:

1. 当 oauth 工作流完成后，为 github oauth 制作一个后端服务.后端服务向前端发送access_token.

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

front-end login successfully, get the access_token from back-end service and store it in localStorage or cookie. Don't need get access_token from process.env

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

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.

所以我认为问题是:

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

Where to store secret environment variables and how to get within Angular6 front-end application code? Several situations need to be considered:

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

• Work with PaaS Heroku config vars
• Dockerized(docker-compose, Dockerfile), .env file.
• Without back-end service.
• Add the environment variables file to .gitignore, don't push to SCM(Github, GitLab and so on)

推荐答案

TL;博士

您不应将 environment.ts 视为类似于 process.env 的内容.

You should not treat environment.ts as something similar to process.env.

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

The name is similar but the behaviour is absolutely not. All the settings from environment.ts will directly go to your code. That's why it is not secure to put secrets to environments.ts in any way.

环境变量(process.env)的浏览器替代品是

The browser alternatives to environment variables (process.env) are

• sessionStorage:行为类似于 export VAR=value
• localStorage:行为类似于 export VAR=value 但放入您的 .bash_profile 并且跨会话持久
• indexedDB:与localStorage相同，唯一不同的是它的异步
• cookies:看起来不像process.env，但在某些情况下仍然可以自动将秘密发送到某些后端
• 后端:始终可以选择从后端获取机密，异步

• sessionStorage: behaves like export VAR=value
• localStorage: behaves like export VAR=value but put into your .bash_profile and is persistent across sessions
• indexedDB: same as localStorage with only difference its asynchronous
• cookies: does not really look like process.env, but still in some cases can send the secrets automatically to some backends
• backend: it is always an option to get secrets from backend, asynchronous

长版

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

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.

你如何通过它并不重要.通过 process.env 或 environment.ts，所有这些最终都会在生成的 main.js 文件中，在那里它们不再是秘密了，以至于进一步讨论实际上是无用的.

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.

回答更新的第 1 部分:

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

If access_token is your (or your synthetic user) token, then you have two options:

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

回答更新的第 2 部分:

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

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.

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

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. 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.

回答更新的第 3 部分:

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

You can perform GitHub's Oauth2 requests directly from your frontend. 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.

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

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'). This is way more than enough for development purposes.

这篇关于Angular 6，我应该在 environment.ts 文件中放置秘密环境变量吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！