次の方法で共有

クロス オリジン リソース共有 (CORS) を利用した Azure Front Door Standard/Premium の使用

適用対象: ✔️ Front Door Standard ✔️ Front Door Premium

CORS とは

CORS (クロス オリジン リソース共有) は、あるドメインで実行されている Web アプリケーションが別のドメイン内にあるリソースにアクセスできるようにする HTTP 機能です。 クロスサイト スクリプティング攻撃の可能性を低減させるために、すべての最新の Web ブラウザーには同一オリジン ポリシーと呼ばれるセキュリティ制限が実装されています。 これにより、Web ページは他のドメイン内の API を呼び出すことができません。 CORS を使用すれば、あるオリジン (オリジン ドメイン) から他のオリジン内の API を安全に呼び出すことができます。

しくみ

CORS 要求には、"簡単な要求" と "複雑な要求" の 2 種類があります。

単純な要求の場合:

  1. ブラウザーが、別の Origin HTTP 要求ヘッダーを含む CORS 要求を送信します。 このヘッダーの値は親ページを提供したオリジンであり、"プロトコル"、"ドメイン"、および "ポート" の組み合わせとして定義されます。https://www.contoso.com のページが fabrikam.com オリジン内のユーザーのデータにアクセスしようとすると、fabrikam.com に次の要求ヘッダーが送信されます。

    Origin: https://www.contoso.com

  2. サーバーは以下のいずれかの応答を返す可能性があります。

    • 許可されるオリジン サイトを示す、応答の Access-Control-Allow-Origin ヘッダー。 次に例を示します。

      Access-Control-Allow-Origin: https://www.contoso.com

    • 403 などの HTTP エラー コード (Origin ヘッダーの確認後、サーバーによってクロス オリジン要求が許可されなかった場合)

    • すべてのオリジンを許可するワイルドカードが含まれる Access-Control-Allow-Origin ヘッダー。

      Access-Control-Allow-Origin: *

複雑な要求:

複雑な要求は CORS 要求です。この要求で、ブラウザーは実際の CORS 要求を送信する前に、"プレフライト要求" (準備プローブ) を送信します。 プレフライト要求は、サーバーのアクセス許可に対して、元の CORS 要求が処理を続行できるかどうかと、その要求が、同じ URL への OPTIONS 要求かどうかをたずねます。

ヒント

CORS フローおよびよくある落とし穴の詳細については、CORS for REST API ガイドを参照してください。

ワイルドカードまたは単一のオリジンのシナリオ

Azure Front Door の CORS は、Access-Control-Allow-Origin ヘッダーがワイルドカード (*) または単一のオリジンに設定されている場合、追加構成なしで自動的に動作します。 Azure Front Door は、最初の応答をキャッシュし、後続の要求は同じヘッダーを使用します。

オリジンに CORS が設定される前に Azure Front Door に対して要求が送信されていた場合、エンドポイント コンテンツのコンテンツを消去して、Access-Control-Allow-Origin ヘッダーと共にそのコンテンツを再度読み込む必要があります。

複数のオリジンのシナリオ

複数のオリジンを CORS で許可する必要がある場合は、若干複雑になります。 最初の CORS オリジンの Access-Control-Allow-Origin ヘッダーが CDN にキャッシュされるときに問題が発生します。 異なる CORS オリジンが別の要求を行うと、CDN はキャッシュされた Access-Control-Allow-Origin ヘッダーを返し、これはマッチしません。 この問題を修正するにはいくつかの方法があります。

Azure Front Door ルール セット

Azure Front Door では、Azure Front Door ルール セットでルールを作成して、要求の Origin ヘッダーを確認することができます。 それが有効なオリジンである場合、ルールによって、Access-Control-Allow-Origin ヘッダーに正しい値が設定されます。 この場合は、ファイルの配信元サーバーからの Access-Control-Allow-Origin ヘッダーは無視され、AFD のルール エンジンが、許可される CORS オリジンを完全に管理します。

ルール セットを使用したルールの例のスクリーンショット。

ヒント

ルールにさらにアクションを追加して、 Access-Control-Allow-Methods などの他の応答ヘッダーを変更できます。

次のステップ

フロント ドアの作成方法について学習します。