Поддержка заголовка CORS. Включить и настроить

Что такое заголовок CORS и для чего он используется

Заголовок ответа Access-Control-Allow-Origin применяется в механизме Cross-Origin Resource Sharing (CORS), чтобы дать возможность браузеру пользователя получать разрешения на доступ к ресурсам домена, отличном от того, с которого поступает запрос.

Опция Поддержка заголовка CORS передаёт в ответе браузеру заголовок Access-Control-Allow-Origin и может использоваться:

• Для защиты контента от загрузки на сторонних сайтах.

• Для предотвращения появления ошибки «XMLHttpRequest cannot load http://domain.ru. No ’Access-Control-Allow-Origin’ header is present on the requested resource», которая возникает при загрузке веб-шрифтов из кеша CDN-серверов в браузерах по умолчанию (например, Firefox, InternetExplorer).

Как работает CORS

Например, пользователь, находящийся на сайте http://domain1.com, открывает изображение, которое расположено на вашем сайте по адресу http://cdn-domain.com/image.jpg.

В таком случае браузер пользователя отправляет на сервер домена 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 

В запросе важным является заголовок Origin. Он сообщает серверу, что запрос отправлен с домена http://domain1.com.

Сервер домена http://cdn-domain.com/image.jpg учитывает заголовок Origin запроса и принимает запрос или отказывает в его обработке.

Если сервер принял запрос, в ответе браузеру будет отправлен заголовок Access-Control-Allow-Origin, который позволит браузеру отобразить изображение для пользователя сайта http://domain1.com.

Важно. Параметры заголовка (в примере ниже: «*») зависят от заданных настроек на сервере. Подробнее об этом и о том, от чего зависит, принял ли сервер запрос или отказал в обработке читайте ниже в инструкции по настройке.

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] 

Если сервер отказал в обработке запроса, ответ браузеру будет отправлен без заголовка Access-Control-Allow-Origin, и браузер не отобразит изображение для пользователя.

Настроить заголовок через опцию

Откройте настройки ресурса. В списке опций выберите раздел HTTP-заголовки и найдите опцию Поддержка заголовка CORS.

Включите опцию.

Вы можете поставить галочку напротив пункта «Всегда добавлять заголовки в ответ от CDN независимо от кода ответа». Тогда заголовок CORS будет добавляться при любых кодах ответа. Если не ставить галочку — заголовок будет добавляться только для ответов с кодами 200, 201, 204, 206, 301, 302, 303, 304, 307 или 308.

В этой опции доступно три варианта настройки заголовка:

1. *, для всех доменов: отображение контента разрешено всем доменам.

В таком случае CDN в ответе браузеру передаст заголовок Access-Control-Allow-Origin с параметром «*», и контент будет доступен для просмотра:

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", если источник указан ниже: отображение контента разрешено для тех доменов, которые указаны в поле настройки опции. В заголовке ответа передаётся домен, с которого пришёл запрос. Если необходимо добавить wildcard, укажите также и сам домен, например, *.domain.com и domain.com.

При получении запроса CDN сверит значение заголовка запроса Origin с доменами, которые указаны для опции Поддержка заголовка CORS.

Если значение заголовка Origin в запросе к серверу соответствует одному из указанных доменов, CDN добавит к ответу заголовок Access-Control-Allow-Origin с доменом, с которого пришёл запрос, и контент будет доступен для пользователя.

Если значение заголовка Origin в запросе к серверу не соответствует одному из указанных в личном кабинете доменов, заголовок Access-Control-Allow-Origin добавлен не будет, и контент не отобразится.

Например, в настройках опции указан домен domain.com. В таком случае, если запрос на ваш контент был отправлен с 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://domain.com 
Keep-Alive: timeout=2, max=100 
Connection: Keep-Alive 
Transfer-Encoding: chunked 
Content-Type: application/xml 

Если запрос на ваш контент был отправлен не с домена domain.com, заголовок Access-Control-Allow-Origin в ответ браузеру добавлен не будет, и контент отображён не будет.

3. "$http_origin", для всех доменов: отображение контента разрешено для всех доменов, а в заголовке ответа передаётся домен, с которого пришёл запрос. Если необходимо добавить wildcard, укажите также и сам домен, например, *.domain.com и domain.com.

Этот вариант опции аналогичен первому варианту, т.к. контент доступен всем доменам, но отличается тем, что в параметре заголовка Access-Control-Allow-Origin будет передаваться домен, с которого был отправлен запрос.

Так, например, если запрос на ваш контент был отправлен с домена domain.com, он будет передан браузеру в заголовке ответа Access-Control-Allow-Origin, и контент будет отображен:

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

Такой вариант использования может быть необходим, например, если для настройки определённых фильтраций на сервере не подходит параметр «*».

Настройки опции будут применены ко всем файлам, передающимся через CDN.

Настроить заголовок через правило

Настройте заголовок только для определённых файлов, используя Правила.

Перейдите в раздел Правила в настройках ресурса, нажмите Создать правило, затем Создать пустое правило.

В настройках правила укажите, к каким файлам необходимо его применять. Нажмите Добавить опцию и выберите опцию Поддержка заголовка CORS из списка.

Варианты работы правила:

• Если опция добавлена и активирована, заголовок Access-Control-Allow-Origin добавляется к файлам, указанным в правиле.

• Если опция добавлена, но не активирована, заголовок Access-Control-Allow-Origin не добавляется к файлам, указанным в правиле.

Настроить заголовок на источнике

Ниже представлены примеры конфигураций для настройки заголовка CORS на источнике.

HTTP-заголовок Access-Control-Allow-Origin со значением «*» позволяет отображать контент с любого домена.

Конфигурация Apache

# ----------------------------------------------------------------------
# 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>

Конфигурация Nginx

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

Проверить заголовок CORS

1. Очистите кеш CDN-ресурса или файлов, для которых добавили заголовок. Читать подробнее об очистке кеша.

2. Воспользуйтесь одним из способов проверки ниже.

Проверить с помощью команды cURL

Для MacOS действия можно выполнить в терминале (terminal), для Windows — в командной строке (cmd).

1. Пропишите: curl -I http://cdn.example.ru/js/intlTelInput/css/intlTelInput.css

Где http://cdn.example.ru/js/intlTelInput/css/intlTelInput.css — ссылка на файл, интегрированный с CDN.

2. Вы получите следующий вывод. Обратите внимание, присутствует ли заголовок Access-Control-Allow-Origin:

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-Node: m9-up-e245

Если в ответе вы увидели нужный заголовок, заголовок CORS настроен.

Проверить с помощью инструментов разработчика в браузере

1. Откройте любой интернет-браузер (например, Google Chrome).

2. Откройте ваш сайт.

3. Нажмите кнопку F12 (откроется панель разработчика).

4. Выберите вкладку Сеть (Network).

5. Обновите страницу (клавиша F5).

6. Вы получите список всех файлов, которые были загружены с вашего сайта.

7. Найдите необходимый файл (например: JPEG, PNG, IMG), интегрированный с CDN, и нажмите на него. Для более удобного поиска можете воспользоваться фильтром в левом углу панели.

8. На вкладке Headers справа вы увидите заголовки, которые настроены на вашем сервере.

Если в ответе вы увидели нужный заголовок, заголовок CORS настроен.