Edge Security Acceleration (ESA) で HTTP 応答ヘッダーを設定することで、ウェブサイトのオリジン間リソース共有 (CORS) を有効にできます。これにより、ブラウザは異なるオリジンからリソースを安全に読み込み、アクセスできるようになります。
オリジン間リソース共有を設定する理由
Web アプリケーションは、多くの場合、フロントエンドとバックエンドが分離されたアーキテクチャになっています。http://example.com などのフロントエンドアプリケーションは、http://example.org/api などのバックエンド API からデータを取得する必要があります。デフォルトでは、ブラウザの同一オリジンポリシーにより、これらのクロスオリジン HTTP リクエストはブロックされます。これにより、フロントエンドアプリケーションは正しく動作しなくなります。
POP で CORS ポリシーを設定すると、このクロスドメインアクセス問題が解決されます。このポリシーにより、ブラウザは http://example.org/api からの応答を検証できるようになり、http://example.com からのスクリプトは応答データにアクセスできるようになります。また、承認されたオリジンのみがお客様のリソースにアクセスできるようにします。
ソリューション概要
CORS は、ブラウザとサーバー間の HTTP ヘッダーによる交渉メカニズムを通じて実装されます。ESA POP に CORS 構成をデプロイすることで、リクエストがオリジンサーバーに到達する前にクロスオリジンロジックが処理されます。これにより、ESA ネットワークのエッジで統一されたポリシー管理が可能になります。
リクエストの開始：
http://example.comのフロントエンドアプリケーションが、http://example.com/index.htmlリソースをリクエストします。POP でのプロセス: ESA POP は、リクエストされたコンテンツのキャッシュをチェックします。コンテンツがキャッシュされている場合、POP はそれを直接返します。キャッシュされていない場合、POP はオリジンサーバーからコンテンツをフェッチしてキャッシュし、それを返します。
POP からの応答: POP は、リクエストされたコンテンツ (
index.htmlファイル) を200 OKステータスでクライアントに送信します。クライアントでの処理：クライアントは HTML ファイル内のスクリプトを実行します。
クロスオリジンリクエストの発行: クライアントのスクリプトは、
Origin:http://example.comリクエストヘッダーを含むクロスオリジンリクエストGET http://example.org/apiを送信します。POP でのクロスオリジンリクエストの処理: POP は、リクエストがルールの条件と一致するかどうかを確認します。 たとえば、
Originヘッダーの値がhttp://example.comであるかどうかを確認します。 条件が満たされた場合、POP はAccess-Control-Allow-Origin:http://example.comCORS ヘッダーを応答に追加します。クロスオリジンリクエストに対する POP の応答: POP は、クロスオリジンリクエストに対して
200 OKを返します。クライアントでのクロスオリジンリクエストの処理: ブラウザは、応答内の
Access-Control-Allow-Originヘッダーが現在のページのオリジン (http://example.com) と一致するかどうかを確認します。一致する場合、ブラウザは応答を処理し、コンテンツを表示します。
設定例
OSS をオリジンサーバーとして使用し、OSS と ESA の両方のコンソールで CORS を設定する場合、ESA の設定が OSS の CORS 設定を上書きします。
すべてのリクエストへの適用
ユースケース
このユースケースは、example.com のような現在のサイトからのすべてのリクエストが、他のすべてのオリジンからのリソースにアクセスできるようにします。
操作手順
ESA コンソールで、サイト管理 を選択します。サイト 列で、目的のサイトをクリックします。
左側のナビゲーションウィンドウで、 を選択します。変換ルール ページで、レスポンスヘッダーの変更 タブをクリックします。Response Header Position を [ESA To Client] に設定し、次に ルールを追加 ボタンをクリックします。
レスポンスヘッダー変更ルールの追加 ページで、パラメーターを次のように設定します。
ルール名：
rule-cors-for-allのようなカスタムルール名を入力します。リクエストが以下のルールと一致する場合...: ルール条件を設定して、クライアントリクエストをフィルターします。この例では、すべてのリクエスト を選択します。
以下を実行する...: 応答ヘッダーを変更するアクションを設定します。この例では、次のパラメーターを設定します:
タイプ：静的 を選択します。
操作: 追加 を選択します。
レスポンスヘッダー名:
Access-Control-Allow-Originを入力します。レスポンスヘッダー値:
*を入力します。
結果
すべてのクロスオリジンリクエストに対して、ESA は応答に Access-Control-Allow-Origin: * ヘッダーを追加します。これにより、ブラウザは応答を処理し、クロスオリジンリソースを表示できます。
特定のリクエストへの適用
ユースケース
このユースケースは、クライアントからのリクエストに含まれる origin ヘッダーの値が example.com のサブドメインである場合に適用されます。HTTP と HTTPS の両方のプロトコルをサポートします。たとえば、以下のオリジンに対してクロスオリジンアクセスが許可されます。
origin:http://www.example.comorigin:https://www.example.comorigin:http://image.example.comorigin:https://image.example.com
応答に CORS ヘッダーを追加します。CORS 応答ヘッダーの値は、リクエスト内の origin ヘッダーの値と同じである必要があります。
設定ステップ
ESA コンソールで、サイト管理 を選択します。サイト 列で、対象のサイトをクリックします。
左側のナビゲーションウィンドウで、 を選択します。変換ルール ページで、レスポンスヘッダーの変更 タブをクリックします。応答ヘッダーの位置を [ESA To Client] に設定し、ルールを追加 ボタンをクリックします。
レスポンスヘッダー変更ルールの追加 ページで、次のようにパラメーターを設定します。
ルール名:
rule-cors-originなどのカスタムルール名を入力します。リクエストが以下のルールと一致する場合...: クライアントリクエストをフィルターするルール条件を設定します。これにより、特定の基準を満たすリクエストに対してのみ操作が実行されるようになります。この例では、条件を
ヘッダー オリジンの値 正規表現と一致する： ^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$に設定します。また、次のように式を直接編集することもできます。
(http.request.headers["origin"] matches "^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$")説明ご使用のプランが正規表現による照合に対応していない場合は、
いずれかに等しいオペレーターを使用し、許可されたオリジンヘッダーの値を指定します。また、次のように式を直接編集することもできます:
(http.request.headers["origin"] in {"http://www.example.com" "https://www.example.com" "http://image.example.com" "https://image.example.com"})
以下を実行する...：応答ヘッダーを変更するように操作を設定します。この例では、次のパラメーターを設定します。
タイプ：動的 を選択します。
操作：追加 を選択します。
レスポンスヘッダー名:
Access-Control-Allow-Originを入力します。レスポンスヘッダー値:
http.request.headers["origin"]を入力します。
結果
クロスオリジンリクエストが行われると、そのリクエストの origin ヘッダーがルールに一致する場合、ESA は応答に Access-Control-Allow-Origin ヘッダーを追加します。このヘッダーの値は、クライアントリクエストの Origin ヘッダーの値と同じです。これにより、ブラウザは応答を処理し、クロスオリジンリソースを表示できます。
