クロスオリジン リソース シェアリング(CORS)

サンプルに移動

同一生成元ポリシーは、生成元が異なるリソース間でやり取りが行われないようにクライアント側のウェブ アプリケーション(ウェブブラウザなど)に適用されるセキュリティ ポリシーです。不正行為の防止には役立ちますが、このセキュリティを適用すると既知の生成元の間での有効で正当なやり取りも行えなくなります。たとえば、example.appspot.com の App Engine でホストされているページのスクリプトで、example.storage.googleapis.com の Cloud Storage バケットに保存されているリソースを使用する必要があるとします。ただし、ブラウザから見ると 2 つの異なる生成元があるため、ブラウザは example.appspot.com からのスクリプトが example.storage.googleapis.com からリソースをフェッチすることを許可しません。

この制限の回避策としてクロスオリジン リソース シェアリング(CORS)仕様が World Wide Web Consortium(W3C)で開発されました。Cloud Storage では、CORS をサポートするようにバケットを構成することを許可してこの仕様をサポートしています。上記の例を続けると、ブラウザが自分のリソースを example.appspot.com からのスクリプトと共有することができるように example.storage.googleapis.com バケットを構成できます。

CORS 構成の要素の詳細については、バケットの CORS を設定するをご覧ください。

CORS のしくみ

CORS リクエストには、シンプルとプリフライトの 2 種類があります。シンプル リクエストは直接開始できます。プリフライトされたリクエストは、メイン リクエストを続行する前に、サーバーに予備の「プリフライト」リクエストを送信して権限を取得する必要があります。次のいずれかの状況が当てはまる場合、リクエストはプリフライトされます。

  • GETHEAD または POST 以外のメソッドを使用する。
  • text/plainapplication/x-www-form-urlencodedmultipart/form-data 以外の Content-Type と一緒に POST メソッドを使用する。
  • カスタム ヘッダーを設定する。例: X-PINGOTHER

