React + Firebase によるWebアプリ開発のセキュリティに関して

Question

背景

ReactとFirebaseを使ってWebアプリ開発を行っています。

従来はサーバー側でDBとAPIを用意して、フロントエンドからAPIを叩いてデータのやり取りを行っていました。その場合は、外部サービスに連携するためのAPIキーはサーバー側に保持されるので、一般ユーザーの目に触れることはありません。

ただ、ReactからFirebaseにアクセスする場合にAPIキーをコードに記述して使用していますが、それってソースコードから一般ユーザーにも見られてしまうのでは？などそもそもAPIキーをフロントエンド側で保持することに対して理解できていない部分があります。

疑問に思っていること

• React
• Cloud Firestore
• Firebase Hosting

の組み合わせでサービスを作る場合に、ReactからFirebaseに接続するために下記のようなコードを記述しています。

firebase.initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

ここに記述したapiKeyは、buildしたコードにも記述されていて、一般ユーザーに公開されてしまうのでしょうか？

もしそうであれば、それはセキュリティ的に問題ないものなのでしょうか？

初歩的な質問かもしれませんが、ご教授いただけると幸いです。

補足

下記の記事が自分と似たようなことを考えられていましたので、参考までにリンクを貼りました
https://chaika.hatenablog.com/entry/2019/01/22/133858

Answer 1

authDomainで利用できるドメインを制限してるので問題ないのでは。
apiKeyは最初から公開していい用。

同じような仕組みは過去にも散々使われるので
ユーザー自身がなにか間違えなければ問題ない。