Cross-Origin Resource Sharing (CORS) - Amazon Simple Storage Service

このガイドは更新されていません。最新の情報と手順については、新しい Amazon S3 ユーザーガイドを参照してください。

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) は、特定のドメインにロードされたクライアントウェブアプリケーションが異なるドメイン内のリソースと通信する方法を定義します。Amazon S3 の CORS のサポートによって、Amazon S3 でリッチなクライアント側ウェブアプリケーションを構築し、Amazon S3 リソースへのクロスオリジンアクセスを選択的に許可できます。

このセクションでは、CORS の概要を示します。サブトピックでは、Amazon S3 コンソールを使用するか、Amazon S3 REST API や AWS SDK を使用して、プログラムによって CORS を有効にする方法について説明します。

Cross-Origin Resource Sharing: ユースケースのシナリオ

CORS のユースケースの例を以下に示します。

シナリオ 1

静的ウェブサイトを Amazon S3 上でホスティングする」で説明されているように、website という名前の Amazon S3 バケットでウェブサイトをホストしているとします。ユーザーは、次のウェブサイトエンドポイントをロードします。

http://website.s3-website.us-east-1.amazonaws.com

このバケットに保存されているウェブページで JavaScript を使用し、バケットの Amazon S3 の API エンドポイント website.s3.us-east-1.amazonaws.com を使用して、同じバケットに対して認証済みの GET および PUT リクエストを行います。ブラウザは通常、それらのリクエストを許可しないように、JavaScript をブロックしますが、CORS を使用することにより、website.s3-website.us-east-1.amazonaws.com からのクロスオリジンリクエストを明示的に有効にするようにバケットを設定できます。

シナリオ 2

S3 バケットからウェブフォントをホストする必要があるとします。ここでも、ブラウザでウェブフォントを読み込むために CORS チェック (プリフライトチェックと呼ばれます) が必要です。ウェブフォントをホストしているバケットを、いずれのオリジンもこれらのリクエストを実行できるように設定します。

バケットで CORS を設定する方法

クロスオリジンリクエストを許可するようバケットを設定するには、CORS 設定を作成します。CORS 設定は、バケットへのアクセスを許可するオリジン、各オリジンでサポートされるオペレーション (HTTP メソッド)、その他のオペレーション固有情報を識別するルールを持つ XML ドキュメントです。設定には、最大 100 のルールを追加できます。CORS 設定を cors サブリソースとしてバケットに追加できます。

S3 コンソールで CORS を設定する場合は、JSON を使用して CORS 設定を作成する必要があります。新しい S3 コンソールでは、JSON CORS 設定のみがサポートされます。

重要

新しい S3 コンソールでは、CORS 設定は JSON である必要があります。

ウェブサイトへのアクセスに Amazon S3 ウェブサイトエンドポイントを使用する代わりに、所有するドメイン、例えば example1.com を使用してコンテンツを配信できます。独自のドメインの使用については、「Route 53 に登録されたカスタムドメインを使用した静的ウェブサイトの設定」を参照してください。

例 1

次の例の cors 設定には 3 つのルールがあり、CORSRule 要素として指定されています。

  • 最初のルールは、http://www.example1.com オリジンからのクロスオリジン PUT、POST、および DELETE リクエストを許可します。このルールは、Access-Control-Request-Headers ヘッダーによって、プリフライト OPTIONS リクエスト内のすべてのヘッダーも許可します。プリフライト OPTIONS リクエストへのレスポンスとして、Amazon S3 はリクエストされたヘッダーを返します。

  • 2 つ目のルールは最初のルールと同じクロスオリジンリクエストを許可しますが、このルールは別のオリジン http://www.example2.com に適用されます。

  • 3 つ目のルールは、すべてのオリジンからのクロスオリジン GET リクエストを許可します。ワイルドカード文字 * は、すべてのオリジンを表します。

XML
<CORSConfiguration> <CORSRule> <AllowedOrigin>http://www.example1.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>http://www.example2.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration>
JSON
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "http://www.example1.com" ], "ExposeHeaders": [] }, { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "http://www.example2.com" ], "ExposeHeaders": [] }, { "AllowedHeaders": [], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ]

例 2

次の CORS 設定に示すように、CORS 設定ではオプションの設定パラメータも使用できます。この例で、CORS 設定は http://www.example.com オリジンからのクロスオリジン PUT、POST、および DELETE の各リクエストを許可します。

