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

Статьи в этом разделе

Больше

HTTP-заголовок Access-Control-Allow-Origin

 

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

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

Настройка заголовка Access-Control-Allow-Origin в личном кабинете 

Настройка заголовка Access-Control-Allow-Origin на источнике 

Проверка загловка CORS 

 

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

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

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

  • для защиты контента от загрузки на сторонних сайтах.
  • для предотвращения появления ошибки «XMLHttpRequest cannot load http://domain.ru. No’Access-Control-Allow-Origin’ header is present on the requested resource», которая возникает при загрузке веб-шрифтов из кеша CDN-серверов в браузерах по умолчанию (напрмер, Firefox, Internet Explorer).__________.pngИсточник: https://answers.microsoft.com/ru-ru/ie/forum/all/%D0%BD%D0%B5%D0%BA%D0%BE%D1%80%D1%80%D0%B5%D0%BA/606122df-a7c4-416d-be37-d40b727ed596   

Как работает 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 и браузер не отобразит изображение для пользователя. 

 

Настройка заголовка «Access-Control-Allow-Origin» в личном кабинете

Раскройте «Дополнительные настройки» в настройках ресурса. Добавьте опцию «HTTP-заголовок Access-Control-Allow-Origin» из раздела «Безопасность».

add_option_rus.png

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

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

____________________.png

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

http_origin_if_domains_are_set_rus.pngПри получении запроса CDN сверит значение заголовка запроса Originс доменами, которые указаны для опции «HTTP-заголовок Access-Control-Allow-Origin».

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

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

Например, в настройках опции указан домен cdn-domain.com:

______________2__________.png

В таком случае, если запрос на ваш контент был отправлен с 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

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

3. "$http_origin", для всех доменов: отображение контента разрешено для всех доменов, в заголовке ответа передается домен, с которого пришел запрос.

_________________2____.png

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

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

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

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

 

Правила  

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

Перейдите в «Дополнительные настройки» -> раздел «Безопасность» -> опция «HTTP-заголовок Access-Control-Allow-Origin».  

Если опция не добавлена в список, CDN использует настройки ресурса для опции «HTTP-заголовок Access-Control-Allow-Origin». 

Если опция добавлена в список, но не активирована, заголовок «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 в  терминале (terminal для MacOS; cmd для  WindowsOS) 

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

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

 

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

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

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

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

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

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

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

7. Найдите необходимый файл  (напрмер: jpeg, png, img), интегрированный с CDN и нажмите на него. 

! Для более удобного поиска можете воспользоваться фильтром в левом углу панели. 

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

____________________cors.png

9. Проанализируйте их, если в ответе вы увидели заголовок «Access-Control-Allow-Origin», заголовок CORS настроен. 

Похожие статьи