Html headers access control allow origin

CORS и заголовок ответа Access-Control-Allow-Origin

В этой статье мы объясним, что такое заголовок ответа Access-Control-Allow-Origin в отношении CORS и как он является частью реализации CORS.

Спецификация совместного использования ресурсов между источниками (CORS) обеспечивает контролируемое смягчение политики единого источника (Same-origin policy) для HTTP-запросов к одному домену веб-сайтов от другого за счёт использования набора HTTP заголовков. Браузеры разрешают доступ к ответам на запросы из разных источников на основе этих инструкций в заголовке.

Что такое заголовок ответа Access-Control-Allow-Origin

Заголовок Access-Control-Allow-Origin включается в ответ одного веб-сайта на запрос, исходящий с другого веб-сайта, и определяет разрешённый источник запроса. Веб-браузер сравнивает Access-Control-Allow-Origin с источником запрашивающего веб-сайта и разрешает доступ к ответу, если они совпадают.

Реализация простого совместного использования ресурсов между источниками

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

Предположим, что веб-сайт с источником normal-website.com вызывает следующий междоменный запрос:

GET /data HTTP/1.1 
Host: robust-website.com
Origin : https://normal-website.com

Сервер на сайте robust-website.com возвращает следующий ответ:

HTTP/1.1 200 OK 
.
Access-Control-Allow-Origin: https://normal-website.com

Браузер позволит коду, запущенному на normal-website.com получить доступ к ответу, потому что источники совпадают.

Спецификация Access-Control-Allow-Origin допускает несколько источников, значение null или подстановочный знак * . Однако ни один браузер не поддерживает несколько источников, и существуют ограничения на использование подстановочного знака * .

Обработка запросов ресурсов из разных источников с учётными данными

Поведение по умолчанию для запроса ресурсов из разных источников заключается в том, что запросы передаются без учётных данных, таких как файлы cookie и заголовок авторизации. Однако междоменный сервер может разрешить чтение ответа, когда ему передаются учётные данные, установив для заголовка CORS Access-Control-Allow-Credentials значение true . Теперь, если запрашивающий веб-сайт использует JavaScript, чтобы объявить, что он отправляет файлы cookie с запросом:

GET /data HTTP/1.1 
Host: robust-website.com
.
Origin: https://normal-website.com
Cookie: JSESSIONID=
HTTP/1.1 200 OK 
.
Access-Control-Allow-Origin: https://normal-website.com
Access-Control-Allow-Credentials: true

Затем браузер разрешит запрашивающему веб-сайту прочитать ответ, потому что для заголовка ответа Access-Control-Allow-Credentials установлено значение true . В противном случае браузер не разрешит доступ к ответу.

Читайте также:  Javascript сортировка ассоциативный массив

Ослабление спецификации CORS с помощью подстановочных знаков

Заголовок Access-Control-Allow-Origin поддерживает подстановочные знаки. Например:

Обратите внимание, что подстановочные знаки нельзя использовать внутри любого другого значения. Например, следующий заголовок не валидный:

Access-Control-Allow-Origin: https://*.normal-website.com

К счастью, с точки зрения безопасности использование подстановочного знака ограничено в спецификации, поскольку вы не можете комбинировать подстановочный знак с передачей учётных данных между источниками (аутентификация, файлы cookie или сертификаты на стороне клиента). Следовательно, междоменный ответ сервера вида:

Access-Control-Allow-Origin: * 
Access-Control-Allow-Credentials: true

Не разрешён, так как это было бы небезопасно, так как любой аутентифицированный контент на целевом сайте будет доступен всем.

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

Предполётные проверки

Предполётная проверка была добавлена в спецификацию CORS для защиты устаревших ресурсов от расширенных параметров запроса, разрешённых CORS. При определённых обстоятельствах, когда междоменный запрос включает нестандартный HTTP-метод или заголовки, междоменному запросу предшествует запрос с использованием метода OPTIONS , а протокол CORS требует первоначальной проверки того, какие методы и заголовки разрешены перед тем, как разрешить запрос из разных источников. Это называется предполётной проверкой. Сервер возвращает список разрешённых методов в дополнение к доверенному источнику, и браузер проверяет, разрешён ли метод запрашивающего браузера.

Например, это предполётный запрос, который пытается использовать метод PUT вместе с настраиваемым заголовком запроса под названием Special-Request-Header :

