how to configure cross-origin resource sharing - Edge Security Acceleration

You can configure HTTP response headers in Edge Security Acceleration (ESA) to enable cross-origin resource sharing (CORS) for your website. This allows browsers to securely load and access resources from different origins.

Why configure cross-origin resource sharing

Web applications often has a separate frontend and backend architecture. A frontend application, such as http://example.com, needs to retrieve data from a backend API, such as http://example.org/api. By default, the browser's same-origin policy blocks these cross-origin HTTP requests. This prevents the frontend application from working correctly.

Configuring a CORS policy on a point of presence (POP) resolves this cross-domain access issue. The policy allows the browser to validate responses from http://example.org/api and allows scripts from http://example.com to access the response data. It also ensures that only authorized origins can access your resources.

Solution overview

CORS is implemented through an HTTP header negotiation mechanism between the browser and the server. Deploying the CORS configuration on an ESA POP handles cross-origin logic before requests reach the origin server. This provides unified policy management at the edge of the ESA network.

Initiate request: The frontend application at http://example.com requests the http://example.com/index.html resource.
Process at POP: The ESA POP checks its cache for the requested content. If the content is cached, the POP returns it directly. If not, the POP fetches the content from the origin server, caches it, and then returns it.
Respond from POP: The POP sends the requested content (the index.html file) to the client with a 200 OK status.
Process at client: The client executes the script in the HTML file.
Initiate cross-origin request: The client's script sends a cross-origin request, GET http://example.org/api, that includes the Origin:http://example.com request header.
Process cross-origin request at POP: The POP checks if the request matches the rule conditions. For example, it checks if the value of the Origin header is http://example.com. If the conditions are met, the POP adds the Access-Control-Allow-Origin:http://example.com CORS header to the response.
POP response to a cross-origin request: The POP returns 200 OK for the cross-origin request.
Process cross-origin request at client: The browser checks if the Access-Control-Allow-Origin header in the response matches the current page's origin (http://example.com). If they match, the browser processes the response and displays the content.

Configuration example

Note

If you use OSS as the origin server and configure CORS in both the OSS and ESA consoles, the ESA configuration overwrites the OSS CORS settings.

Apply to all requests

Use case

This use case allows all requests from the current site, such as example.com, to access resources from any other origin.

Steps

In the ESA console, select Websites. In the Website column, click the target site.
In the navigation pane on the left, choose Rules > Transform Rules. On the Transform Rules page, click the Modify Response Header tab. Set Response Header Position to ESA to Client, and then click the Create Rule button.
On the Create Response Header Modification Rule page, configure the parameters as follows:
1. Rule Name: Enter a custom rule name, such as rule-cors-for-all.
2. If requests match...: Set the rule conditions to filter client requests. For this example, select All Requests.
3. Then execute...: Set the action to modify the response header. For this example, configure the following parameters:
  - Type: Select Static.
  - Operation: Select Add.
  - Response Header Name: Enter Access-Control-Allow-Origin.
  - Response Header Value: Enter *.

Result

For any cross-origin request, ESA adds the Access-Control-Allow-Origin: * header to the response. The browser can then process the response and display the cross-origin resource.

Apply to specific requests

Use case

This use case applies when the value of the origin header in a client request is a subdomain of example.com. It supports both the HTTP and HTTPS protocols. For example, cross-origin access is allowed for the following origins:

origin:http://www.example.com
origin:https://www.example.com
origin:http://image.example.com
origin:https://image.example.com

Add a CORS header to the response. The value of the CORS response header must be the same as the value of the origin header in the request.

Configuration steps

In the ESA console, select Websites. In the Website column, click the target site.
In the navigation pane on the left, choose Rules > Transform Rules. On the Transform Rules page, click the Modify Response Header tab. Set Response Header Position to ESA to Client, and then click the Create Rule button.
On the Create Response Header Modification Rule page, configure the parameters as follows:
1. Rule Name: Enter a custom rule name, such as rule-cors-origin.
2. If requests match...: Set the rule conditions to filter client requests. This ensures that the action is executed only for requests that meet specific criteria. For this example, set the condition to Header Value of origin matches regex ^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$.
  You can also directly edit the expression as follows: (http.request.headers["origin"] matches "^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$")
  Note
  If your plan does not support matching with regular expressions, use the is in operator and list the allowed origin header values.
  You can also directly edit the expression as follows: (http.request.headers["origin"] in {"http://www.example.com" "https://www.example.com" "http://image.example.com" "https://image.example.com"})
3. Then execute...: Set the action to modify the response header. For this example, configure the following parameters:
  - Type: Select Dynamic.
  - Operation: Select Add.
  - Response Header Name: Enter Access-Control-Allow-Origin.
  - Response Header Value: Enter http.request.headers["origin"].

Result

When a cross-origin request is made, if the origin header in the request matches the rule, ESA adds the Access-Control-Allow-Origin header to the response. The value of this header is the same as the value of the Origin header from the client request. The browser can then process the response and display the cross-origin resource.