firebasefunctionsとfirebasestorageを使って動的にOGPを設定したいが、COS設定につまずいています

プログラミング初心者なので、基本的なところが抜けている可能性があることはご容赦いただけると幸いです。

「サイト内で作成しfirestorageに保存した画像を、Twitterシェア時に動的にOGPとして設定する」といったことを実現したいです。

Nuxt+firebaseを使って以下のようなプログラムを試したところ、
コンソール上のデバッグではしっかりと動くのですが、ブラウザで動作が確認できません。

Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう
 「Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう」を実際に作ってみる
 Nuxt.js + FirebaseでOGPの仕組みを完全に理解した　〜俳句をSVGで描画するサービスをリリースした話〜

CORS設定ということは想像できているのですが、具体的に色々な設定を試しましたがうまくいきません。

ブラウザのコンソールに表示されているエラーは、以下のようになっております。

＊ firebaseの関数のURLを直接アクセスした場合
GET https://us-central1-XXXXproject.cloudfunctions.net/favicon.ico 403
※HTMLはfunctionで書いた狙い通りで出力されています。

＊ firebaseのHostingのURLにアクセスした場合
Refused to load the image 'https://XXXXproject.firebaseapp.com/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

このエラーに対して、CORS設定をfirebasefunction側にするのか、firebaseStorage側にするのか、Hosting側にするのか（https://XXXXproject.firebaseapp.com/）ごっちゃになってわからなくなっております。

現状では、firebaseStorageのcors設定だけ、以下のようにしております。

json
1[{
2  "origin": ["*"],
3  "responseHeader": ["Content-Type"],
4  "method": ["GET", "HEAD", "DELETE"],
5  "maxAgeSeconds": 3600
6}]

初歩的なご質問で大変恐縮ですが、ご回答くださると嬉しいです。

行動規範の内容に同意します

回答1件

ベストアンサー

Firebaseのことはよくわかりませんが、CSPの問題に読めます。

https://developer.mozilla.org/ja/docs/Web/HTTP/CSP

Refused to load the image 'https://XXXXproject.firebaseapp.com/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

翻訳すると下のような感じ。

text
1画像（'https://XXXXproject.firebaseapp.com/favicon.ico'）の読み取りが拒否されました。
2CSPの「default-src none」という部分に違反しています。
3「img-src」が明示的に指定されていない場合、「default-src」が適用されます。

img-srcの読み取りを許可するようにCSPヘッダーを返せば良いのではないでしょうか。

投稿2019/09/20 00:27

退会済みユーザー

総合スコア0

utoc11

2019/09/20 00:54

ご回答ありがとうございます！ CSPヘッダーで、img-srcの読み取りをどのドメインも許可するような書き方がうまくできないのですが、ご教示いただけないでしょうか…！ https://qiita.com/nyamage/items/677ec6828818461f3e84 このあたりを参照しているのですが、メタタグでのどのドメインも許可の書き方が分かりませんでした。お手数をおかけしますが、ご回答頂けますと幸いです。

退会済みユーザー

2019/09/20 01:01

私の回答のリンク先の例3,5など参考になりませんか？

utoc11

2019/09/24 03:26

CSPの設定自体は、いただいたリンク先でとても理解が進みました！ありがとうございます！ただ今回の問題はそこのCSP設定だけではなかったようで・・・苦戦しております。