すべてのカテゴリ

Firebaseストレージのセキュリティルールはトリッキー！！今日の記事は、Firebaseストレージのセキュリティルールに関してです。 Firebaseのデータベース同様、Firebaseのストレージを利用する際はセキュリティルールを設定する事は同じように大切です。しかし、いくつかわかりにくい点がFirebaseのストレージにはあるのでこの記事で解説しています。 最初にプロジェクトを作成してFirebaseのストレージの設定をしたときに標準で設定されるルールは以下のようなルールです。 rules_version = '2'; service firebase.storage {   match /b/{bucket}/o {     match /{allPaths=**} {       allow read, write: if request.auth != null;     }   } } このルールの設定は、全てのFirebaseのストレージのアクセスには、Firebaseにログインすることが必要という設定です。「request.auth != null」の意味は、Authentication（ユーザーの認証）が完了しているという意味です。 Webアプリの制限事項 FirebaseはWebアプリ以外のiPhone(iOS)やAndroidのスマホのアプリにも利用できます。しかし、ここではWebアプリ（Webブラウザを利用したアプリ）の場合を想定しています。Webブラウザで動作する、Webアプリは、セキュリティを確保するために、Webブラウザでいろいろな制限を

Firebaseによるバックエンドの実装時のCORS設定Firebaseでバックエンドの実装を行う場合には幾つかの実装方法があります。 同じFirebaseのプロジェクトフォルダでバックエンドもフロントエンドも実装してしまう場合は問題になりませんが、フロントエンドとバックエンドを別々に実装する場合には注意が必要です。 フロントエンドとバックエンドの両方をFirebaseを利用してホスティングする場合でも、開発中に一時的にでもフロントエンドとバックエンドのドメインが同じでない状態になる可能性があります。 そうした場合は最新のWebブラウザの多くがセキュリティ対応の一環で違うドメインへのアクセスをブロックすることがあるからです。 こうした場合は、CORS（Cross Origin Resource Sharing）の設定が必要になります。 例えば、バックエンドのサービスを「ｈｔｔｐｓ://xxxx-xxxx.web.app」というドメインにすでに公開していて、フロントエンドの開発のテストを「ｈｔｔｐ://localhost:3000」で行ったりする場合です。この二つのサーバのドメインは同じではないので、CORSの設定が正しくされていない場合、最新のWebブラウザがバックエンドのアクセスをブロックしてしまうのでバックエンドのサービスを利用できません。 一方で、フロントエンドとバックエンドをFirebaseの同じプロジェクトフォルダで実装する場合には、この問題は起きません。フロントエンドもバックエンドも同じドメインになるからです。 フロントエンドとバックエンドの両方の実装が必要