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.
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 Origin
header 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.com
user.
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.
The option has three use cases:
1. *, for all domains: content can be accessed from any domain.
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.
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:
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.
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".
In the rule settings, specify the files you want to apply the rule.
Click "Add option" and select "CORS header support" from the list.
Rule options:
- If you add an option and switch it on, the Access-Control-Allow-Origin header will be added.
- If you add an option but do not switch it on, the Access-Control-Allow-Origin header will not be added.
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.
3. If you see the CORS header in the response, configuration succeeded.