English (US) Русский 简体中文

Articles in this section

CORS header. Enable CORS header support

What is CORS?

How does the CORS mechanism work?

How to configure Access-Control-Allow-Origin in a personal account

How to configure the Access-Control-Allow-Origin header on the origin side

Check Access-Control-Allow-Origin header 

 

What is CORS?

Access-Control-Allow-Origin response header is a part of a Cross-Origin Resource Sharing (CORS) mechanism that lets browsers get access to selected resources from a domain different to a domain from which the request is received. 

The option sends a response with an Access-Control-Allow-Originheader in a response to a browser and can help to:

  • protect content from using at third-party sites or in third-party applications.
  • prevent XMLHttpRequest cannot load http://domain.ru. No’Access-Control-Allow-Origin’ header is present on the requested resource error, which can appear when web fonts are loaded in Firefox, Internet Explorer and other default browsers from the CDN servers.___________.png

How does CORS mechanism work?

For example, a user of http://domain1.com.opens an image that placed on http://cdn-domain.com/image.jpg.

In this case, a user's browser sends e.g. the following request to the server of http://cdn-domain.com/image.jpg:

GET /image HTTP/1.1
Host: domain2.com
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://domain1.com/examples/access-control/test.html
Origin: http://domain1.com

In this request the most valuable header is Origin. It tells the server that the request is sent from http://domain1.com.

The server of http://cdn-domain.com/image.jpg read the Originheader and accept or reject the request. 

If the server accepts the request, it responds to the browser with the Access-Control-Allow-Origin header. This header allows displaying the requested image for the http://domain1.comuser.

Important! Header parameters (in the example below- "*") depend on the server configuration. Read in detail about this and reasons for accepting and rejecting the request here. 

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2020 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[XML Data]

If the request is not processed by the server, the response to the browser will be sent without Access-Control-Allow-Origin header and the requested image will not be displayed.

 

How to configure Access-Control-Allow-Origin header in a personal account. 

Go to Advanced Settings in the resource settings. Add the HTTP-header Access-Control-Allow-Origin option from the Access (Security) section.

  1. Open the resource settings.
  2.  Select the HTTP Headers section and find the CORS Header Support option.
    Enable the option.

__________________.png

There are three variants on how to configure this option:

1. *, for all domains: the content can be accessed from any domain.

________________.png

In this case CDN will send Access-Control-Allow-Origin header to the browser with the "*" parameter and the content will be available to view.

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2020 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

2. "$http_origin" if an origin is listed below:  the content can be accessed only from domains listed in the option field, the domain from which the request was sent will be added to the response.

_________________________.png

When a request is received, the CDN matches the Origin header value and the domains that are specified for the HTTP-Access-Control-Allow-Origin option.

If the Origin header value matches one of the specified domains, the CDN adds the Access-Control-Allow-Origin header to the response with the requested domain.

If the Origin header value does not match specified domains, the Access-Control-Allow-Origin header is not added and the content will not be displayed. 

! You can enter up to 20 domains.

For example, in the option settings cdn-domain.com is set:

__________________________.png

In this case, if the request for your content is sent from cdn-domain.com, the user's browser gets the following response and the content will be displayed.  

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: https://cdn-domain.com
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

If the request is sent not from cdn-domain.com, then Access-Control-Allow-Origin header will not be added to the response to the browser and content will not be displayed. 

3. "$http_origin", for all domains: the content can be accessed from any domain and the domain from which the request was sent will be added to the response.

_____________________________________.png

This variant of the option is the same as the first variant, but there is a difference in the response that gets the browser from the server in case of a successful request. The domain from which the request was sent will be added to Access-Control-Allow-Origin header.

In this case, if the request for your content is sent e.g. from cdn-domain.com, then this domain will be added to the Access-Control-Allow-Originresponse header and the content will be displayed for a user of cdn-domain.com.

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: https://cdn-domain.com
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

This option can be useful if for setting specific filtering on the server the "*" parameter is not suitable.

All the files delivered by CDN will contain Access-Control-Allow-Origin Header.

 

Rules

Configure Access-Control-Allow-Origin Header only for certain files via Rules.

To create a rule, go to the Rules section in the resource settings and click Create rule -> Create blank rule._______________.png

In the rule settings, specify to which files to apply it.

To add the option, click Add Option and select the CORS header support option from the list.

_____________________________.png

Rule options:

  • If you add an option and enable it, the Access-Control-Allow-Origin header will be added.______________________.png
  • If you add an option but do not enable it, the Access-Control-Allow-Origin header will not be added.

_________________________.png

 

How to configure the Access-Control-Allow-Origin header on the origin side

Below is an example of configurations for the CORS header settings on an origin.

Access-Control-Allow-Origin HTTP-header allows getting content from any domain. 

The Apache Configuration

# ---------------------------------------------------------------------- 
# CORS-enabled images (@crossorigin) 
# ---------------------------------------------------------------------- 
# Send CORS headers if browsers request them; enabled by default for images. 
# developer.mozilla.org/en/CORS_Enabled_Image 
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ 
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute 
<IfModule mod_setenvif.c> 
 <IfModule mod_headers.c> 
  # mod_headers, y u no match by Content-Type?! 
  <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$"> 
    SetEnvIf Origin ":" IS_CORS 
    Header set Access-Control-Allow-Origin "*" env=IS_CORS 
  </FilesMatch> 
 </IfModule> 
</IfModule> 
# ---------------------------------------------------------------------- 
# Webfont access 
# ---------------------------------------------------------------------- 
# Allow access from all domains for webfonts. 
# Alternatively you could only whitelist your # subdomains like "subdomain.example.com". 
<IfModule mod_headers.c> 
 <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$"> 
 Header set Access-Control-Allow-Origin "*" 
 </FilesMatch> 
</IfModule>

The Nginx Configuration

location ~ \.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$ { 
           add_header Access-Control-Allow-Origin "*"; 
}

Check Access-Control-Allow-Origin header

1. Purge the CDN Resource cache. 

2. Use one of the check methods presented below.

 

Use the cURL command in a terminal (MacOS) and cmd (WindowsOS) 

 1. In the terminal, specify: curl -I http://cdn.example.ru/js/intlTelInput/css/intlTelInput.css 

Where http://cdn.example.ru/js/intlTelInput/css/intlTelInput.css is a link to a file integrated with CDN. 

2. You will get an output.  Pay attention to the Access-Control-Allow-Origin header. 

HTTP/1.1 200 OK  
Server: nginx/1.13.1  
Date: Fri, 09 Jun 2017 12:54:24 GMT  
Content-Type: image/jpeg  
Content-Length: 124024  
Connection: keep-alive  
X-Image-Generated: 29  
X-Image-Meta: 1024x768  
X-Image-Read: 71  
Expires: Wed, 06 Dec 2017 12:51:43 GMT  
Cache-Control: max-age=15552000  
Access-Control-Allow-Origin: *  
Last-Modified: Sun, 01 Jan 2017 12:00:00 GMT  
Cache-Control: max-age=315360000, public 

Cache: HIT  
X-Cached-Since: 2017-06-09T12:51:43+00:00 

X-ID: m9-up-e245  

3. If there is the required header, the Access-Control-Allow-Origin header is configured.

 

Use a browser developer console 

1.Open a browser (e.g. Google Chrome). 

2. Open your site. 

3. Press F12 (to open a developer console) 

4. Choose the Network tab. 

5. Refresh the page (press F5). You will get the list of all files downloaded from your site. 

6.Find the required file (e.g: jpeg, png) integrated with the CDN and click on it. For a faster search, use the filter in the panel left corner.  

7. On the Headers tab on the right, you will find the headers set on your origin. ____________________cors.png

8. If there is the required header, the Access-Control-Allow-Origin header is configured.

 

Related articles