Letysite.ru

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

Access control allow credentials

XMLHttpRequest: кросс-доменные запросы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/fetch-crossorigin.

Обычно запрос XMLHttpRequest может делать запрос только в рамках текущего сайта. При попытке использовать другой домен/порт/протокол – браузер выдаёт ошибку.

Существует современный стандарт XMLHttpRequest, он ещё в состоянии черновика, но предусматривает кросс-доменные запросы и многое другое.

Большинство возможностей этого стандарта уже поддерживаются всеми браузерами, но увы, не в IE9-.

Впрочем, частично кросс-доменные запросы поддерживаются, начиная с IE8, только вместо XMLHttpRequest нужно использовать объект XDomainRequest.

Кросс-доменные запросы

Разберём кросс-доменные запросы на примере кода:

  1. Мы создаём XMLHttpRequest и проверяем, поддерживает ли он событие onload . Если нет, то это старый XMLHttpRequest , значит это IE8,9, и используем XDomainRequest .
  2. Запрос на другой домен отсылается просто указанием соответствующего URL в open . Он обязательно должен быть асинхронным, в остальном – никаких особенностей.

Контроль безопасности

Кросс-доменные запросы проходят специальный контроль безопасности, цель которого – не дать злым хакерам™ завоевать интернет.

Серьёзно. Разработчики стандарта предусмотрели все заслоны, чтобы «злой хакер» не смог, воспользовавшись новым стандартом, сделать что-то принципиально отличное от того, что и так мог раньше и, таким образом, «сломать» какой-нибудь сервер, работающий по-старому стандарту и не ожидающий ничего принципиально нового.

Давайте, на минуточку, вообразим, что появился стандарт, который даёт, без ограничений, возможность делать любой странице HTTP-запросы куда угодно, какие угодно.

Как сможет этим воспользоваться злой хакер?

Он сделает свой сайт, например http://evilhacker.com и заманит туда посетителя (а может посетитель попадёт на «злонамеренную» страницу и по ошибке – не так важно).

Когда посетитель зайдёт на http://evilhacker.com , он автоматически запустит JS-скрипт на странице. Этот скрипт сделает HTTP-запрос на почтовый сервер, к примеру, http://gmail.com . А ведь обычно HTTP-запросы идут с куками посетителя и другими авторизующими заголовками.

Поэтому хакер сможет написать на http://evilhacker.com код, который, сделав GET-запрос на http://gmail.com , получит информацию из почтового ящика посетителя. Проанализирует её, сделает ещё пачку POST-запросов для отправки писем от имени посетителя. Затем настанет очередь онлайн-банка и так далее.

Спецификация CORS налагает специальные ограничения на запросы, которые призваны не допустить подобного апокалипсиса.

Запросы в ней делятся на два вида.

Простыми считаются запросы, если они удовлетворяют следующим двум условиям:

  1. Простой метод: GET, POST или HEAD
  2. Простые заголовки – только из списка:
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type со значением application/x-www-form-urlencoded , multipart/form-data или text/plain .

«Непростыми» считаются все остальные, например, запрос с методом PUT или с заголовком Authorization не подходит под ограничения выше.

Принципиальная разница между ними заключается в том, что «простой» запрос можно сформировать и отправить на сервер и без XMLHttpRequest, например при помощи HTML-формы.

То есть, злой хакер на странице http://evilhacker.com и до появления CORS мог отправить произвольный GET-запрос куда угодно. Например, если создать и добавить в документ элемент

Комментарии

  • Если вам кажется, что в статье что-то не так — вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег , для нескольких строк кода — тег

, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)

  • Если что-то непонятно в статье — пишите, что именно и с какого места.
  • Что такое 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 )

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

    Пару слов о CSRF

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

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

    Читать еще:  Расширенный фильтр в access

    Так же обратите внимание, что, несмотря на то, что действует 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 это браузерная политика. Другие приложения не затрагиваются этим понятием.

    Как работает заголовок Access-Control-Allow-Origin?

    видимо, я совершенно неправильно понял его слова. Я подумал о чем-то подобном:—1—>

    1. клиент загружает код javascript MyCode.js от http://siteA —источник.
    2. заголовок ответа MyCode.Яш содержит Access-Control-Allow-Origin: http://siteB, что, как я думал, означало этот Микод.js было разрешено делать перекрестные ссылки на сайт B.
    3. клиент запускает некоторые функции Mycode в.js, которые в свою очередь делают запросы http://siteB, что должно быть хорошо, несмотря на запросы перекрестного происхождения.

    одно точно — я все еще не понимаю, как я должен использовать этот заголовок.

    У меня есть полный контроль сайт A и сайт B. Как включить код javascript, загруженный с сайта A, для доступа к ресурсам на сайте B с помощью этого заголовка?

    Я не хочу использовать JSONP.

    11 ответов

    когда сайт A пытается получить контент с сайта B, сайт B может отправить Access-Control-Allow-Origin заголовок ответа, чтобы сообщить браузеру, что содержимое этой страницы доступна в определенное происхождение. (An происхождения это домен, плюс схема и номер порта.) По умолчанию страницы сайта B имеют значение недоступно для любого другого источника; через Access-Control-Allow-Origin заголовок открывает дверь для доступа cross-origin специфическим запрашивая происхождением.

    Читать еще:  Размер слайда в powerpoint

    для каждого ресурса / страницы, которую сайт B хочет сделать доступной для сайта A, сайт B должен обслуживать свои страницы с заголовком ответа:

    современные браузеры не будут блокировать междоменные запросы напрямую. Если сайт A запрашивает страницу с сайта B, браузер фактически получит запрошенную страницу на сетевом уровне и проверьте, разрешен ли сайт списка заголовков ответов A как разрешенный домен отправителя. Если сайт B не указал, что сайту A разрешен доступ к этой странице, браузер запустит XMLHttpRequest ‘ s error event и запретить данные ответа на запрос кода JavaScript.

    не простые запросы

    что происходит на сетевом уровне может быть немного сложнее, чем описано выше. Если запрос «не простой» запрос, браузер сначала отправляет запрос параметров» preflight » без данных, чтобы убедитесь, что сервер примет запрос. Запрос не является простым, когда либо (или оба):

    • использование HTTP-глагола, отличного от GET или POST (например, PUT, DELETE)
    • используя не простой заголовков запроса; только простые запросы заголовки:
      • Accept
      • Accept-Language
      • Content-Language
      • Content-Type (это просто, только когда его значение application/x-www-form-urlencoded , multipart/form-data , или text/plain )

    если сервер отвечает на параметры preflight с соответствующими заголовками ответов ( Access-Control-Allow-Headers для не простых заголовков, Access-Control-Allow-Methods для не-простых глаголов), которые соответствуют не-простому глаголу и / или не-простым заголовкам, затем браузер отправляет фактический запрос.

    предположим, что сайт A хочет отправить запрос PUT для /somePage С не-простой Content-Type стоимостью application/json , браузер сначала отправит предполетный запрос:

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

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

    браузеры отправляют фактический запрос:

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

    посмотреть понимание XMLHttpRequest над CORS для получения дополнительной информации о не простых запросах.

    Совместное Использование Запросов Cross-Origin — CORS (A. K. A. Междоменный запрос AJAX)-это проблема, с которой может столкнуться большинство веб-разработчиков, в соответствии с политикой того же происхождения, браузеры ограничивают клиентский JavaScript в песочнице безопасности, обычно JS не может напрямую связываться с удаленным сервером из другого домена. В прошлом разработчики создали много сложных способов достижения междоменного запроса ресурсов, чаще всего используя следующие способы:

    1. использование Flash/Silverlight или на стороне сервера как «прокси» общаться с пульта дистанционного управления.
    2. JSON с прокладкой (JSONP).
    3. встраивает удаленный сервер в iframe и взаимодействует через фрагмент или окно.имя, refer здесь.

    эти сложные способы имеют более или менее некоторые проблемы, например, JSONP может привести к дыре в безопасности, если разработчики просто «eval» его, и #3 выше, хотя он работает, оба домена должны строить строгий контракт между собой, это ни гибкий и элегантный IMHO:)

    W3C ввела совместное использование ресурсов (CORS) в качестве стандартного решения для обеспечения безопасного, гибкого и рекомендуемого стандартного способа решения этой проблемы.

    Механизм

    С высокого уровня мы можем просто считать, что CORS-это контракт между клиентским AJAX-вызовом из домена A и страницей, размещенной в домене B, типичным запросом/ответом Кросс-происхождения будет:

    запрос AJAX DomainA заголовки

    заголовки ответов DomainB

    синие части, отмеченные выше, были ядровыми фактами, заголовок запроса» Origin «указывает, откуда исходит запрос кросс-происхождения или запрос предполетной подготовки», заголовок ответа «Access-Control-Allow-Origin» указывает, что эта страница разрешает удаленный запрос от DomainA (если значение * указывает, разрешает удаленные запросы из любого домена).

    как я уже упоминал выше, W3 рекомендуемый браузер для реализации «предварительный запрос » перед отправкой фактически перекрестного HTTP-запроса, в двух словах это HTTP OPTIONS запрос:

    если Foo.aspx поддерживает параметры http-глагола, он может возвращать ответ, как показано ниже:

    только если ответ содержит «Access-Control-Allow-Origin» и его значение » * » или содержит домен, который отправил запрос CORS, удовлетворяя этому условию mandtory браузер будет отправьте фактический Междоменный запрос и кэшируйте результат в «Предварительный Результат-Кэш«.

    Я написал в блоге о CORS три года назад:AJAX перекрестный HTTP-запрос

    Access control allow credentials

    CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.

    Installation

    This is a Node.js module available through the npm registry. Installation is done using the npm install command:

    Usage

    Simple Usage (Enable All CORS Requests)

    Enable CORS for a Single Route

    Configuring CORS

    Configuring CORS w/ Dynamic Origin

    If you do not want to block REST tools or server-to-server requests, add a !origin check in the origin function like so:

    Enabling CORS Pre-Flight

    Certain CORS requests are considered ‘complex’ and require an initial OPTIONS request (called the “pre-flight request”). An example of a ‘complex’ CORS request is one that uses an HTTP verb other than GET/HEAD/POST (such as DELETE) or that uses custom headers. To enable pre-flighting, you must add a new OPTIONS handler for the route you want to support:

    You can also enable pre-flight across-the-board like so:

    Configuring CORS Asynchronously

    Configuration Options

    • origin : Configures the Access-Control-Allow-Origin CORS header. Possible values:
      • Boolean — set origin to true to reflect the request origin, as defined by req.header(‘Origin’) , or set it to false to disable CORS.
      • String — set origin to a specific origin. For example if you set it to «http://example.com» only requests from “http://example.com” will be allowed.
      • RegExp — set origin to a regular expression pattern which will be used to test the request origin. If it’s a match, the request origin will be reflected. For example the pattern /example.com$/ will reflect any request that is coming from an origin ending with “example.com”.
      • Array — set origin to an array of valid origins. Each origin can be a String or a RegExp . For example [«http://example1.com», /.example2.com$/] will accept any request from “http://example1.com” or from a subdomain of “example2.com”.
      • Function — set origin to a function implementing some custom logic. The function takes the request origin as the first parameter and a callback (which expects the signature err [object], allow [bool] ) as the second.
    • methods : Configures the Access-Control-Allow-Methods CORS header. Expects a comma-delimited string (ex: ‘GET,PUT,POST’) or an array (ex: [‘GET’, ‘PUT’, ‘POST’] ).
    • allowedHeaders : Configures the Access-Control-Allow-Headers CORS header. Expects a comma-delimited string (ex: ‘Content-Type,Authorization’) or an array (ex: [‘Content-Type’, ‘Authorization’] ). If not specified, defaults to reflecting the headers specified in the request’s Access-Control-Request-Headers header.
    • exposedHeaders : Configures the Access-Control-Expose-Headers CORS header. Expects a comma-delimited string (ex: ‘Content-Range,X-Content-Range’) or an array (ex: [‘Content-Range’, ‘X-Content-Range’] ). If not specified, no custom headers are exposed.
    • credentials : Configures the Access-Control-Allow-Credentials CORS header. Set to true to pass the header, otherwise it is omitted.
    • maxAge : Configures the Access-Control-Max-Age CORS header. Set to an integer to pass the header, otherwise it is omitted.
    • preflightContinue : Pass the CORS preflight response to the next handler.
    • optionsSuccessStatus : Provides a status code to use for successful OPTIONS requests, since some legacy browsers (IE11, various SmartTVs) choke on 204 .
    Читать еще:  Powerpoint web app

    The default configuration is the equivalent of:

    For details on the effect of each CORS header, read this article on HTML5 Rocks.

    Implementing secure CORS on Tomcat

    Recently, during a WAPT activity for one of our customers, I found a serious vulnerability, due to a CORS misconfiguration, that could lead an attacker to steal private information belonging to other users. By the way, this is a quite common scenario since some of the “default” CORS configurations are insecure.

    Note that CORS is a broad topic and treating it in detail, considering all the abuse cases, is out of the scope of this post. Here I only want to emphasize why the “default” CORS configuration provided by Apache Tomcat is not sufficiently secure and how to secure it.

    What is CORS?

    Just few words about the Cross-Origin Resource Sharing (CORS): it is a mechanism to relax the Same Origin Policy and it allows enabling communication between websites (on different domains) via browsers.

    Applications allow CORS by sending the header:

    This header permits browsers to send cross-domain requests to the application and read the responses received. This is obviously something that the Same Origin Policy normally prevent.

    With only the previous header the request will be issued without the session cookies or other credentials, so it cannot be used to steal private user information (that requires authentication to be accessed) but, the credentials transmission can be allowed adding the following header:

    The Problem

    The tested application was deployed on Apache Tomcat 8 and the customer’s dev team decided to enable CORS by configuring the filter provided by Tomcat. They followed the minimal configuration suggested by the official Tomcat 8 documentation (note that it is the same also for versions 9 and 7).

    Can you spot the problem?

    By default, the attribute “cors.allowed.origins” allows any origin to access the resource (the bad thing here is that Tomcat generates the “Access-Control-Allow-Origin” header based on the user-supplied “Origin” header value). Moreover, the attribute “cors.support.credentials” is set to “true” by default, so it allows the browser to send the session cookie.

    So, this configuration obviously leads to the result desired by the developers, but unfortunately it also allows any domain (including the malicious ones) to access the data.

    How an attacker could exploit it

    Now, let’s assume that our Java web application, served on Tomcat 8, has a “getProfile” handler that returns, to an authenticated user, its own private data (e.g. e-mail address, telephone number and so on).

    What’s happen if an authenticated user visits a malicious page that contains the following JavaScript code?

    The browser sends the following request to the “vulnerable.domain”:

    And the application responds with the following:

    Due to the two “Access-Control-Allow-*“ headers sent by the server, the victim’s browser allows the JavaScript code included into the malicious page to access the data and in this manner the attacker successfully stole the user’s private data (in this case: e-mail address and cellphone).

    Note that, based on the data exposed by the application, the result of the attack could be even more dangerous. I remember a situation in which this issue led to a full account takeover of the victim.

    The Solution

    If you are using the filter provided by Apache Tomcat to enable CORS on your applications, ensure using a more “advanced” configuration that overrides the default values. In particular, configure the “cors.allowed.origins” specifying only the allowed domains and enable the “cors.support.credentials” only if it is strictly necessary.

    It is also advisable to restrict the allowed methods with the “cors.allowed.methods” attribute and limit the preflight max age (with the “cors.preflight.maxage” attribute).

    The following snippet shows a more secure configuration for the preceding example.

    Note that, if you need to allow CORS for multiple domains, you can specify each one of them, divided by a comma, inside the “cors.allowed.origins” attribute. In this case Tomcat will check the origin header and, if it matches with one of the domains specified, the request is allowed and the “Access-Control-Allow-*” response headers are returned, otherwise a 403 response is served.

    Be aware of default configurations. BeDefended.

    Thanks for reading.

    Found this post useful? Kindly tap the button below!

    Ссылка на основную публикацию
    Adblock
    detector