次の方法で共有

Microsoft Entra アプリケーション プロキシでのクロスオリジン リソース共有の問題を解決する

クロスオリジン リソース共有 (CORS) は、Microsoft Entra アプリケーション プロキシを介して発行するアプリと API に課題を提示する可能性があります。 この記事では、Microsoft Entra アプリケーション プロキシでの CORS の問題と解決策について説明します。

通常、ブラウザーのセキュリティにより、Web ページが別のドメインに要求を行うのを防ぐことができます。 この制限は、同一オリジン ポリシーと呼ばれます。 このポリシーは、悪意のあるサイトが別のサイトから機密データを読み取らないようにします。 ただし、他のサイトから Web API を呼び出したほうが良い場合もあります。 CORS は、一部のクロスオリジン要求を許可し、他の要求を拒否するようにサーバーに指示する W3C 標準です。

CORS の問題を特定する

次の例のように、同じスキーム、ホスト、およびポート (コメント要求 (RFC) 6454) がある場合、2 つの URL の配信元は同じです。

  • http://contoso.com/foo.html
  • http://contoso.com/bar.html

これらの URL の配信元は、前の 2 つの URL とは異なります。

  • http://contoso.net: 異なるドメイン
  • http://contoso.com:9000/foo.html: 異なるポート
  • https://contoso.com/foo.html: 異なるスキーム
  • http://www.contoso.com/foo.html: 異なるサブドメイン

同一オリジン ポリシーは、正しいアクセス制御ヘッダーを使用する場合を除き、他のオリジンからのリソースにアプリがアクセスするのを防ぎます。 CORS ヘッダーが存在しないか正しくない場合、クロス オリジン要求は失敗します。

CORS の問題はブラウザーのデバッグ ツールを使用して識別できます。

  1. ブラウザーを開き、Web アプリに移動します。
  2. F12 キーを選択して、DevTools でデバッグ コンソールを開きます。
  3. トランザクションを再現し、コンソール メッセージを確認します。 CORS 違反があると、オリジンに関するコンソール エラーが発生します。

次のスクリーンショットで、[Try It]\(試してみる\) ボタンを選択すると、https://corswebclient-contoso.msappproxy.net ヘッダーにAccess-Control-Allow-Originが見つからなかったという CORS エラー メッセージが発生しました。

CORS の問題の例を示すスクリーンショット。

アプリケーション プロキシでの CORS の課題

次の例は、Microsoft Entra アプリケーション プロキシの CORS の一般的なシナリオを示しています。 内部サーバーは、CORSWebService Web API コントローラーと、CORSWebService を呼び出す CORSWebClient をホストします。 CORSWebClient から CORSWebService への非同期 JavaScript および XML (AJAX) 要求が行われます。

オンプレミスの同一オリジンリクエストを示すスクリーンショット。

CORSWebClient アプリはオンプレミスで動作しますが、Microsoft Entra アプリケーション プロキシを介して発行すると失敗するか、エラーが表示されます。 CORSWebClient と CORSWebService が個別のアプリとして発行されている場合、異なるドメインでホストされます。 異なるドメインは CORSWebClient から CORSWebService クロスオリジンへの AJAX 要求を行い、失敗します。

アプリケーション プロキシ CORS 要求を示すスクリーンショット。

アプリケーション プロキシの CORS に関する問題の解決策

上記の CORS の問題は、いくつかの方法で解決できます。

オプション 1: カスタム ドメインの設定

Microsoft Entra アプリケーション プロキシ カスタム ドメイン を使用して、アプリの配信元、コード、またはヘッダーに変更を加えることなく、同じ配信元から発行します。

オプション 2:親ディレクトリを公開する

両方のアプリの親ディレクトリを公開します。 この解決策は、Web サーバー上にアプリが 2 つしかない場合は特に有効です。 各アプリを別々に公開する代わりに、共通の親ディレクトリを公開してオリジンを同じにすることができます。

次の例は、 CORSWebClient アプリの Microsoft Entra アプリケーション プロキシ ページを示しています。 内部 URL が contoso.com/CORSWebClient に設定されている場合、アプリはクロスオリジンであるため、 contoso.com/CORSWebService ディレクトリに対して正常な要求を行うことはできません。

アプリを個別に発行する方法を示すスクリーンショット。

代わりに、親ディレクトリを発行する 内部 URL の値を設定します。これには、 CORSWebClient ディレクトリと CORSWebService ディレクトリの両方が含まれます。

親ディレクトリの発行を示すスクリーンショット。

結果として得られるアプリの URL は、CORS の問題を効果的に解決します。

  • https://corswebclient-contoso.msappproxy.net/CORSWebService
  • https://corswebclient-contoso.msappproxy.net/CORSWebClient

オプション 3:HTTP ヘッダーを更新する

配信元要求と一致するには、Web サービスにカスタム HTTP 応答ヘッダーを追加します。 インターネット インフォメーション サービス (IIS) で実行されている Web サイトでは、IIS マネージャーを使用してヘッダーを変更します。

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 での構成可能なトークンの有効期間」を参照してください。

オプション 6: 複雑なアプリケーション

プレフライト (OPTIONS) 要求が使用される複数の個々の Web アプリケーションを含むアプリケーションの場合は、複雑なアプリケーション機能を使用してアプリを発行できます。 詳細については、「 Microsoft Entra アプリケーション プロキシの複雑なアプリケーションについて」を参照してください。

関連コンテンツ