Edge Security Acceleration:Configure cross-origin resource sharing

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 data transmission security. For more information, see Cross-Origin Resource Sharing (CORS).

Benefits

For security purposes, browsers use the same-origin policy. This restricts web pages 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 response headers on the DCDN server. If a request to access DCDN resources carries headers that comply with the allowed rules, cross-origin resources can be loaded and accessed.

How CORS works

CORS disabled

1. A client sends a request for http://example.com/index.html to example.com.

2. example.com returns the index.html file to the client. The file URL contains the URL to a resource from another origin server: http://example.org/image_01.png.

3. The client sends a request for http://example.org/image_01.png to example.org.

4. example.org returns a cross-origin header, such as Access-Control-Allow-Origin: *.

5. The client receives the response and the browser checks the header value. The header value is an asterisk (*), which indicates that cross-origin requests from all origins are allowed. Then, the browser displays the response.

CORS enabled

1. A client sends a request for http://example.com/index.html to DCDN.

2. DCDN returns the index.html file to the client. The file URL contains the URL to a resource from another origin server: http://example.org/image_01.png.

3. The client sends a request for http://example.org/image_01.png to DCDN. The request includes the Origin:http://example.com header.

4. DCDN receives the request and then compares the value of the Origin header in the request with the configured value of Access-Control-Allow-Origin. You can specify one or more values, or a wildcard domain name for Access-Control-Allow-Origin. Access-Control-Allow-Origin is returned to the client only if the preceding header values match.

5. DCDN returns a cross-origin header, such as Access-Control-Allow-Origin:http://example.com, to the client.

6. The client receives the response and the browser checks the header value. The header value is http://example.com, which indicates that cross-origin requests from http://example.com are allowed. Then, the browser displays the response.

Usage notes

• If the origin server is an Object Storage Service (OSS) bucket and CORS is configured in both the OSS and DCDN consoles, the CORS settings in the DCDN console are used. For more information about CORS settings in the OSS console, see CORS.

• HTTP response headers configured in the DCDN console, such as the Access-Control-Allow-Origin CORS header, apply to all resource types, including dynamic API requests.

Enable CORS

1. Log on to the DCDN console.

2. In the left-side navigation pane, click Domain Names.

3. On the Domain Names page, find the domain name that you want to manage and click Configure.

4. In the left-side navigation tree of the domain name, click Caching.

5. Click the Modify Outgoing Response Header tab, and then click Add to configure the HTTP response header that DCDN nodes add to responses.

6. Set the following parameters to specify the allowed origins for cross-origin requests, and then click OK.

   

   Parameter	Description	Example
   Operation	You must set this parameter to Add to use the CORS feature.	Add
   Response Header	You must set this parameter to Access-Control-Allow-Origin to use the CORS feature.	Access-Control-Allow-Origin
   Header Value	CORS disabled: You can only configure a wildcard or a single specified origin. Wildcard (*): A wildcard is configured, indicating that resources can be accessed from all origins. Single specified origin: A single origin (domain name) is specified, indicating that resources can be accessed only from the specified origin. CORS enabled: You can configure a wildcard, a single specified origin, multiple specified origins, and wildcard domain names. Wildcard (*): A wildcard is configured, indicating that resources can be accessed from all origins. Single specified origin: A single origin (domain name) is specified, indicating that resources can be accessed only from the specified origin. Multiple specified origins: Multiple origins (domain names) are specified and separated with commas (,), indicating that resources can be accessed from origins within the specified range. Wildcard domain names: A wildcard domain name is configured, indicating that resources can be accessed from all origins that match the specified wildcard domain name.	* http://www.aliyun.com https://aliyun.com,http://www.aliyun.com http://*.aliyun.com
   Allow Duplicates	Yes: Duplicate headers are allowed. The header that is returned from the origin server and the header that is added to the response are returned to the client. No: Duplicate headers are not allowed. The header that is returned from the origin server is overwritten by the header that is added to the response. Important The Allow Duplicates and CORS settings are mutually exclusive. If you set Allow Duplicates to Yes, the setting of CORS becomes invalid.	No
   CORS	You can configure the CORS parameter only if you set Operation to Add and Response Header to Access-Control-Allow-Origin. Valid values of CORS: Disable and Enable. Default value: Disable. Disable: DCDN POPs do not check the Origin header in user requests. In this case, POPs return the configured value of Access-Control-Allow-Origin. Enable: DCDN POPs check the Origin header in user requests and specify a value for the Access-Control-Allow-Origin header based on the following rules: Wildcard pattern match: If you set the Access-Control-Allow-Origin header to an asterisk (*), Access-Control-Allow-Origin:* is returned, regardless of whether user requests contain the Origin header or the value that is specified for the Origin header. Exact match: You can specify one or more values for the Access-Control-Allow-Origin header. Separate multiple values with commas (,): If the value of the Origin header in a user request matches a value of the Access-Control-Allow-Origin header, the matched value of the Access-Control-Allow-Origin header is returned. If the value of the Origin header in a user request does not match a value of the Access-Control-Allow-Origin header, the Access-Control-Allow-Origin header is not returned. Wildcard domain name match: If you set the Access-Control-Allow-Origin header to a wildcard domain name, the value of the Origin header is matched against the wildcard domain name. If you set the CORS parameter to Enable and the value that you want to specify for the Header Value parameter contains a hyphen (-), you need to escape the hyphen (-) to %-. Examples: Original response header value: http://doc.aliyun-example.com. Escaped response header value: http://doc.aliyun%-example.com.	Enable

7. Configure the following parameters to specify the allowed methods for cross-origin requests, and then click OK.

   

   Parameter	Description	Example
   Operation	You must set this parameter to Add.	Add
   Response Header	You must set this parameter to Access-Control-Allow-Methods.	Access-Control-Allow-Methods
   Header Value	Valid values: GET, POST, and PUT. If you add GET, POST, and PUT at the same time, separate them with commas (,).	GET
   Allow Duplicates	Yes: Duplicate headers are allowed. The header that is returned from the origin server and the header that is added to the response are returned to the client. No: Duplicate headers are not allowed. The header that is returned from the origin server is overwritten by the header that is added to the response.	No

Examples