クロスオリジン リソース シェアリング（CORS）

設定 構成サンプル

同一生成元ポリシーは、生成元が異なるリソース間でやり取りが行われないようにクライアント側のウェブ アプリケーション（ウェブブラウザなど）に適用されるセキュリティ ポリシーです。不正行為の防止には役立ちますが、このセキュリティを適用すると既知の生成元の間での有効で正当なやり取りも行えなくなります。たとえば、example.appspot.com でホストされているページのスクリプトで、example.storage.googleapis.com の Cloud Storage バケットに保存されているリソースを使用する必要があるとします。この場合、ブラウザから見ると生成元が異なるため、ブラウザは 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 種類があります。シンプル リクエストは直接開始できます。プリフライトされたリクエストは、メイン リクエストを続行する前に、サーバーに予備の「プリフライト」リクエストを送信して権限を取得する必要があります。次のいずれかの状況が当てはまる場合、リクエストはプリフライトされます。

  • GET、HEAD または POST 以外のメソッドを使用する。
  • text/plain、application/x-www-form-urlencoded、multipart/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 Method と Requested Headers を含む OPTIONS リクエストを送信します。

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

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

Cloud Storage CORS のサポート

Cloud Storage では、CORS 構成をバケットレベルでのみ設定できます。さまざまなツールを使用して、バケットの CORS 構成を設定できますが、Cloud Storage エンドポイントによって、CORS リクエストの扱いは異なります。

  • JSON API エンドポイントは、バケットに設定されている構成に関係なく、常に CORS リクエストを許可し、CORS レスポンス ヘッダーでデフォルト値を返します。

  • XML API エンドポイントは、バケットの構成に基づいて CORS リクエストを許可し、その構成に応じて特定の CORS ヘッダー値を返します。

  • 認証によるブラウザでのダウンロード エンドポイント storage.cloud.google.com は、CORS リクエストを許可しません。Google Cloud コンソールでは、各オブジェクトの公開 URL リンクに対して、このエンドポイントが提供されます。

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

storage.googleapis.com/BUCKET_NAME
 
BUCKET_NAME.storage.googleapis.com

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

CORS 構成のコンポーネント

XML API を使用する場合、バケットの CORS 構成に設定した値によって、Cloud Storage が HTTP レスポンスで返す CORS ヘッダーが決まります。JSON API を使用する場合、Cloud Storage はバケットの構成を評価せず、代わりにデフォルトのヘッダー値を返します。

次の表に、CORS 構成のフィールドと、XML API および JSON API のレスポンス動作を示します。これらのフィールドの使用方法については、CORS の構成例をご覧ください。

フィールド1 説明 XML API レスポンスの動作 JSON API レスポンスの動作
origin この 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 ヘッダーを返します。
method

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

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

Cloud Storage は、DELETE、GET、HEAD、POST、PUT の各メソッドをサポートしています。

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

 Cloud Storage は、DELETE、GET、HEAD、PATCH、POST、PUT の各メソッドに設定された Access-Control-Allow-Methods ヘッダーを返します。
responseHeader この 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 ヘッダーセットを返します。
maxAgeSeconds（オプション） プリフライト リクエストを繰り返す前に、ブラウザでリクエストを行える秒数です。これはキャッシュの有効期限とも呼ばれます。この値は、プリフライト リクエストに応じて Access-Control-Max-Age ヘッダーで返されます。たとえば、3600 と指定すると、キャッシュの有効期限は 1 時間に設定されます。 Cloud Storage は、指定されたキャッシュの有効期限で Access-Control-Max-Age ヘッダーを返します。このフィールドを省略すると、Cloud Storage はデフォルト値の 3600 を返します。 Cloud Storage は、デフォルト値の 3600 で Access-Control-Max-Age ヘッダーを返します。

1 フィールド列に記載されている名前は、JSON API に固有のものです。XML API を使用して CORS 構成を設定する場合は、XML 固有の形式を使用します。

複数の生成元、メソッド、ヘッダーの指定

CORS 構成で複数の生成元、メソッド、ヘッダーを設定する方法については、次のリストをご覧ください。

  • JSON API を使用する場合は、カンマ区切りの配列を使用して、複数の生成元、メソッド、ヘッダーを指定できます。例: "method": ["GET", "PUT"]

  • XML API を使用する場合は、個別の要素を使用して、複数の生成元、メソッド、ヘッダーを指定できます。次に例を示します。

    <Methods>
  <Method>PUT</Method>
  <Method>GET</Method>
</Methods>

  • 任意の生成元からのリクエストを許可するには、生成元を * に設定します。たとえば、JSON API では "origin": ["*"]、XML API では <Origin>*</Origin> です。この生成元は構成のテストに役立ちますが、ほとんどの場合、リソースの不要な使用を防ぐためにリクエストの生成元を制限する必要があります。

その他の考慮事項

次の表に、認証情報またはアクセス制御ヘッダーを使用してリクエストを行う場合の考慮事項を示します。

プロパティまたはヘッダー 説明 XML API レスポンスの動作 JSON API レスポンスの動作
認証情報 Cookie、認証ヘッダー、TLS クライアント証明書。 Cloud Storage は Access-Control-Allow-Credentials ヘッダーを返しません。CORS 認証情報は XML API でサポートされていません。

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

プリフライト リクエストの場合、Access-Control-Request-Method が空になると、Cloud Storage は Access-Control-Allow-Credentials を true に設定し、404 - Not Found でリクエストを拒否します。
公開ヘッダー プリフライト リクエストの場合、Access-Control-Request-Headers リクエスト ヘッダーは、その後の CORS リクエストにどのヘッダーを含めるかを示します。Access-Control-Expose-Headers レスポンス ヘッダーはサーバーのレスポンスに含まれ、公開可能なヘッダーを示します。 シンプル リクエストの場合、Access-Control-Expose-Headers によって CORS 構成のレスポンス ヘッダーの値が一覧表示されます。 シンプル リクエストの場合、一般的な HTTP ヘッダーのリストの一部である場合、Access-Control-Expose-Headers は Access-Control-Request-Headers で指定された値を返します。

バケットに外部リソースへのアクセスを許可する

場合によっては、Cloud Storage でホストされているスクリプトに、Cloud Storage の外部のウェブサイトでホストされている静的リソースへのアクセスを許可する必要があることもあります。このシナリオでは、ウェブサイトが CORS ヘッダーを提供し、storage.googleapis.com のコンテンツへのアクセスが許可されます。

特定のバケットをこのデータアクセス専用にすることをおすすめします。これにより、サイトによって静的リソースが誤ってすべての storage.googleapis.com に過度に公開されることを防ぎます。たとえば、mybucket という名前のバケットをデータアクセス専用にしたい場合は、ウェブサイトで CORS ヘッダー Access-Control-Allow-Origin: https://mybucket.storage.googleapis.com を Access-Control-Allow-Origin: https://storage.googleapis.com の代わりに提供するようにしてください。

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

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

次のステップ