XML
<CORSConfiguration> <CORSRule> <AllowedOrigin>http://www.example.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> <MaxAgeSeconds>3000</MaxAgeSeconds> <ExposeHeader>x-amz-server-side-encryption</ExposeHeader> <ExposeHeader>x-amz-request-id</ExposeHeader> <ExposeHeader>x-amz-id-2</ExposeHeader> </CORSRule> </CORSConfiguration>
JSON
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "http://www.example.com" ], "ExposeHeaders": [ "x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2" ], "MaxAgeSeconds": 3000 } ]

前述の設定の CORSRule 要素には、次のオプションの要素が含まれます。

  • MaxAgeSeconds— 指定したリソースのプリフライト OPTIONS リクエストへの Amazon S3 レスポンスをブラウザでキャッシュする時間を秒単位で指定します (この例では 3,000)。レスポンスのキャッシュにより、元のリクエストが繰り返された場合に、ブラウザは Amazon S3 にプリフライトリクエストを送信する必要がありません。

  • ExposeHeader - 顧客がアプリケーションから (たとえば JavaScript x-amz-server-side-encryption オブジェクトから) アクセスできるレスポンスヘッダー (この例では x-amz-request-idx-amz-id-2、および XMLHttpRequest) を識別します。

AllowedMethod 要素

CORS 設定では、AllowedMethod 要素に次の値を指定できます。

  • GET

  • PUT

  • POST

  • DELETE

  • HEAD

AllowedOrigin 要素

AllowedOrigin 要素に、クロスドメインリクエストを許可するオリジンを指定します ( http://www.example.com など)。オリジン文字列には、1 つのワイルドカード文字 (*) のみを含めることができます。たとえば、http://*.example.com などです。オプションで、オリジンに * を指定して、すべてのオリジンでクロスオリジンリクエストを送信できるようにすることができます。さらに、https を指定して、セキュリティで保護されたオリジンのみを有効にすることもできます。

AllowedHeader 要素

AllowedHeader 要素は、Access-Control-Request-Headers ヘッダーによって、プリフライトリクエストで許可されるヘッダーを指定します。Access-Control-Request-Headers ヘッダー内の各ヘッダー名は、ルールの対応するエントリに一致する必要があります。Amazon S3 は、レスポンスで、リクエストされたヘッダーのうち許可されたヘッダーのみを送信します。Amazon S3 へのリクエストで使用できるヘッダーのサンプルリストについては、Amazon Simple Storage Service API リファレンスの「一般的なリクエストヘッダー」を参照してください。

ルール内の各 AllowedHeader 文字列には、最大 1 つのワイルドカード文字 (*) を含めることができます。たとえば、<AllowedHeader>x-amz-*</AllowedHeader> は Amazon 固有のすべてのヘッダーを有効にします。

ExposeHeader 要素

ExposeHeader 要素は、顧客がアプリケーションから (たとえば、JavaScript XMLHttpRequest オブジェクトから) アクセスできるようにするレスポンス内のヘッダーを識別します。一般的な Amazon S3 レスポンスヘッダーのリストについては、Amazon Simple Storage Service API リファレンスの「一般的なリクエストヘッダー」を参照してください。

MaxAgeSeconds 要素

MaxAgeSeconds 要素は、リソース、HTTP メソッド、およびオリジンによって識別されたプリフライトリクエストのレスポンスをブラウザでキャッシュできる時間を秒単位で指定します。

Amazon S3 でのバケットの CORS 設定の評価方法

Amazon S3 がブラウザからプリフライトリクエストを受け取ると、バケットの CORS 設定を評価し、受信ブラウザリクエストに一致する最初の CORSRule ルールを使用して、クロスオリジンリクエストを有効にします。ルールが一致するには、次の条件を満たしている必要があります。

  • リクエストの Origin ヘッダーが AllowedOrigin 要素に一致している必要があります。

  • リクエストメソッド (GET や PUT など)、またはプリフライト Access-Control-Request-Method リクエストの場合は OPTIONS ヘッダーが、AllowedMethod 要素のいずれかである必要があります。

  • プリフライトリクエストのリクエストの Access-Control-Request-Headers ヘッダーにリストされているすべてのヘッダーが AllowedHeader 要素に一致している必要があります。

注記

バケットの CORS 設定を有効にすると、ACL とポリシーが引き続き適用されます。