f:id:utouto97:20211223102910p:plain

TL;DR
Firebase の API Key は公開してもいい
何なら誰でも見れる場所に公開されている
ただし、権限の設定には注意（特に Firestore)

Firebase の API Key とは？

Firebase のサービスを利用するための API Key です。
一つ一つの Firebase プロジェクト毎にそれぞれ API Key が割り当てられています。

Firebaase Console でプロジェクト・アプリの作成を行うと生成されます。
プロジェクトの設定 → 全般 → マイアプリの中で見つけることができます。
API Key とかプロジェクトIDとかいろいろ書かれています。

const firebaseConfig = {
  apiKey: "***************************",
  authDomain: "***************************",
  projectId: "*********",
  storageBucket: "***************************",
  messagingSenderId: "**********",
  appId: "***************************",
  measurementId: "*****"
};

この firebaseConfig に含まれる apiKey や appId 等は、クライアント側に埋め込んで利用するものです。
要はこのAPI Keyを通じて各アプリに対するクライアントの識別を行っています。
Firebase API は、このAPI Key を通じて、通信するアプリやデータベース、プロジェクト等を指定しているということになります。
このAPI Keyの情報には、認証情報は含まれていません。

Firebase の API Key は公開してもいいのか？公開すると危ないのか？

Firebase の API Key はソースコードに張り付けて利用するよう、ドキュメントには書かれています。
そうなると、クライアント利用者からそのAPI Key が見えてしまい、漏洩してしまうのではないかといった懸念があります。

Firebase の API Key は公開しても大丈夫？漏洩すると危険？といった心配がでてくることになります。

結論からいうと、Firebase の API Key は公開しても大丈夫なようです。
API Key が漏洩したからといって、認証情報が漏洩するとは限りません（設定次第では漏洩する可能性もあります）

Firebase の API Key はアプリやプロジェクト等の識別子であるだけであって、認証情報を含まないため公開しても大丈夫です。
つまり、API Key がわかったところで、どのアプリ・プロジェクトであるか、がわかるだけです。

Firebase Hosting を利用していると自動で公開されている

Firebase の API Key を公開してもいいということですが、Firebase Hosting を利用していると、次のパスで firebaseConfigが公開されています。

公開ページのURL/__/firebase/init.js

（実際に、Firebase Hosting を使っているページに /__/firebase/init.jsを付けると、確認できます。）

Firestore 等の権限の設定には注意! 勝手にデータを操作される可能性がある

Firebase の API Key 自体は公開しても大丈夫です。

注意すべきは権限の設定です。

特に、Firestore 等のデータベースの設定を間違えると、保存している情報（個人情報も含むかもしれない）が漏洩する可能性があります。

例えば、Firestoreの権限の設定（ルール設定）で、テストモードを選んでいる場合は危険です。

f:id:utouto97:20220103235656p:plain

allow read, write の部分ですね。
このままだと、誰でも自由に読み書きができてしまいます。
そのため、権限の上手く設定する必要があります。

例えば、認証機能を追加していて、自分のデータのみを操作可能とする場合次のように設定すればよいです。
（内容取得と更新は本人のみ、作成は認証済みの人のみ）

match /users/{userId} {
      allow read, update, delete: if request.auth != null && request.auth.uid == userId;
      allow create: if request.auth != null;
    }

ほかにも様々なルールも設定できます。
（かなり複雑なルール設定もできます）

ここでは、ルール設定についてはこれ以上触れませんので、詳細はググってください。