Microsoft Entra アプリケーション プロキシ クロスオリジン リソース共有 (CORS) の問題を理解して解決する
クロスオリジン リソース共有 (CORS) が原因で、Microsoft Entra アプリケーション プロキシを通じて公開するアプリや API で問題が発生する可能性があります。 この記事では、Microsoft Entra アプリケーション プロキシでの CORS の問題と解決策について説明します。
ヒント
Asynchronous JavaScript and XML は (AJAX) と呼ばれています。 AJAX は、頭字語の中に頭字語を含んでおり、AJAX の中の最後の X は拡張マークアップ言語 (XML) を表しています。 AJAX は Asynchronous JavaScript and XML を表し、XML は拡張マークアップ言語を表します。
通常、ブラウザーのセキュリティ機能により、Web ページは別のドメインへの要求を行うことができません。 この制限は、同一オリジン ポリシーと呼ばれ、悪意のあるサイトが、別のサイトから機密データを読み取れないようにします。 ただし、他のサイトから Web API を呼び出したほうが良い場合もあります。 W3C 標準である CORS によって、サーバーは同一オリジン ポリシーを緩和したり、一部のクロスオリジン要求を許可して他の要求は拒否したりできます。
CORS の問題の理解と識別
以下のように、2 つの URL は、スキーム、ホスト、ポート (Request For Comments (RFC) 6454) が同一である場合、同じ origin を持ちます。
http://contoso.com/foo.htmlhttp://contoso.com/bar.html
以下の URL は、前の 2 つとは異なる origin を持ちます。
http://contoso.net- 異なるドメインhttp://contoso.com:9000/foo.html- 異なるポートhttps://contoso.com/foo.html- 異なるスキームhttp://www.contoso.com/foo.html- 異なるサブドメイン
同一オリジン ポリシーは、正しいアクセス制御ヘッダーを使用する場合を除き、他のオリジンからのリソースにアプリがアクセスするのを防ぎます。 CORS ヘッダーが存在しないか正しくない場合、クロス オリジン要求は失敗します。
CORS の問題はブラウザーのデバッグ ツールを使用して識別できます。
- ブラウザーを起動して Web アプリをブラウズします。
- F12 キーを押してデバッグ コンソールを起動します。
- トランザクションを再現し、コンソール メッセージを確認します。 CORS 違反があると、オリジンに関するコンソール エラーが発生します。
次のスクリーンショットでは、[Try It] ボタンを選択することで、https://corswebclient-contoso.msappproxy.net が Access-Control-Allow-Origin ヘッダー内に見つからなかったという CORS エラー メッセージが表示されています。
アプリケーション プロキシでの CORS の課題
次の例は、Microsoft Entra アプリケーション プロキシの CORS の一般的なシナリオを示しています。 内部サーバーは、CORSWebService Web API コントローラーと、CORSWebService を呼び出す CORSWebClient をホストします。 CORSWebClient から CORSWebService への Asynchronous JavaScript and XML (AJAX) 要求があります。
CORSWebClient アプリは、オンプレミスでホストした場合は動作しますが、Microsoft Entra アプリケーション プロキシを通じて公開した場合は、読み込みに失敗するかエラーで終了します。 アプリケーション プロキシを通じて、CORSWebClient アプリと CORSWebService アプリを異なるアプリとして別々に公開した場合、2 つのアプリは異なるドメインでホストされます。 CORSWebClient から CORSWebService への AJAX 要求はクロスオリジン要求であり、失敗します。
アプリケーション プロキシの CORS 問題の解決策
上記の CORS の問題は、複数ある方法のいずれかで解決できます。
オプション 1: カスタム ドメインの設定
アプリのオリジン、コード、ヘッダーに変更を加えることなく、同じオリジンから公開するには、Microsoft Entra アプリケーション プロキシのカスタム ドメインを使用します。
オプション 2:親ディレクトリを公開する
両方のアプリの親ディレクトリを公開します。 この解決策は、Web サーバー上にアプリが 2 つしかない場合は特に有効です。 各アプリを別々に公開する代わりに、共通の親ディレクトリを公開してオリジンを同じにすることができます。
例は、CORSWebClient アプリの Microsoft Entra アプリケーション プロキシ ページを示しています。 [内部 URL] が contoso.com/CORSWebClient に設定されている場合、contoso.com/CORSWebService ディレクトリに対する要求はクロスオリジンであるため、アプリはこれらの要求を正常に行えません。
代わりに、以下のように CORSWebClient と CORSWebService ディレクトリの両方を含む親ディレクトリを公開するように [内部 URL] を設定します。
結果として得られるアプリの URL は、CORS の問題を効果的に解決します。
https://corswebclient-contoso.msappproxy.net/CORSWebServicehttps://corswebclient-contoso.msappproxy.net/CORSWebClient
オプション 3:HTTP ヘッダーを更新する
origin 要求のマッチを行うために、Web サービスでカスタム HTTP 応答ヘッダーを追加します。 インターネット インフォメーション サービス (IIS) で実行されている Web サイトの場合、IIS マネージャーを使用してヘッダーを変更します。
この変更には、コードの変更は一切必要ありません。 Fiddler トレースでこれを確認できます。
**Post the Header Addition**\
HTTP/1.1 200 OK\
Cache-Control: no-cache\
Pragma: no-cache\
Content-Type: text/plain; charset=utf-8\
Expires: -1\
Vary: Accept-Encoding\
Server: Microsoft-IIS/8.5 Microsoft-HTTPAPI/2.0\
**Access-Control-Allow-Origin: https://corswebclient-contoso.msappproxy.net**\
X-AspNet-Version: 4.0.30319\
X-Powered-By: ASP.NET\
Content-Length: 17
オプション 4: アプリケーションを変更する
適切な値と共に Access-Control-Allow-Origin ヘッダーを追加することによって、CORS をサポートするようにアプリケーションを変更することができます。 ヘッダーを追加する方法は、アプリケーションのコードの言語によって異なります。 コードの変更は、必要な作業量が最も多くなります。
オプション 5:アクセス トークンの有効期間を延長する
一部の CORS の問題は解決できません。 たとえば、アプリケーションは認証のために login.microsoftonline.com へのリダイレクトを行い、アクセス トークンの有効期限が切れます。 このとき、CORS の呼び出しは失敗します。 このシナリオの回避策は、ユーザーのセッション中に期限が切れるのを防ぐために、アクセス トークンの有効期間を延長することです。 詳細については、「Microsoft Entra ID での構成可能なトークンの有効期間」を参照してください。