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.
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.comIn 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 the 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.
Open the resource settings.
Select the HTTP Headers section and find the CORS Header Support option.
Enable the option.
There are three variants on how to configure this option:
1. *, for all domains: the content can be accessed from any domain.
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/xml2. "$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.
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:
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/xmlIf 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.
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/xmlThis 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.
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.
Rule options:
- If you add an option and enable it, the Access-Control-Allow-Origin header will be added.
- If you add an option but do not enable it, the Access-Control-Allow-Origin header will not be added.
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 a 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.
8. If there is the required header, the Access-Control-Allow-Origin header is configured.