ブラウザが Cloud Storage にシンプル リクエストを行うと、次のプロセスが発生します。

  1. ブラウザは、リクエストに Origin ヘッダーを追加します。Origin ヘッダーには、Cloud Storage バケットのリソースを共有しようとしているリソースの生成元が含まれます(例: Origin:https://www.example.appspot.com)。

  2. Cloud Storage は、リクエストの HTTP メソッドと Origin ヘッダーの値をターゲット バケットの CORS 構成内のメソッドおよび生成元情報と比較し、一致するものがあるかどうかを確認します。存在する場合、Cloud Storage はレスポンスに Access-Control-Allow-Origin ヘッダーを含めます。Access-Control-Allow-Origin ヘッダーには、初期リクエストの Origin ヘッダーの値が含まれます。

  3. ブラウザはレスポンスを受け取り、Access-Control-Allow-Origin 値が元のリクエストで指定されたドメインと一致しているかどうかを確認します。一致する場合、リクエストは成功します。一致しない場合や Access-Control-Allow-Origin ヘッダーがレスポンスに存在しない場合は、リクエストが失敗します。

プリフライトされたリクエストは、まず次の手順に従います。成功した場合、シンプル リクエストと同じ処理を行います。

  1. ブラウザは、メイン リクエストの Requested MethodRequested Headers を含む OPTIONS リクエストを送信します。

  2. Cloud Storage は、ターゲット リソースで許可されている HTTP メソッドとヘッダーの値で応答します。プリフライト リクエスト内のメソッドまたはヘッダーの値のいずれかが、ターゲット リソースによって許可されたメソッドとヘッダーのセットに存在しない場合、リクエストが失敗し、メイン リクエストは送信されません。

これは CORS の簡単な説明です。詳細な説明については、Fetch の仕様をご覧ください。

Cloud Storage CORS のサポート

Cloud Storage では、バケット レベルでのみ CORS 構成を設定できます。gsutil コマンドライン ツール、XML APIJSON API を使用してバケットの CORS 構成を設定できます。ただし、CORS 構成は XML API リクエストにのみ適用されます。

さまざまな Cloud Storage エンドポイントで、CORS リクエストを次のように処理します。

  • JSON API エンドポイントは、ターゲット バケットの CORS 構成に関係なく、CORS リクエストを許可します。
  • XML API エンドポイントは、ターゲット バケットの CORS 構成に基づいて CORS リクエストを受け入れます。
  • 認証によるブラウザでのダウンロード エンドポイント storage.cloud.google.com は、CORS リクエストを許可しません。Cloud Console では、各オブジェクトの公開 URL リンクに対して、このエンドポイントが提供されます。

次のいずれかの XML API リクエスト URL を使用して、CORS ヘッダーを含む Cloud Storage からのレスポンスを取得できます。

storage.googleapis.com/[BUCKET_NAME]
[BUCKET_NAME].storage.googleapis.com

XML API リクエスト URL の詳細については、リクエスト エンドポイントをご覧ください。

CORS 構成の要素

バケットの CORS 構成に設定した値によって、Cloud Storage が HTTP レスポンスで返す CORS ヘッダーが決められます。

項目 説明 XML API レスポンスの動作 JSON API レスポンスの動作
送信元 この Cloud Storage バケットとのクロスオリジン リソース シェアリングを許可する送信元を指定します。例: https://origin1.example.com ブラウザのリクエストの送信元が CORS 構成内の送信元と一致する場合、Cloud Storage はブラウザに Access-Control-Allow-Origin を返します。一致しない場合、Cloud Storage はレスポンスに Access-Control-Allow-Origin を含めません。すべての送信元へのアクセス権を付与するワイルドカード値 <Origin>*</Origin> を指定できます。 Cloud Storage は、リクエストの送信元に設定された Access-Control-Allow-Origin ヘッダーを返します。
メソッド

この Cloud Storage バケットとのクロスオリジン リソース シェアリングを許可する HTTP メソッドを指定します。この値は、成功したプリフライト リクエストに応じて Access-Control-Allow-Methods ヘッダーで返されます。

OPTIONS は、ブラウザがプリフライト リクエストを開始するために使用する標準的な方法であるため、CORS 構成で OPTIONS を指定しないでください。

Cloud Storage は、DELETEGETHEADPOSTPUT の各メソッドをサポートしています。

Cloud Storage は、Access-Control-Request-Methods ヘッダー内のブラウザから送信されたメソッドを、バケットの CORS 構成と照合します。一致しない場合、Cloud Storage は CORS レスポンス ヘッダーなしで 200 レスポン スコードを返します。

Cloud Storage は、DELETEGETHEADPATCHPOSTPUT の各メソッドに設定された Access-Control-Allow-Methods ヘッダーを返します。
レスポンス ヘッダー レスポンス ヘッダー フィールドには、この Cloud Storage バケットとのクロスオリジン リソース シェアリングを許可するヘッダーを指定します。この値は、成功したプリフライト リクエストに応じて Access-Control-Allow-Headers ヘッダーで返されます。 プリフライト リクエストの場合、Cloud Storage は Access-Control-Request-Headers ヘッダーでブラウザから送信されたヘッダーをバケットの CORS 構成と照合します。一致しない場合、Cloud Storage は CORS レスポンス ヘッダーを返しません。 Cloud Storage は、Access-Control-Request-Headers ヘッダーで指定された値と同じ Access-Control-Allow-Headers ヘッダーセットを返します。
最長期間(秒)(省略可) MaxAgeSec フィールドは、プリフライト リクエストを繰り返す前に、ブラウザでリクエストを行える秒数を指定します。これはキャッシュの有効期限とも呼ばれます。この値は、プリフライト リクエストに応じて Access-Control-Max-Age ヘッダーで返されます。たとえば、3600 と指定すると、キャッシュの有効期限は 1 時間に設定されます。 Cloud Storage は、指定されたキャッシュの有効期限で Access-Control-Max-Age ヘッダーを返します。このフィールドを省略すると、Cloud Storage はデフォルト値の 3600 を返します。 Cloud Storage は、デフォルト値の 3600Access-Control-Max-Age ヘッダーを返します。
その他の考慮事項
認証情報 Cloud Storage は現在、CORS の認証情報をサポートしていません。 Cloud Storage は常に true に設定された Access-Control-Allow-Credentials ヘッダーを返します。

シンプル リクエストの場合、CORS リクエストが承認されて有効になると、Access-Control-Allow-Credentials ヘッダーは true に設定されます。

プリフライト リクエストの場合、Access-Control-Request-Method が空になると、Cloud Storage は Access-Control-Allow-Credentials を true に設定し、404 - Not Found でリクエストを拒否します。

公開ヘッダー Access-Control-Expose-Headers レスポンス ヘッダーには、レスポンスの一部として公開されるヘッダー名が一覧表示されます。 シンプル リクエストの場合、Access-Control-Expose-Headers によって CORS 構成のレスポンス ヘッダーの値が一覧表示されます。 シンプル リクエストの場合、一般的な HTTP ヘッダーのリストの一部である場合、Access-Control-Expose-HeadersAccess-Control-Request-Headers で指定された値を返します。

クライアント側の CORS サポート

ほとんどのブラウザは、XMLHttpRequest オブジェクトを使用してクロスドメイン リクエストを作成します。XMLHttpRequest が、適切なヘッダーの挿入やサーバーとの CORS のやり取りの処理の作業をすべて担当します。Cloud Storage バケットで CORS サポートを利用するために、新しいコードを追加する必要はありません。

次のステップ