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

问题描述

有两个子问题：

1. 我应该在环境中添加秘密环境变量。 ts 文件？

进程变量shim消失了。如果我使用它， tsc 会引发错误：找不到名称 process 。

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

这是我的事情：

关于第一季度：我认为将秘密的环境变量放在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.

关于第二季度：如果我使用Heroku设置环境变量，则取决于 process 变量。现在，angular6摆脱了 process 的填充，如何使用Heroku？同样，通过 .env 文件使用docker-compose传递环境变量也取决于 process 。

About Q2: If I use Heroku to set up my environment variables, it depends on 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环境.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 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访问令牌并将其推回存储库，这样它们就会撤消我的访问令牌。

You should not put 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 .gitignore file or what?

更新2

这里是另一种情况

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

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

这是工作流程：

1. 写 Dockerfile ，运行 npm run build 命令并将 ./ build 目录复制到 nginx 容器 docker 的静态文件目录。 ./ 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 中的秘密环境变量包含 .env 文件，因此不会将其推送到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 垫片不见了。我无法通过进程获取环境变量。

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 is separated for general situation. So, Front-end should not depend on 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? There are several situation need consider:

• 使用PaaS Heroku配置变量


• dockerlize（docker-组成，Dockerfile）， .env 文件。


• 不提供后端服务。


• 将环境变量文件添加到 .gitignore ，不要推送到SCM（Github，gitlab等）

• Work with PaaS Heroku config vars
• dockerlize(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; DR

您不应将 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群集中运行它，该虚拟机托管在世界上最安全的服务器上，不会如果将其作为角度环境变量放置，则可以确保令牌安全，因为公开的内容无法保密。

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请求。您的每个用户都应该在该处拥有一个帐户，这将解决您的所有问题。

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.

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