Access-Control-Allow-Origin в .htaccess


Заголовок Access-Control-Allow-Origin необходим для того чтобы сервер разрешал выполнение кроссдоменных запросов — запросов при которых один ресурс обращается к другому и обрабатывает его ответ прежде чем выдать информацию пользователю.

Кроссдоменные запросы предполагают возможность подгружать какие-то элементы с других серверов при указании полного к ним пути. Интернет браузеры по умолчанию блокируют кроссдоменные запросы, сформированные скриптами, из соображений безопасности.



Сделано это для того чтобы предотвратить, например, возможность обращения к сайту какой-либо платежной системы или почтовому ящику, в котором авторизован пользователь, и установки JS Cookie при загрузке страницы новостного портала, что впоследствии позволило бы получить доступ к конфиденциальной информации пользователя.



Чтобы кросдоменные запросы работали корректно сервер должен посылать ответ на запрос клиента добавляя к нему служебный заголовок Access-Control-Allow-Origin. На практике, чаще всего данный заголовок требуется когда необходимо подгружать шрифты, которые будут использоваться на сайте с другого интернет ресурса.



Кросдоменные запросы на примере шрифтов и заголовок Access-Control-Allow-Origin с заданием в .htaccess


В файл .htaccess в каталоге, в котором находятся файлы шрифтов добавим следующие директивы (при отсутствии .htaccess его нужно создать):

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>



При запросе файлов с расширением ttf, otf, eot или woff веб-сервер Apache (чаще всего используется он и передавать информацию путем указания директив .htaccess можно только ему) будет добавлять необходимый заголовок.

Header set Access-Control-Allow-Origin "*"



Заголовок предполагает, что шрифты может получать любой из сайтов в Интернете, можно ограничить доступ непосредственно указав имя ресурса. Несколько адресов при этом указать нельзя.

Access-Control-Allow-Origin: http://www.mysite.com


На стороне, на которой планируем использовать шрифты в файле CSS пропишем полные к ним пути

Это может выглядеть так:

@font-face {
 font-family: 'AudiNormal';
 src: url('http://www.mysite.com/css/fonts/League_Gothic.eot?') format('eot'),
 url('http://www.mysite.com/css/fonts/League_Gothic.woff') format('woff'),
 url('http://www.mysite.com/css/fonts/League_Gothic.ttf') format('truetype'),
 url('http://www.mysite.com/css/fonts/League_Gothic.svg')

}



Или так (для каждого шрифта задаются определенные опции):

@font-face {
 font-family: "AudiNormal";
 font-style: normal;
 font-weight: normal;
 src: url('http://www.mysite.com/style/auditype-normal.ttf');
 }
 @font-face {
 font-family: "AudiBold";
 font-style: normal;
 font-weight: normal;
 src: url('http://www.mysite.com/style/auditype-bold.ttf');
 }
 @font-face {
 font-family: "AudiExtNormal";
 font-style: normal;
 font-weight: normal;
 src: url('http://www.mysite.com/style/auditype-extendednormal.ttf');
 }
 @font-face {
 font-family: "AudiExtBold";
 font-style: normal;
 font-weight: normal;
 src: url('http://www.mysite.com/style/auditype-extendedbold.ttf');
 }



Схема с официального сайта Mozilla, объясняющая принципы работы CORS


Access-Control-Allow-Origin


Обширную информацию по теме можно найти на официальном сайте Mozilla и на сайтах других популярных браузеров.



Заголовок cors access control allow origin


CORS — Cross-Origin Resource Sharing



curl -I http://www.mysite.com/style/auditype-extendednormal.ttf


HTTP/1.1 200 OK
Server: nginx
Date: Thu, 27 Jul 2017 08:54:38 GMT
Content-Length: 326620
Connection: keep-alive
X-Accel-Version: 0.01
Last-Modified: Wed, 26 Jul 2017 12:46:15 GMT
ETag: "21c6399-4fbdc-55537d562407a"
Accept-Ranges: bytes
Access-Control-Allow-Origin: *



Заголовок, как видно, добавился, но используя curl -I запрос отправляется методом HEAD. Чтобы работали кросдоменные запросы тот же заголовок должен отдаваться в ответ на запрос методом GET



Обратимся к тому же шрифты используя curl, но отправим запрос в этот раз методом GET


curl -i -H "Accept: application/json" "Content-Type: application/json" -X GET http://mysite.com/style/auditype-extendednormal.ttf | head



Чтобы заголовок отдавался корректно необходимо чтобы был активирован mod_headers в Apache



Он активируется командой

a2enmod headers



После активации модуля веб-сервер необходимо перезагрузить

systemctl restart apache2



Access control allow origin может задаваться в конфигурации Apache. Но обычно это делается через файл .htaccess способом приведенным в первой части данного материала

.htaccess также используется для задания редиректов.

Сказать спасибо
Categories: