クロスオリジンリソース共有 (CORS) - AWS SDK for JavaScript
CORS の仕組みはCORS 設定は必要ですか？Amazon S3 バケットの CORS を設定するCORS 設定例

AWS SDK for JavaScript V3 APIリファレンスガイドでは、バージョン 3 (V3) のすべてのAPIオペレーションについて詳しく説明しています AWS SDK for JavaScript 。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

クロスオリジンリソース共有 (CORS)

Cross-Origin Resource Sharing (CORS) は、最新ウェブブラウザのセキュリティ機能です。これにより、ウェブブラウザはどのドメインが外部のウェブサイトまたはサービスのリクエストを行うことができるかをネゴシエートできます。

AWS SDK for JavaScript を使用してブラウザアプリケーションを開発する場合、CORS は重要な考慮事項です。リソースへのリクエストのほとんどは、ウェブサービスのエンドポイントなどの外部ドメインに送信されるためです。 JavaScript 環境で CORS セキュリティが強制されている場合は、 サービスで CORS を設定する必要があります。

CORS は、クロスオリジンリクエストでリソースの共有を許可するかどうかを、以下に基づいて決定します。

  • リクエストを行う特定のドメイン

  • 行われている HTTP リクエストのタイプ (GET、PUT、POST、DELETE など)

CORS の仕組みは

最も簡単なケースとして、ブラウザスクリプトは他のドメインのサーバーからリソースの GET リクエストを行います。そのサーバーの CORS 設定に応じて、リクエストが GET リクエストの送信を許可されているドメインからのものである場合、クロスオリジンサーバーはリクエストされたリソースを返すことによって応答します。

リクエスト元のドメインまたは HTTP リクエストの種類のいずれかが承認されていない場合、リクエストは拒否されます。ただし、CORS では、実際に送信する前にリクエストをプリフライトすることができます。この場合、OPTIONS アクセスリクエストオペレーションが送信されるプリフライトリクエストが行われます。クロスオリジンサーバーの CORS 設定がリクエスト元ドメインへのアクセスを許可する場合、サーバーはリクエスト元ドメインがリクエストされたリソースに対して行うことができるすべての HTTP リクエストタイプをリストしたプリフライト応答を返送します。

CORS リクエストのプロセスの流れ

CORS 設定は必要ですか？

Amazon S3 バケットを操作する前に、CORS の設定が必要です。一部の JavaScript 環境では CORS が適用されないため、CORS を設定する必要はありません。例えば、Amazon S3 バケットからアプリケーションをホストし、 *.s3.amazonaws.com またはその他の特定のエンドポイントからリソースにアクセスする場合、リクエストは外部ドメインにアクセスしません。したがって、この CORS 設定は必要ありません。この場合、CORS は Amazon S3 以外のサービスに使用されます。

Amazon S3 バケットの CORS を設定する

AmazonS3 コンソールで CORS を使用するように AmazonS3 バケットを設定できます。

AWS ウェブサービスマネジメントコンソールで CORS を設定する場合は、JSON を使用して CORS 設定を作成する必要があります。新しい AWS ウェブサービスマネジメントコンソールは、JSON CORS 設定のみをサポートします。

重要

新しい AWS ウェブサービスマネジメントコンソールでは、CORS 設定は JSON である必要があります。

  1. AWS ウェブサービスマネジメントコンソールで Amazon S3 コンソールを開き、設定するバケットを見つけて、そのチェックボックスをオンにします。

  2. 開いたペインで、Permissions（許可）を選択します。

  3. Permissions（許可）タブで、CORS Configuration（CORS 設定）を選択します。

  4. CORS Configuration Editor（CORS 設定エディタ）でCORS設定を入力して、Save（保存）を選択します。

CORS 設定は、<CORSRule> の一連のルールを含む XML ファイルです。設定は最大で 100 個のルールを持つことができます。ルールは次のいずれかのタグによって定義されます。

  • <AllowedOrigin> ―クロスドメインリクエストを許可するドメインオリジンを指定します。

  • <AllowedMethod> ―クロスドメインリクエストで許可するリクエストの種類 (GET、PUT、POST、DELETE、HEAD) を指定します。

  • <AllowedHeader> ―プリフライトリクエストで許可されるヘッダーを指定します。

設定例については、Amazon Simple Storage Service User Guide（Amazon Simple ストレージサービスユーザーガイド）の「 How do I configure CORS on my bucket? 」（バケットで CORS を設定する方法）を参照してください。

CORS 設定例

次の CORS 設定例では、ユーザーはドメインexample.orgからバケット内のオブジェクトを表示、追加、削除、または更新することができます。ただし、ウェブサイトのドメインに<AllowedOrigin>を追加することの検討をお勧めします。オリジンを許可するように "*" を指定できます。

重要

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

XML
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://example.org</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>
JSON
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://www.example.org"
        ],
        "ExposeHeaders": [
             "ETag",
             "x-amz-meta-custom-header"]
    }
]

この設定では、ユーザーがバケットに対してアクションを実行することは許可されません。ブラウザのセキュリティモデルで Amazon S3 へのリクエストを許可できます。許可はバケット権限または IAM ロール権限を介して設定する必要があります。

ExposeHeader を使用して、SDK に Amazon S3 から返されたレスポンスヘッダーを読み込ませることができます。例えば、PUTまたはマルチパートアップロードからETagヘッダーを読み取る場合、前の例に示すように、設定にExposeHeaderタグを含める必要があります。SDK は、CORS 設定によって公開されているヘッダーにのみアクセスできます。オブジェクトにメタデータを設定すると、値は x-amz-meta-my-custom-header のように、プレフィックス x-amz-meta- を持つヘッダーとして返され、同じ方法で公開されている必要があります。