Remkomplekty.ru

IT Новости из мира ПК
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Access control allow origin apache

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

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

Header set Access-Control-Allow-Origin «*»

При запросе файлов с расширением 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


Обширную информацию по теме можно найти на официальном сайте 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

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

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

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

How to Enable CORS in Apache and Nginx?

Restrict or allow resource sharing between sites using CORS header.

CORS (Cross-Origin Resource Sharing) header is supported on all modern browsers.

Can I Use cors? Data on support for the cors feature across the major browsers from caniuse.com.

By default, the browser restricts cross-origin HTTP requests through scripts. And, CORS can be handy to reuse the common application resources on other web applications. Once it is added correctly, it instructs the browser to load the application from a different origin.

There are six popular types of CORS headers a server can send. Let’s explore them.

Access-Control-Allow-Origin

The most popular one that it tells the browser to load the resources on the allowed origin. It supports wildcard (*) and doing so any domain can load the resources. However, it does have an option to allow a specific origin.

Apache

Add the following in httpd.conf or any other in-use configuration file.

Restart the Apache to test. You should see them in response headers.

And, to allow from a specific origin (ex: https://gf.dev), you can use the following.

Nginx

Here is an example to allow origin https://geekflare.dev. Add the following in the server block of nginx.conf or in-use configuration file.

Access-Control-Allow-Methods

The browser can initiate one or more HTTP methods to access the resources. Ex: – GET, PUT, OPTIONS, PUT, DELETE, POST

Apache

To allow only GET and POST only.

Nginx

Let’s say you need to add DELETE and OPTIONS methods, then you can add as below.

After the restart, you should see them in the response headers.

Access-Control-Allow-Headers

The following headers are in safelist means you don’t need to add one. It should work by default.

  • Content-Type
  • Accept
  • Content-Language
  • Accept-Language

However, if you need to add custom one, you can do it. It supports one or more headers.

Apache

Let’s say you want to allow X-Custom-Header and X-Powered-By headers.

After a restart, you should see the result in response headers.

Nginx

An example of adding X-Customer-Software and X-My-Custom header.

Access-Control-Expose-Headers

The following headers are already safe list. Means, you don’t need to add if you want to expose them.

  • Expires
  • Pragma
  • Cache-Control
  • Last-Modified
  • Content-Language
  • Content-Type

But, if you need other than the safe list, then you can allow them as following.

Apache

Use a wildcard to expose all headers.

Note: a wildcard still doesn’t expose Authorization header, and if you need one, you need to mention explicitly.

The result should look like this.

Nginx

If you want to expose Origin header.

Access-Control-Max-Age

Do you know the data from Access-Control-Allow-Headers and Access-Control-Allow-Methods headers can be cached? It can be cached for up to 24 hours in Firefox, 2 hours in Chrome (76+).

To disable the caching, you can keep the value as -1

Apache

To cache for 15 minutes.

As you can see, the value is in seconds.

Читать еще:  Что такое поле в access

Nginx

To cache for one hour.

Once added, restart Nginx to see the results.

Access-Control-Allow-Credentials

There is only one option to set here – true. This is to allow if you want to expose credentials such as cookies, TLS certificates, authorization.

Apache

Nginx

Verifying the results

Once the necessary headers are added, you can either use browser in-built developer tools or an online HTTP header checker.

Conclusion

I hope the above helps you to implement the CORS header in Apache HTTP and the Nginx web server for better security. You may also be interested in applying OWASP recommended secure headers.

Getting CORS to work with Apache

Ok, if you’re reading this, I’m assuming you know what CORS means, so I won’t tell you that it stands for Cross Origin Resource Sharing. Or maybe I just told you.

Anyway, you want to enable it on your Apache server. Maybe, like me, you’re building an API-based web app. So you need some JavaScript to pull data from a remote server. (Or even, like in my case, a different subdomain on the same physical server.) It’s easy in Node.js, so it shouldn’t be hard in Apache.

So you google “apache enable cors”. The first result is from enable-cors.org. Wow, how relevant! Sounds so legit! And it says all you have to do is throw this somewhere:

So you put it in your httpd.conf file or .htaccess and boom done.

Except then you try it. And Firebug is all like: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://buckle.up.because.thisll.suck.org. This can be fixed by moving the resource to the same domain or enabling CORS.

And Chrome says: XMLHttpRequest cannot load https://howdare.youthink.thiswouldbe.easy. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://pain.and.suffering.org’ is therefore not allowed access.

But… you did it right. You did just what it said you should do. You even googled it a few more times and everyone says the same thing—Just that one line of code and you’re supposed to be done! You’re supposed to be kicking back with some nachos now! Chrome even says that the header is there, for crying out loud!

Yeah, no.


Turns out there’s a friggin metric crapton more to it than that. I won’t go into all the details here, but there’s a lot. What I will do is give you a list of quick and dirty things to try.

Enable mod_headers

There’s a module that allows Apache to add things to the request/response headers. You’ll need that. Near the top-ish of your httpd.conf file, look for…

(Mine was on line 115 in my Apache 2.4 setup.)

If yours has that hash/number/octothorpe/# sign at the beginning, remove it. As with any change to httpd.conf, you’ll need to restart Apache for this to take effect.

“Always”

First, just putting that line in my .htaccess wasn’t working. I could see the header in Chrome (image above) but it was apparently being ignored for who-the-crap-knows-why. Adding “always” before “set” seemed to correct this. I also moved it from my .htaccess to httpd.conf, just above my virtual hosts section.

You’ll also see different versions of this out there in the wild, some where it says to use header set, and others where it says header add. Both will work, but set is safer in this case because add can add multiple headers, which according to the CORS documentation is not allowed.

Depending on your situation, that might do it for you. But probably not. So…

Other headers

Try adding these three:

The 2nd one determines what headers your requesting server (the one trying to make the remote call) is allowed to send. You likely don’t need all of those, but I left in a bunch for the sake of example.

The 3rd one is super important. It determines what kind of RESTful calls your app is allowed to make. Again, you probably don’t need all of them. In fact, if you’re only doing GET requests, that’s the only one you need. But if you want to POST, then you need OPTIONS, too. More on that below.

GET works, but POST doesn’t: welcome to “preflights”

I won’t go into details here, but I will say that POSTs are different than GETs beyond the obvious ways. One way being that with POST, browsers do what’s called a “preflight” check. Basically, it sends a request before your actual POST, checking to see if it’s allowed to do what it’s trying to.

This was very confusing at first, because my GET calls were working fine, but when I tried to do a POST call, Chrome: 1. showed it as an OPTIONS request; and 2. returned 404 (or 400 or 403 or 500). The heck?

What’s happening is likely that your server is trying to respond to that OPTIONS preflight as a normal page fetch. It’s literally trying to serve up a page. In my case, the URL in question was a PHP script that was expected POST data and wasn’t getting it, so it barfed up a 403 error.

Читать еще:  Use access list acl

Making PHP return 200 OK for preflights

I had to make a script called blank.php, which contained nothing but some ranty comments. Then, over in .htaccess, I added this:

What’s happening here is, whenever an OPTIONS request comes in (line 2), it redirects any-and-all of them to blank.php (line 3). Blank.php is, well, blank, so it returns an HTTP status of 200 OK. The browser then takes this as a successful attempt to discover what its OPTIONS are, learns from the other headers (Allow-Origin, Allow-Headers, Allow-Methods) that it’s allowed to do a POST, and then finally sends the real, actual, honest POST that you’ve been trying to get it to do this entire freakin’ time.

Hope that helped

Depending on your environment/needs, that might not be the end for you. If so, you have my sympathy. Either way, I hope this at least gets you a few steps closer.

Vesta Control Panel — Forum

Apache2 CORS (Access-Control-Allow-Origin) для woff/ttf/woff2 шрифтов (enable mod_headers) из под httpS

Apache2 CORS (Access-Control-Allow-Origin) для woff/ttf/woff2 шрифтов (enable mod_headers) из под httpS

Post by LAlf » Thu Apr 27, 2017 9:20 am

Установлена Vesta CP v.0.9.8-17 c Apache2 (без nginx).

Столкнулся с проблемой, что woff/woff2/ttf шрифты не загружаются в Chrome (скорее всего будет также и в других браузерах) из httpS (причем с сертификатом от CloudFlare).

В chrome developer tools будет что-то вроде:

Т.е. хром постоянно выдает canceled на такие запросы из-за:

По сути получается, что почему-то CORS запросы работают не так как нужно (если что — на соседнем сайте на http — всё ок).

Т.е. почему-то по дефолту в Apache2 не включен модуль mod_headers.c (почему?).

Проверяю список включенных модулей:

/web/DOMAIN/public_html/public$ a2enmod
Your choices are: access_compat actions alias allowmethods asis auth_basic auth_digest auth_form authn_anon authn_core authn_dbd authn_dbm authn_file authn_socache authnz_fcgi authnz_ldap authz_core authz_dbd authz_dbm authz_groupfile authz_host authz_owner authz_user autoindex buffer cache cache_disk cache_socache cgi cgid charset_lite data dav dav_fs dav_lock dbd deflate dialup dir dump_io echo env expires ext_filter fcgid file_cache filter headers heartbeat heartmonitor ident include info lbmethod_bybusyness lbmethod_byrequests lbmethod_bytraffic lbmethod_heartbeat ldap log_debug log_forensic lua macro mime mime_magic mpm_event mpm_prefork mpm_worker negotiation php7.0 proxy proxy_ajp proxy_balancer proxy_connect proxy_express proxy_fcgi proxy_fdpass proxy_ftp proxy_html proxy_http proxy_scgi proxy_wstunnel ratelimit reflector remoteip reqtimeout request rewrite rpaf ruid2 sed session session_cookie session_crypto session_dbd setenvif slotmem_plain slotmem_shm socache_dbm socache_memcache socache_shmcb speling ssl status substitute suexec unique_id userdir usertrack vhost_alias xml2enc
Which module(s) do you want to enable (wildcards ok)?

После чего делаю ребут апача, проверяю заново список модулей и. Модуль там не появился! Судя по всему, я не правильно интерпретировал вывод apache2 -l.

Но! 500 ошибка перестала валится, значит он работает. Но шрифты всё так же не загружаются. Я не правильный заголовок ставлю?

В связи со всем этим квестом у меня вопрос: что я делаю не так и как (возможно) лучше мне включить CORS для https запросов для woff/woff2/ttf шрифтов? Лучше какое-то универсальное решение через .htaccess, чтобы и на http горя не хапнуть, и на httpS всё заработало.

PS: кеш в cloudflare сбрасывал, не помогло. Думал ответ сервера закешировался там.

Что такое CORS

Многие из нас встречались с подобной ошибкой:

Access to XMLHttpRequest at ‘XXXX’ from origin ‘YYYY’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource..

Эта статья рассказывает что означает эта ошибка и как от нее избавиться.

Создадим тестовый сайт на Node.js с открытым API и запустим его по адресу http://127.0.0.1:3000.

Пусть там будет примерно такая функция получения GET запроса:

Пусть там будет простая функция входа в систему, где пользователи вводят общее секретное слово secret и им затем ему устанавливается cookie, идентифицируя их как аутентифицированных:

И пусть у нас будет некое приватное API для каких нибудь личных данных в /private, только для аутентифицированных пользователей.

Запрос нашего API через AJAX из других доменов

И допустим у нас есть какое-нибудь клиентское приложение работающее с нашим API. Но учтем что, наше API находится по адресу http://127.0.0.1:3000/public, а наш клиент размещен на http://127.0.0.1:8000, и на клиенте есть следующий код:

И это не будет работать!

Если мы посмотрим на вкладку network в консоле Хрома при обращение c http://127.0.0.1:8000 к http://127.0.0.1:3000 то там не будет ошибок:

Сам по себе запрос был успешным, но результат оказался не доступен. Описание причины можно найти в консоли JavaScript:

Ага! Нам не хватает заголовка Access-Control-Allow-Origin. Но зачем он нам и для чего он вообще нужен?

Same-Origin Policy

Причиной, по которой мы не получим ответ в JavaScript, является Same-Origin Policy. Эта ограничительная мера была придумана разработчиками браузеров что бы веб-сайт не мог получить ответ на сгенерированный AJAX запрос к другому веб-сайту находящемуся по другому адресу .

Например: если вы заходите на sample.org, вы бы не хотели, чтобы этот веб-сайт отправлял запрос к примеру на ваш банковский веб-сайт и получал баланс вашего счета и транзакции.

Same-Origin Policy предотвращает именно это.

«источник (origin)» в этом случае состоит из

  • протокол (например http )
  • хост (например example.com )
  • порт (например 8000 )
Читать еще:  Ultraiso access violation at address

Так что http://sample.org и http://www.sample.org и http://sample.org:3000 – это три разных источника.

Пару слов о CSRF

Обратите внимание, что существует класс атак, называемый подделкой межсайтовых запросов (Cross Site Request Forgerycsrf ), от которых не защищает Same-Origin Policy.

При CSRF-атаке злоумышленник отправляет запрос сторонней странице в фоновом режиме, например, отправляя POST запрос на веб-сайт вашего банка. Если у вас в этот момент есть действительный сеанс с вашим банком, любой веб-сайт может сгенерировать запрос в фоновом режиме, который будет выполнен, если ваш банк не использует контрмеры против CSRF.

Так же обратите внимание, что, несмотря на то, что действует Same-Origin Policy, наш пример запроса с сайта secondparty.com на сайте 127.0.0.1:3000 будет успешно выполнен – мы просто не соможем получить доступ к результатам. Но для CSRF нам не нужен результат …

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

Включение CORS для нашего публичного API

Допустим нам нужно разрешить работу JavaScript на сторонних сайтах (например, 127.0.0.1:8000) что бы получать доступ к нашим ответам API. Для этого нам нужно включить CORS в заголовок ответа от сервера. Это делается на стороне сервера:

Здесь мы устанавливаем заголовку Access-Control-Allow-Origin значение *, что означает: что любому хосту разрешен доступ к этому URL и ответу в браузере:

Непростые запросы и предварительные запросы (preflights)

Предыдущий пример был так называемым простым запросом. Простые запросы – это:

  • Запросы: GET,POST
  • Тип содержимого следующего:
    • text/plain
    • application/x-www-form-urlencoded
    • multipart/form-data

Допустим теперь 127.0.0.1:8000 немного меняет реализацию, и теперь он обрабатывает запросы в формате JSON:

Но это снова все ломает!
На этот раз консоль показывает другую ошибку:

Любой заголовок, который не разрешен для простых запросов, требует предварительного запроса (preflight request).

Этот механизм позволяет веб-серверам решать, хотят ли они разрешить фактический запрос. Браузер устанавливает заголовки Access-Control-Request-Headers и Access-Control-Request-Method, чтобы сообщить серверу, какой запрос ожидать, и сервер должен ответить соответствующими заголовками.

Но наш сервер еще не отвечает с этими заголовками, поэтому нам нужно добавить их:

Теперь мы снова может получить доступ к ответу.

Credentials и CORS

Теперь давайте предположим, что нам нужно залогинится на 127.0.0.1:3000 что бы получить доступ к /private с конфиденциальной информацией.

При всех наших настройках CORS может ли другой сайт так же получить эту конфиденциальную информацию?

Мы пропустили код реализации входа в на сервер так как он не обязателен для объяснения материала.

Независимо от того, попытаемся ли мы залогинится на 127.0.0.1:3000 или нет, мы увидим «Please login first».

Причина в том, что cookie от 127.0.0.1:3000 не будут отправляться, когда запрос поступает из другого источника. Мы можем попросить браузер отправить файлы cookie клиенту, даже если запрос с других доменов:

Но опять это не будет работать в браузере. И это хорошая новость, на самом деле.

Итак, мы не хотим, чтобы злоумышленник имел доступ к приватным данным, но что, если мы хотим, чтобы 127.0.0.1:8000 имел доступ к /private?
В этом случае нам нужно установить для заголовка Access-Control-Allow-Credentials значение true:

Но это все равно пока еще не сработает. Это опасная практика – разрешать любые аутентифицированные запросы с других источников.

Браузер не позволит нам так легко совершить ошибку.

Если мы хотим разрешить 127.0.0.1:8000 доступ к /private, нам нужно указать точный источник в заголовке:

Теперь http://127.0.0.1:8000 также имеет доступ к приватным данным, в то время как запрос с любого другого сайта будет заблокирован.

Разрешить множественные источники (origin)

Теперь мы разрешили одному источнику делать запросы к другому источнику с данными аутентификации. Но что, если у нас есть несколько других источников?

В этом случае мы, вероятно, хотим использовать белый список:

Опять же: не отправляйте напрямую req.headers.origin в качестве разрешенного заголовка CORS. Это позволит любому веб-сайту получить доступ к приватным данным.
Из этого правила могут быть исключения, но, по крайней мере, дважды подумайте, прежде чем внедрять CORS с учетными данными без белого списка.

Заключение

В этой статье мы рассмотрели Same-Origin Policy и то, как мы можем использовать CORS, чтобы разрешать запросы между источниками, когда это необходимо.

Это требует настройки на стороне сервера и на стороне клиента и в зависимости от запроса вызовет предварительный (preflight) запрос.

При работе с аутентифицированными запросами перекрестного происхождения следует проявлять дополнительную осторожность. Белый список может помочь разрешить нескольким источникам без риска утечки конфиденциальных данных (которые защищены аутентификацией).

Выводы

  • Браузер использует Same-origin policy, чтобы не обрабатывать AJAX ответы от веб-сайтов расположенных на адресах отличных от адреса с которого была загружена веб страница.
  • Same-origin policy не запрещает генерировать запросы к другим сайтам, но запрещает обрабатывать от них ответ.
  • CORS (Cross-Origin Resource Sharing) механизм, который использует дополнительные заголовки HTTP, чтобы дать браузерам указание предоставить веб-приложению, работающему в одном источнике, доступ к ответу на запрос к ресурсам из другого источника.
  • CORS вместе с credentials (с данными аутентификации) требует осторожности.
  • CORS это браузерная политика. Другие приложения не затрагиваются этим понятием.
Ссылка на основную публикацию
Adblock
detector