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

注意

このドキュメントは、Azure Front Door Standard/Premium を対象としています。 Azure Front Door については、 こちらを参照してください。

CORS とは

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

しくみ

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

単純な要求の場合:

1. ブラウザーが、別の Origin HTTP 要求ヘッダーを含む CORS 要求を送信します。 このヘッダーの値は親ページを提供した Origin であり、"プロトコル"、"ドメイン"、"ポート" の組み合わせとして定義されます。https://www.contoso.com からのページが fabrikam.com Origin のユーザーのデータにアクセスしようとすると、次の要求ヘッダーが 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 ガイドを参照してください。

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

Access-Control-Allow-Origin ヘッダーが wildカード (*) または単一のオリジンに設定されている場合、Azure Front Door の CORS は追加の構成なしで自動的に動作します。 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 などの追加の応答ヘッダーを変更できます。

次のステップ

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