FirebaseのHostingで作成したwebページでAPIキーなどの情報がモロに確認できてしまう

Question

前提

FirebaseのHostingを利用してwebページを公開するテストをしています。Firebaseのバージョンは4.10.0です。

疑問

デプロイまで完了したのですが、ブラウザからソースを確認すると、APIキーなどの情報がモロに確認できてしまいます。

// init.jsの一部抜粋
firebase.initializeApp({
  "apiKey": "APIキー",
  "databaseURL": "https://プロジェクトID.firebaseio.com",
  "storageBucket": "プロジェクトID.appspot.com",
  "authDomain": "プロジェクトID.firebaseapp.com",
  "messagingSenderId": "送信者ID",
  "projectId": "プロジェクトID"
});

とりあえずGoogle Developer Consoleの、該当プロジェクトの「認証情報」を確認して

API キー
Server key (auto created by Google Service)
Browser key (auto created by Google Service)

の「キーの制限」で、HTTP リファラーに「プロジェクトID.firebaseapp.com/*」を指定すれば、セキュリティ対策になるのでしょうか？？

Answer 1

それは初耳ですが，それで制限できるなら良いと思います．

一般的には，Firebaseのウェブコンソール上で，
Authentication > ログイン方法 > 承認済みドメインより制限し，
さらにデータベースやストレージなどもAuthを使ったrulesで制限をかけます．

Comments

[退会済みユーザー]

ご回答ありがとうございます！

Firebase Console > DEVELOP > Authentication > ログイン方法 > 承認済みドメイン

にて、「ローカル」と「プロジェクトID.firebaseapp.com」が指定されているのが確認できました。
Authを使ったrulesについても、調べてみます。

ちなみに、APIキーや送信者IDなどの情報をソースに書かない方法はあるのでしょうか？？

[Yatima]

一般公開する時にはlocalhostは消したほうが良いと思います．
Authを使ったrulesというのは，単にrulesの中でAuth情報を参照するという意味です．

APIキーなしでも
`<script src="/__/firebase/init.js"></script>`
と書くだけで実は設定できます．
しかしwebpackなど使って本格的に開発する場合は相性があまり良くないです．

[退会済みユーザー]

ご回答ありがとうございます！

rulesの補足、参考にさせていただきます。

なるほど外部JSスタイルで呼び出せば1段階は隠せますね。
(逆にいえば、完全に隠せない ⇒ 知られても大丈夫だよ、ということなのかも)

今回は簡単なPWAの作成テストでしたが、
Webpack等でゴリゴリやる時は留意しようと思います。