Angularのenvironmentに設定する機密情報を隠蔽する方法

Question

前提・実現したいこと

Angularの設定情報はenvironment.tsに設定すると思いますが、
そこにFirebaseなどの機密情報を設定する場合、ブラウザから開発者ツールなどを使用すると設定情報が見えてしまいます。
それを隠蔽する仕組みを構築したい。

発生している問題・エラーメッセージ

environment.tsにfirebaseのapiKeyなどを設定した場合、それがブラウザから見えてしまい、セキュリティ上の問題がある。

該当のソースコード

export const environment = {
  production: false,
  staging: false,
  clientId: 'xxxxxxxxxxx',
  clientSecret: 'xxxxxxxxxxx',
  apiBaseUrl: 'https://xxxxxxxxxxx/1.0',
  authBaseUrl: 'https://xxxxxxxxxxx/1.0',
  firebase: {
    apiKey: 'xxxxxxxxxxx',
    authDomain: 'xxxxxxxxxxx',
    databaseURL: 'https://xxxxxxxxxxx',
    projectId: 'xxxxxxxxxxx',
    storageBucket: 'xxxxxxxxxxx',
    messagingSenderId: 'xxxxxxxxxxx',
    appId: 'xxxxxxxxxxx',
  },
};

補足情報（FW/ツールのバージョンなど）

Angular 6

Answer 1

firebaseのapiKeyなどを設定した場合、それがブラウザから見えてしまい、セキュリティ上の問題がある。

Firebaseに限って言えば、問題ありません。

Webから使うための仕組みなので、「APIキーは公開される」ことを前提にFirebase側のシステムが構築されています。

Comments

[sshu0062]

ご回答ありがとうございます。
既存のシステムでFirestoreのセキュリティルールが甘い状態だったので、APIキーが公開されないようにと考えていましたが、公開されるものという前提でセキュリティルールを見直します。

Answer 2

公開されるものという前提で対応する。