Skip to content

Commit

Permalink
Редачит
Browse files Browse the repository at this point in the history
  • Loading branch information
TatianaFokina authored Jul 16, 2024
1 parent a4f8dbe commit 518e863
Showing 1 changed file with 16 additions and 17 deletions.
33 changes: 16 additions & 17 deletions tools/cors/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,20 @@ tags:

## Кратко

_CORS_ расшифровывается как _Cross-Origin Resource Sharing_. Это механизм браузера, который позволяет определить список ресурсов, к которым страница может получить доступ. Он необходим для обеспечения безопасности и защиты пользователей от злоумышленников при использовании [HTTP протокола](/tools/http-protocol/).
_CORS_ расшифровывается как _Cross-Origin Resource Sharing_. Это механизм браузера, который позволяет определить список ресурсов, к которым страница может получить доступ. Он нужен для обеспечения безопасности и защиты пользователей от злоумышленников при использовании [HTTP-протокола](/tools/http-protocol/).

По умолчанию, сайты могут запрашивать ресурсы только со своего `origin`. Такое ограничение называется _Same-Origin Policy_. CORS расширяет Same-Origin Policy, позволяя получать доступ к ресурсам с разных доменов.
По умолчанию сайты могут запрашивать ресурсы только со своего `origin`. Такое ограничение называется _Same-Origin Policy_. CORS расширяет Same-Origin Policy, позволяя получать доступ к ресурсам с разных доменов.

`origin` – это комбинация протокола, домена и порта (если он указан). Например, `doka.guide` – это домен, а `https://doka.guide``origin`.

Настройка доступа должна происходить как со стороны браузера, так и со стороны сервера.
Это означает, что и браузер, и сервер должны быть настроены на разрешение или запрет доступа к ресурсам с других `origin`.
Настройка доступа должна происходить как со стороны браузера, так и со стороны сервера. Это означает, что и браузер, и сервер должны быть настроены на разрешение или запрет доступа к ресурсам с других `origin`.

## Как работает

Рассмотрим пример работы CORS без дополнительной настройки:

> Пользователь открывает страницу сайта `doka.guide`. Страница отправляет запрос к стороннему источнику `api.example.com`.
> Браузер сравнивает `origin` и понимает, что `api.example.com` – сторонний `origin` для нашего сайта, из-за чего блокирует запрос. Причём запрос может быть заблокирован и в рамках одного домена, например у `http://doka.guide` и `https://doka.guide` `origin` будет отличаться из-за несовпадения протоколов.
> Браузер сравнивает `origin` и понимает, что `api.example.com` – сторонний `origin` для нашего сайта, из-за чего блокирует запрос. Причём запрос может быть заблокирован в рамках одного домена, например, `origin` будет отличаться у `http://doka.guide` и `https://doka.guide` из-за несовпадения протоколов.
Такие запросы с сайта на сайт называются _перекрёстными_.

Expand All @@ -55,9 +54,7 @@ _CORS_ расшифровывается как _Cross-Origin Resource Sharing_.
- `Access-Control-Max-Age` – определяет максимальное время, в течение которого должны кэшироваться предыдущие ответы на запросы предварительной проверки CORS.
- `Access-Control-Expose-Headers` – определяет список заголовков, которые могут быть доступны на клиентской стороне.

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

И заголовки для настройки предварительных запросов:
Также есть заголовок для настройки со стороны браузера: `Origin` указывает на комбинацию домена, порта и протокола, откуда на сервер поступает запрос. А вот заголовки для настройки предварительных запросов:

- `Access-Control-Request-Method` – определяет метод запроса, который будет использоваться в основном запросе;
- `Access-Control-Request-Headers` – используется для указания заголовков, которые будут использоваться в основном запросе.
Expand All @@ -66,7 +63,7 @@ _CORS_ расшифровывается как _Cross-Origin Resource Sharing_.

Предварительный запрос – это дополнительный HTTP-запрос, который отправляется браузером перед основным запросом.

Когда страница запрашивает данные с другого `origin`, браузер отправляет предварительный запрос `OPTIONS` на сервер, чтобы узнать, разрешены ли такие запросы. При повторном запросе на тот же `origin`, запрос `OPTIONS` может и не отправляться, а все данные будут получены из кэша.
Когда страница запрашивает данные с другого `origin`, браузер отправляет предварительный запрос `OPTIONS` на сервер, чтобы узнать, разрешены ли такие запросы. При повторном запросе на тот же `origin`, запрос `OPTIONS` может и не отправляться, а все данные получаться из кэша.

При отправке запроса на `api.example.com`, браузер проставит заголовок `Origin`, сформирует запрос в [определённом формате](/tools/http-protocol/#format-soobshcheniya) и отправит его на сервер:

Expand All @@ -76,25 +73,27 @@ Host: api.example.com
Origin: doka.guide
```

Если сервер запрещает доступ к ресурсу, то в результате запроса в браузере мы увидим ошибку.

А если доступ разрешён, то сервер ответит на запрос заголовком:
Если сервер запрещает доступ к ресурсу, то в результате запроса в браузере мы увидим ошибку. А если доступ разрешён, то сервер ответит на запрос заголовком:

`Access-Control-Allow-Origin: doka.guide`
```text
Access-Control-Allow-Origin: doka.guide
```

Такая запись означает, что сервер разрешает доступ с домена `doka.guide`.

Также можно разрешить доступ сразу для нескольких доменов. Тогда запись будет выглядеть так:

`Access-Control-Allow-Origin: doka.guide github.com stackoverflow.com`
```text
Access-Control-Allow-Origin: doka.guide github.com stackoverflow.com
```

Или задать маску:
Дополнительно можете задать маску:

- `*.site.com` – для разрешения доступа с любого поддомена `site.com`;
- `*` – для разрешения доступа отовсюду.

Однако необходимо быть осторожным при использовании этого заголовка, так как неправильная конфигурация может привести к уязвимостям безопасности. Например, если сервер отправляет `Access-Control-Allow-Origin: *`, это означает, что любой `origin` может получить доступ к ресурсам на сервере. Это может привести к возможности выполнения [атак](/tools/web-security/), например, CSRF и других.
При использовании этого заголовка будьте осторожны, так как неправильная конфигурация приводит к уязвимостям безопасности. Например, если сервер отправляет `Access-Control-Allow-Origin: *`. Это означает, что любой `origin` получает доступ к ресурсам на сервере, что даёт возможность выполнять [атаки](/tools/web-security/), например, CSRF.

## Важно помнить

Настройка CORS происходит как со стороны браузера, так и со стороны сервера. Поэтому необходимо правильно настроить сервер, чтобы он возвращал нужные заголовки при запросах с других `origin`.
Настройка CORS происходит как со стороны браузера, так и со стороны сервера. Нужно правильно настроить сервер, чтобы он возвращал нужные заголовки при запросах с других `origin`.

0 comments on commit 518e863

Please sign in to comment.