Edge Security Acceleration (ESA) で HTTP 応答ヘッダーを設定して、ウェブサイトのオリジン間リソース共有 (CORS) を有効にすることができます。これにより、ブラウザは異なるオリジンからのリソースを安全に読み込み、アクセスできるようになります。
オリジン間リソース共有 (CORS) を設定する理由
Web アプリケーションのアーキテクチャでは、多くの場合、フロントエンドとバックエンドが分離されています。そのため、http://example.com のようなフロントエンドアプリケーションは、http://example.org/api のようなバックエンド API からデータを取得する必要があります。デフォルトでは、ブラウザの同一オリジンポリシーがこれらのクロスオリジン HTTP リクエストをブロックするため、フロントエンドアプリケーションは正しく機能しません:
この問題を解決するには、POP で CORS ポリシーを構成できます。このポリシーにより、ブラウザは http://example.org/api からの応答を検証し、http://example.com からのスクリプトが応答データにアクセスできるようになります。この構成はまた、許可されたオリジンのみがリソースにアクセスできることを保証します。
仕組み
CORS は、ブラウザとサーバー間の HTTP ヘッダーネゴシエーションメカニズムを通じて実装されます。CORS 構成を ESA POP にデプロイできます。これにより、リクエストがオリジンサーバーに到達する前にクロスオリジンロジックを処理し、ESA ネットワークのエッジでポリシーを一元管理することが可能になります。
リクエストの開始:
http://example.comにあるフロントエンドアプリケーションがhttp://example.com/index.htmlリソースをリクエストします。POP での処理：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) と一致するかどうかを確認します。一致する場合、ブラウザは応答を処理してコンテンツを表示します。
例：オリジン間リソース共有 (CORS) の有効化
OSS をオリジンサーバーとして使用し、OSS と ESA の両方のコンソールで CORS を構成する場合、ESA の構成が OSS の CORS 設定を上書きします。
すべてのリクエストへの適用
利用シーン
このシナリオでは、 example.com などの現在のサイトからのすべてのリクエストが、任意のクロスオリジンアドレスのリソースにアクセスできます。
操作手順
ESA コンソールで、サイト管理 をクリックします。サイト カラムで、対象のサイトをクリックします。
左側のナビゲーションウィンドウで、を選択し、変換ルール ページで レスポンスヘッダーの変更 タブをクリックします。応答ヘッダーの位置を [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 ヘッダーを追加する必要があります。このヘッダーの値は、リクエストの origin ヘッダーの値と同じにする必要があります。
操作手順
ESA コンソールで、サイト管理を選択します。サイト 列で、目的のサイトをクリックします。
左側のナビゲーションウィンドウで、を選択します。変換ルール ページで、レスポンスヘッダーの変更 タブをクリックします。応答ヘッダーの位置を [ESA To Client] に設定し、ルールを追加 をクリックします。
レスポンスヘッダー変更ルールの追加 ページで、次の例で説明するようにパラメーターを設定します：
ルール名:
rule-cors-originのようなカスタムルール名を入力します。リクエストが以下のルールと一致する場合...: クライアントリクエストに一致する条件を指定します。これにより、特定の基準を満たすリクエストに対してのみ操作が実行されるようになります。この例では、次の条件を設定します:
ヘッダー オリジンの値 正規表現と一致する： ^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$.以下を実行する...: 応答ヘッダーを変更する操作を指定します。この例では、次のパラメーターを設定します。
タイプ：動的 を選択します。
操作: 追加 を選択します。
レスポンスヘッダー名:
Access-Control-Allow-Originを入力します。レスポンスヘッダー値：
http.request.headers["origin"]を入力します。
結果
クロスオリジンリクエストが送信され、リクエスト内の origin ヘッダーがルールに一致する場合、ESA は Access-Control-Allow-Origin ヘッダーを応答に追加します。このヘッダーの値は、クライアントリクエストの Origin ヘッダーの値と同じです。これにより、ブラウザはクロスオリジンリソースを表示できます。
