Angular 6、秘密の環境変数をenvironment.tsファイルに入れるべきですか？

Question

2つのサブ質問があります。

environment.tsファイルに秘密の環境変数を入れるべきですか？
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に依存しています。

そして、.envファイルをdocker-composeに使用すると、新しい質問が出てきます：。envファイルの変数をangle6 environment.tsファイルに渡す方法

更新1：

ケースは次のとおりです。

まず、バックエンドはありません

GitHub APIと別のオープンAPIを使用しており、access_tokenという名前の環境変数があります。これをenvironment.tsファイルに入れ、フロントエンドソースコードをGithubにプッシュすると、Githubは秘密情報を検出して警告を表示します。：

ソースコードにGitHubアクセストークンを入れてレポジトリにプッシュしないでください。そうすれば、彼らは私のアクセストークンを無効にします。

したがって、process.env.ACCESS_TOKENを使用したいのですが、process変数シムはAngular6にありません。どうすれば解決できますか？ environment.tsファイルを.gitignoreファイルに追加する必要がありますか？

update 2

ここに別のケースがあります

更新1に進みます。ここで、docker-compose.yamlとDockerfileを追加して、dockerコンテナーでフロントエンドアプリを実行します。

ワークフローは次のとおりです。

Dockerfileと書き込み、npm run buildコマンドを実行し、./buildディレクトリをnginxコンテナのdocker静的ファイルディレクトリにコピーします。 ./buildディレクトリには、index.html、bundle.jsファイルなどが含まれます。
access_tokenおよびその他の秘密の環境変数を.envファイルに入れます。
docker-compose upを実行して、dockerコンテナーでアプリを実行します。

このワークフローはしっかりしていると思います。バックエンドサービスは必要ありません。.envおよび.gitignoreの秘密の環境変数には.envファイルが含まれているため、Githubリポジトリにプッシュされません。

ただし、重要な点はprocess shimがなくなったことです。 processから環境変数を取得できません。

update 3

私の質問はフロントエンドアプリ開発フェーズに焦点を当てていると思います。説明するために上記のケースを使用し続けます。

生産準備のワークフローは次のとおりです。

oauthワークフローが完了したら、github oauthのバックエンドサービスを作成します。バックエンドサービスはaccess_tokenをフロントエンドに送信します。
フロントエンドログインに成功したら、バックエンドサービスからaccess_tokenを取得し、localStorageまたはcookieに保存します。 access_tokenからprocess.envを取得する必要はありません

ただし、開発フェーズでは、一般的な状況のためにフロントエンド開発とバックエンド開発が分離されます。したがって、フロントエンドはバックエンドサービスに依存すべきではありません。

そして、最初は大きなシステム全体を構築したくありません。

だから私は質問だと思う：

秘密の環境変数を保存する場所とAngular6フロントエンドアプリケーションコード内で取得する方法考慮すべき状況がいくつかあります。

PaaS Heroku構成変数を使用する
dockerlize（docker-compose、Dockerfile）、.envファイル。
バックエンドサービスなし。
環境変数ファイルを.gitignoreに追加し、SCMにプッシュしない（Github、gitlabなど）

smnbbrv · Accepted Answer

TL; DR

_environment.ts_を_process.env_に似たものとして扱うべきではありません。名前は似ていますが、動作はまったく違います。ブラウザについて言えば、環境変数はsessionStorage/localStorageアイテムです（localStorageはbashプロファイルに追加される変数のように機能します; cookieとindexedDBは同じように動作します）。 _environment.ts_はアプリケーション内に構築されるため、コードの一部にすぎません。

そのため、environments.tsに何らかの方法で秘密を置くことは安全ではありません。一部のサービスレイヤーまたは上記のストレージのいずれかの下で、バックエンドでシークレットを使用します。

ロングバージョン

クライアント側のアプリケーションには秘密のようなものはありません。ブラウザのコードはこれらの変数を取得できるため、誰もがランタイムでこれらの変数を取得できます。

つまり、明示的または暗黙的に使用するすべてのライブラリ、ユーザーのブラウザー拡張機能、およびユーザー/ユーザーのトラフィックを嗅ぎ取ることができるすべてのユーザー-すべての秘密を簡単に取得できます。

どのように渡すかは問題ではありません。 process.envまたはenvironment.tsを介して、すべてが生成されたmain.jsファイルになり、それらはもはや秘密ではないので、今後の議論は実際には役に立たなくなります。

更新されたパート1に対する回答

_access_token_が（または合成ユーザー）トークンである場合、2つのオプションがあります。

このGithubユーザーに代わってコードをプッシュするバックエンドサービスを作成します。これは、トークンがバックエンド側の環境変数に保存されることを意味します。これは非常に適切な方法です
プッシュごとにトークンを入力するようユーザーに依頼するか、一度尋ねてlocalStorageに保存します。これは、すべてのユーザーが独自の/異なるトークンを持っている場合にのみ意味があります

更新されたパート2への回答

フロントエンドの周りにドッカーを構築し、世界で最も安全なサーバーでホストされている仮想マシン内のkubernetesクラスター内で実行できます。angular環境変数は公開されているものを秘密にすることができないためです。

あなたは主な点を理解していないようです：GitHubはエラーを与え、コードをプッシュすることを許可しません。あなたのアーキテクチャで問題を見つけたことにすでに感謝しているはずです。問題を解決したい場合は、上記の解決策を使用してください。 GitHubの検証を単純にバイパスしたいが、セキュリティを気にしない場合は、トークン文字列を2つの部分に分割して別々に保存すると、GitHubはそれを見つけることができません。

更新されたパート3に対する回答

フロントエンドからGitHubのOauth2リクエストを直接実行できます。すべてのユーザーがそこにアカウントを持っている必要があり、それはすべての問題を解決します。実際には、解決策2として提案されたものと同じです。

バックエンドでソリューション＃1を使用する場合は、開発目的でCookieを事前設定するか、localStorage.setItem('your-token-here')を使用します。これは、開発目的には十分すぎるほどです。