Cloud Storage:アクセス権の変更とCORS設定

CloudStorageアクセス権の変更とCORS設定

こんばんはエンジニアの眠れない夜です。

Cloud Storageにアップロードしたファイルにクロスドメインでアクセスできない事があります。そんな時の解決方法を紹介します。

※ 間違っているところなどありましたらご指摘くださいm(_ _)m

CORS(Cross-Origin Resource Sharing)とは?

オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

出典:https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

イマイチわかりづらいので言い換えると

「ファイルにアクセスする時に同じドメイン間ではアクセスできるけど、違うドメインにアクセスするときは通常クロスドメインでブロックされるからそれをどうさばくかを設定する仕組み」

という感じでしょうか。なんとなくイメージは伝わりますかね…(^_^;)

ドメインAからドメインBにあるファイルに普通にアクセスするとブロックされるのでそれを

「ドメインAからのアクセスだけはOK」にしようということですね。

Cloud Storageにアップロードしたファイルを全体公開

それでは早速CloudStorageに保存されたファイルにアクセスできるようにアクセス権を変更しましょう。アクセス権の設定には gsutil を使います。

gsutilのインストール方法はこちら

まずは一番雑な方法でファイルを全体公開にしてしまう方法からです。

※ セキュリティー的にNGなファイルはこんな方法で公開してはいけません。どこからアクセスされても問題のないファイルに限ってこの方法が使えます。

このコマンドでファイルが存在するかを確認します。

gsutil ls -l gs://PROJECT_NAME/pathi/to/file

gsuitlのコマンド一覧はこちら

ファイルが確認できたらこのコマンドですべてユーザーに読み取り権限を与えます。

gsutil acl ch -u AllUsers:R gs://MY_BUCKET_NAME/pathi/to/file

雑な設定ですが、ひとまず目的のファイルにアクセスできるようになります。

Cloud StorageでCSRF設定

ここからはマジメにCSRF設定の方法を紹介します。

cors-json-file.jsonというJSONファイルを作成します。

続いて、作成したファイルに下記のコードを貼り付けて、自分のドメインをoriginに追加します。

ここで指定したドメインからはクロスサイトドメインでもアクセスを受け付けられるようになります。

[
{
"origin": ["https://MY_DOMAIN.com"],
"responseHeader": ["Content-Type"],
"method": ["GET", "HEAD", "DELETE"],
"maxAgeSeconds": 3600
}
]

最後にcors-json-file.jsonをCloudStorageに反映させます。

gsutil cors set cors-json-file.json gs://MY_BUCKET_NAME

設定が反映されているかはこのコマンドで確認します。

gsutil cors get gs://MY_BUCKET_NAME

設定したドメインが表示されていれば設定完了です。

※ 実際に設定がサーバーに反映されるまでは1時間ほどかかります。しばらく待ってからエラーが消えているかを確認してみてください。

まとめ

  • CORS設定は異なるドメイン間でファイルをやり取りするための仕組み(アクセス権の設定)
  • CORS設定を書いたJSONファイルを作ってその中にアクセスを許可したいドメインを記入
  • gsutil cors set cors-json-file.json gs://MY_BUCKET_NAMEで設定をCloudStorageに反映させる
  • gsutil cors get gs://MY_BUCKET_NAMEで確認して完成

今までバックエンド中心の開発をしていたのでクロスドメイン?CORS?という状態だったので今理解している範囲でまとめてみました。これが誰かのお役に立てれば幸いです。

間違っているところなどありましたらご指摘いただけると嬉しいです。

参考記事:https://cloud.google.com/storage/docs/configuring-cors

1 Comment

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください