Enable CORS header support

What is a CORS header?
How CORS works 
Configure: 
        • using the option 
        • using a rule 
        • on an origin server
Check: 
        • using cURL 
        • in a browser

What is a CORS header and what it is used for 

The Access-Control-Allow-Origin 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. 

With our CORS Header Support option, the CDN will add the Access-Control-Allow-Origin header to a response to a browser. It can be used 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 CORS works

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

A user's browser sends the server of http://cdn-domain.com/image.jpg a request like this:

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 was sent from http://domain1.com.

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

If the server accepts the request, a response to the user will contain the Access-Control-Allow-Origin header. This header allows displaying the requested image for the http://domain1.comuser.

Important!  The header parameters, which are shown with * in the example below, depend on server settings. Learn more about it and rules, which a server uses to grant or deny access, in the set-up guide below. 

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 server refuses to process the request, the response will have no Access-Control-Allow-Origin header and the requested image will not be displayed.  

Configure the header using the option 

Open the resource settings. Go to the "HTTP headers" section and select the "CORS Header support" option.

Switch on the option.

You can check the "Always add the header to response from CDN regardless of response code" box. Then the CORS header will be added to responses with any status code. If you leave the box unchecked, the header will be added only to responses with status codes 200, 201, 204, 206, 301, 302, 303, 304, 307 or 308.

image_1686-2.png

The option has three use cases:

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

________________.png

In this case, the value of the Access-Control-Allow-Origin header in a response will be * and the content will be displayed.

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:  content can be accessed only from the domains listed in the field. A response will contain a domain from which the request was sent.

_________________________.png

When the CDN gets a request, it checks a value of the Origin header against the domains that are specified for the option.

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

If a value of the Origin header does not match any of the specified domains, the Access-Control-Allow-Origin header will not be added to a response and the content will not be displayed.

! You can enter up to 20 domains.

For example, we specify cdn-domain.com in the option settings:

image_1687.png

So, if your content is requested from cdn-domain.com, the user's browser will get 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, the 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: content can be accessed from any domain and the domain from which the request was sent will be added to the response.

_____________________________________.png

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

In this case, if your content is requested from cdn-domain.com, this domain will be added to the Access-Control-Allow-Origin response 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 use case may be necessary, for example, if the "*" parameter is not suitable for certain filters configured on a server.

The option settings will be applied to all files sent over the CDN.

Configure the header using a rule

You can configure the header only for certain files via Rules.

Go to the "Rules" section in the resource settings, click "Create rule", then "Create blank rule".

image_1688.png

In the rule settings, specify the files you want to apply the rule. 

Click "Add option" and select "CORS header support" from the list.

image_1689.png

Rule options:

  • If you add an option and switch it on, the Access-Control-Allow-Origin header will be added.

image_1691.png

  • If you add an option but do not switch it on, the Access-Control-Allow-Origin header will not be added.

image_1690.png

Configure the header on an origin

Below are examples of configurations for the CORS header settings on an origin. 

The Access-Control-Allow-Origin header with the "*" value 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 CORS header

1. Clear the cache of the CDN resource or files for which the header was added. Read more about cache purge. 

2. Use one of the methods below.

Use the cURL command

Open the terminal on macOS or command prompt (cmd) on Windows.

1. Type: 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 the following output. Check whether the "Access-Control-Allow-Origin" header is present: 

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 you see the CORS header in the response, configuration succeeded.  

Use developer tool in a browser

1. Open any Internet browser (for example, Google Chrome).  

2. Go to your website.  

3. Press the F12 key, it opens the developer toolbar.  

4. Select the "Network" tab.  

5. Press F5 to refresh the page.  

6. You will get a list of all files retrieved from your website.   

7. Find a file (for example: JPEG, PNG, IMG) integrated with the CDN and select it. To facilitate the search, use the filter in the left corner of the toolbar.  

8. On the "Headers" tab on the right, you will see the headers configured on your server.  

mceclip0.png3. If you see the CORS header in the response, configuration succeeded.

 

Was this article helpful?
Recently viewed articles
    Related articles