Firebase API Key の安全な使い方

Firebase API Key 公開に関する日本語解説 (JavaScript, Firebase)

Firebase API Key を公開することは安全ではありません。

Firebase API Key は、あなたの Firebase プロジェクトにアクセスするための認証トークンです。これを公開すると、悪意のあるユーザーがあなたのプロジェクトにアクセスし、データを読み書きしたり、リソースを消費したりすることが可能になります。

なぜ危険なのか？

• 不正な利用
  悪意のあるユーザーがあなたの Firebase プロジェクトを使ってスパムやマルウェアを配信する可能性があります。
• サービス停止
  不正なアクセスにより、あなたの Firebase プロジェクトが過負荷になり、サービスが停止する可能性があります。
• データ盗難
  悪意のあるユーザーがあなたの Firebase データベースにアクセスし、機密情報を盗む可能性があります。

安全な使い方

• Firebase Admin SDK
  サーバーサイドのアプリケーションから Firebase にアクセスする場合は、Firebase Admin SDK を使用してください。これにより、より安全な認証方法が提供されます。
• 環境変数
  API Key を環境変数として設定し、コード内に直接ハードコーディングしないようにしてください。
• サーバーサイドでの使用
  Firebase API Key は、サーバーサイドのコードで使用するようにしてください。これにより、クライアントサイドのコードに公開されるリスクを軽減できます。

Firebase API Key の安全な使い方: JavaScript コード例

サーバーサイドでの使用: Node.js

// index.js
const admin = require('firebase-admin');

// Firebaseプロジェクトのサービスアカウントキーを環境変数から取得
const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);

// Firebaseアプリを初期化
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://your-firebase-project.firebaseio.c   om"
});

// Firebaseデータベースにアクセス
admin.database().ref('users').once('value', (snapshot) => {
  console.log(snapshot.val());
});

クライアントサイドでの使用: React

// App.js
import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

// Firebaseプロジェクトの設定を環境変数から取得
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_   ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

//    Firebaseアプリを初期化
firebase.initializeApp(firebaseConfig);

// Firebaseデータベースにアクセス
const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const db = firebase.database().ref('users');
    db.on('value', (snapshot) => {
      setUsers(snapshot.val());
    });
  }, []);

  return (
    <div>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
};

export default App;

注意

• クライアントサイドでの使用
  API Key を公開する必要がある場合は、Firebase Authentication を使用してユーザー認証を行い、API Key を必要とする操作をサーバーサイドに委譲してください。

Firebase Authentication

クライアントサイドでの API Key 公開を回避

// App.js
import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/databa   se';

// Firebaseプロジェクトの設定を環境変数から取得
const firebaseConfig = {
  // ... (Firebaseプロジェクトの設定)
};

// Firebaseアプリを初期化
firebase.initializeApp(firebaseConfig);

// Firebase Authentication を使用してユーザー認証
const App = () => {
  const [user, setUser] = useState(null);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      setUser(user);
    });
  }, []);

  useEffect(() => {
    if (user) {
      const db = firebase.database().ref('users');
      db.on('value', (snapshot) => {
        setUsers(snapshot.val());
      });
    }
  }, [user]);

  // ... (ユーザー認証のUIなど)
};

export default App;

サーバーサイドでの API Key 使用

// index.js
const admin = require('firebase-admin');

// Firebaseプロジェクトのサービスアカウントキーを環境変数から取得
const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);

// Firebaseアプリを初期化
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://your-firebase-project.firebaseio.c   om"
});

// Firebase Authentication を使用してユーザー認証
const uid = 'user_uid'; // 認証済みのユーザーのUID

// Firebaseデータベースにアクセス
admin.database().ref('users').child(uid).once('value', (snapshot) => {
  console.log(snapshot.val());
});

Cloud Functions

// index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin');

// Firebaseプロジェクトのサービスアカウントキーを環境変数から取得
const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);

// Firebaseアプリを初期化
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://your-firebase-project.firebaseio.c   om"
});

// Cloud Function を定義
exports.getUserData = functions.https.onRequest((req, res) => {
  const uid = req.query.uid; // 認証済みのユーザーのUID

  admin.database().ref('users').child(uid).once('value', (snapshot) => {
    res.send(snapshot.val());
  });
});

// App.js
import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

// Firebaseプロジェクトの設定を環境変数から取得
const firebaseConfig = {
  // ... (Firebaseプロジェクトの設定)
};

// Firebaseアプリを初期化
firebase.initializeApp(firebaseConfig);

// Firebase Authentication を使用してユーザー認証
const App = () => {
  const [user, setUser] = useState(null);
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged   ((user) => {
      setUser(user);
    });
  }, []);

  useEffect(() => {
    if (user) {
      const functions = firebase.functions();
      const getUserData = functions.httpsCallable('getUserData');

      getUserData({ uid: user.uid }).then((result) => {
        setUserData(result.data);
      }).catch((error) => {
        console.error(error);
      });
    }
  }, [user]);

  // ... (ユーザーデータの表示など)
};

export default App;