OPTIONS /data HTTP/1.1 
Host:
.
Origin: https://normal-website.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Special-Request-Header

Сервер может вернуть ответ, подобный следующему:

HTTP/1.1 204 No Content 
.
Access-Control-Allow-Origin: https://normal-website.com
Access-Control-Allow-Methods: PUT, POST, OPTIONS
Access-Control-Allow-Headers: Special-Request-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 240

В этом ответе устанавливаются разрешённые методы ( PUT , POST и OPTIONS ) и разрешённые заголовки запроса ( Special-Request-Header ). В этом конкретном случае междоменный сервер также разрешает отправку учётных данных, а заголовок Access-Control-Max-Age определяет максимальный период времени для кэширования ответа перед отправкой для повторного использования. Если методы запроса и заголовки разрешены (как в этом примере), то браузер обрабатывает запрос из разных источников обычным образом. Предполётные проверки добавляют к междоменному запросу дополнительный HTTP-запрос туда и обратно, поэтому они увеличивают накладные расходы при просмотре.

Читайте также:  Python add row to array

Защищает ли CORS от CSRF

CORS не обеспечивает защиту от атак с подделкой межсайтовых запросов (CSRF), это распространённое заблуждение.

CORS — это контролируемое ослабление политики единого источника (Same-origin policy), поэтому плохо настроенный CORS может увеличить вероятность атак CSRF или усугубить их воздействие.

Существуют различные способы выполнения CSRF-атак без использования CORS, включая простые HTML формы и междоменные ресурсы.

Дополнительная информация

Источник

Access-Control-Allow-Headers

The Access-Control-Allow-Headers response header is used in response to a preflight request which includes the Access-Control-Request-Headers to indicate which HTTP headers can be used during the actual request.

This header is required if the request has an Access-Control-Request-Headers header.

Note: CORS-safelisted request headers are always allowed and usually aren’t listed in Access-Control-Allow-Headers (unless there is a need to circumvent the safelist additional restrictions).

Syntax

Access-Control-Allow-Headers: [[, ]*] Access-Control-Allow-Headers: * 

Directives

The name of a supported request header. The header may list any number of headers, separated by commas.

The value » * » only counts as a special wildcard value for requests without credentials (requests without HTTP cookies or HTTP authentication information). In requests with credentials, it is treated as the literal header name » * » without special semantics. Note that the Authorization header can’t be wildcarded and always needs to be listed explicitly.

Examples

A custom header

Here’s an example of what an Access-Control-Allow-Headers header might look like. It indicates that a custom header named X-Custom-Header is supported by CORS requests to the server (in addition to the CORS-safelisted request headers).

Access-Control-Allow-Headers: X-Custom-Header 

Multiple headers

This example shows Access-Control-Allow-Headers when it specifies support for multiple headers.

Access-Control-Allow-Headers: X-Custom-Header, Upgrade-Insecure-Requests 

Bypassing additional restrictions

Although CORS-safelisted request headers are always allowed and don’t usually need to be listed in Access-Control-Allow-Headers , listing them anyway will circumvent the additional restrictions that apply.

Access-Control-Allow-Headers: Accept 

Example preflight request

Let’s look at an example of a preflight request involving Access-Control-Allow-Headers .

Читайте также:  Inserting line breaks in html

Request

First, the request. The preflight request is an OPTIONS request that includes some combination of the three preflight request headers: Access-Control-Request-Method , Access-Control-Request-Headers , and Origin .

The preflight request below tells the server that we want to send a CORS GET request with the headers listed in Access-Control-Request-Headers ( Content-Type and x-requested-with ).

Access-Control-Request-Method: GET Access-Control-Request-Headers: Content-Type, x-requested-with Origin: https://foo.bar.org 

Response

If the CORS request indicated by the preflight request is authorized, the server will respond to the preflight request with a message that indicates the allowed origin, methods, and headers. Below we see that Access-Control-Allow-Headers includes the headers that were requested.

HTTP/1.1 200 OK Content-Length: 0 Connection: keep-alive Access-Control-Allow-Origin: https://foo.bar.org Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE Access-Control-Allow-Headers: Content-Type, x-requested-with Access-Control-Max-Age: 86400 

If the requested method isn’t supported, the server will respond with an error.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 10, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Оцените статью