Edge Security Acceleration:Configure CORS

What is CORS?

Cross-origin resource sharing (CORS) is a standard cross-origin solution that is provided by HTML5 to allow web pages to access and load resources from different origin servers. This ensures the security of data transmission. For more information, see Cross-Origin Resource Sharing (CORS).

Benefits

For security purposes, browsers use the same-origin policy. This restricts scripts from initiating requests to access and load resources from different domains or subdomains, or over different protocols or ports. For example, example.com cannot access resources on example.org. When you configure CORS, you can specify HTTP response headers that points of presence (POPs) return to clients. This way, if a request carries a header that is included in the allowed headers, the requested resources can be accessed and loaded even from a different origin.

How CORS works

CORS not enabled

1. A client sends a request for http://example.com/index.html to example.com. example.com returns the index.html file to the client. A script in the index.html file initiates another request for http://example.org/api.

2. The client sends a request to example.org with the header Origin: example.com carried. By default, ESA does not return the cross-origin header because CORS is not enabled. Therefore, the browser blocks the response to this request, resulting in an error "No 'Access-Control-Allow-Origin' header is present on the requested resource" displayed.

CORS enabled

1. A client sends a request for http://example.com/index.html to example.com. example.com returns the index.html file to the client. A script in the index.html file initiates another request for http://example.org/api.

2. The client sends a request to example.org with the header Origin: example.com carried. After CORS is enabled, ESA returns the configured cross-origin header, such as Access-Control-Allow-Origin:http://example.com.

3. After the client receives the response, the browser checks that the header value is http://example.com, which matches the configured header. As a result, the requested content is displayed.

Usage notes

If the origin server is an Object Storage Service (OSS) bucket and CORS is configured in both the OSS and ESA consoles, the CORS settings in ESA overwrite the settings in OSS. For more information, see CORS.

Enable CORS

1. Log on to the ESA console.

2. In the left-side navigation pane, click Websites.

3. On the Websites page, find the website that you want to manage, and click the website name or View Details in the Actions column.

4. In the left-side navigation tree, choose Rules > Transform Rules.

5. Click the Modify Response Header tab.

6. Click Create Rule. On the Create Response Header Modification Rule page, enter a rule name in the Rule Name field, select if you wish to apply the rule to all incoming requests or only to requests that match a custom filter expression, and then configure a response header based on your business requirements.

   Parameter	Example
   Operation	Add
   Response Header Name	Access-Control-Allow-Origin
   Response Header Value	* Note You can set this header to an asterisk (*), which matches all origins. If you do not set the header value to an asterisk (*), the value must start with http:// or https://.

   Note

   • For non-simple requests, you may need to add response headers such as Access-Control-Allow-Methods and Access-Control-Allow-Headers. For more information, see Cross-Origin Resource Sharing (CORS).

   • You cannot specify a response header name that starts with ali- or Ali-.

   • You can specify one or more values for a request header. Separate the values with commas (,).

7. Click OK.

Examples