Skip to content

Fetch: Cross-Origin Requests #382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dolgachio merged 2 commits into from
Oct 24, 2022
Merged

Fetch: Cross-Origin Requests #382

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4023cf3
Fetch: Cross-Origin Requests
Nordtonito Aug 23, 2022
d898851
Apply suggestions from code review
dolgachio Oct 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Apply suggestions from code review
  • Loading branch information
@dolgachio
dolgachio authored Oct 24, 2022
commit d898851db6ce34cddbe58226c77331064aeae8d8
20 changes: 10 additions & 10 deletions 5-network/05-fetch-crossorigin/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ try {

## Навіщо потрібен CORS? Коротка історія

CORS існує для захисту інтернету від злісних хакерів.
CORS існує для захисту інтернету від злих хакерів.

Серйозно. Зробімо дуже короткий історичний екскурс.

Expand Down Expand Up @@ -165,7 +165,7 @@ Access-Control-Allow-Origin: https://javascript.info

## Заголовки відповіді

Для запиту між різними джереалми JavaScript за замовчуванням може мати доступ лише до так званих "безпечних" заголовків відповідей:
Для запиту між різними джерелами JavaScript типово може мати доступ лише до так званих "безпечних" заголовків відповідей:

- `Cache-Control`
- `Content-Language`
Expand All @@ -179,7 +179,7 @@ Access-Control-Allow-Origin: https://javascript.info
```smart
У списку немає заголовка `Content-Length`!

Цей заголовок містить повну довжину відповіді. Отже, якщо ми щось завантажуємо й хочемо відстежувати відсоток прогресу, тоді для доступу до цього заголовка потрібен додатковий дозвіл (дивись нижче).
Цей заголовок містить повну довжину відповіді. Отже, якщо ми щось завантажуємо й хочемо відстежувати прогрес у відсотках, тоді для доступу до цього заголовка потрібен додатковий дозвіл (дивись нижче).
```

Щоб надати JavaScript доступ до будь-якого іншого заголовка відповіді, сервер повинен надіслати заголовок `Access-Control-Expose-Headers`. Він містить розділений комами список небезпечних імен заголовків, які мають бути доступними.
Expand All @@ -203,11 +203,11 @@ Access-Control-Expose-Headers: Content-Length,API-Key

Ми можемо використовувати будь-який HTTP-метод: не тільки `GET/POST`, а й `PATCH`, `DELETE` та інші.

Деякий час тому ніхто навіть уявити не міг, що веб-сторінка може робити такі запити. Тому все ще можуть існувати веб-сервіси, які сприймають нестандартний метод як сигнал: "Це не браузер". Вони можуть це враховувати при перевірці прав доступу.
Деякий час тому ніхто навіть уявити не міг, що веб-сторінка зможе робити такі запити. Тому все ще можуть існувати веб-сервіси, які сприймають нестандартний метод як сигнал: "Це не браузер". Вони можуть це враховувати при перевірці прав доступу.

Тому, щоб уникнути непорозумінь, будь-які "небезпечні" запити, які не можна було зробити в старі часи, браузер не робить такі запити відразу. По-перше, він надсилає попередній, так званий «передпольотний» запит, щоб отримати дозвіл.
Тому, щоб уникнути непорозумінь, будь-які "небезпечні" запити, які не можна було зробити в старі часи, браузер не робить відразу. По-перше, він надсилає попередній, так званий "передпольотний(preflight)" запит, щоб отримати дозвіл.

Запит перед друком використовує метод `OPTIONS`, без тіла та трьох заголовків:
Запит перед друком використовує метод `OPTIONS`, без тіла запросу, але з трьома заголовками:

- Заголовок `Access-Control-Request-Method` містить метод небезпечного запиту.
- Заголовок `Access-Control-Request-Headers` надає список небезпечних HTTP-заголовків, що розділені комами.
Expand All @@ -218,7 +218,7 @@ Access-Control-Expose-Headers: Content-Length,API-Key
- `Access-Control-Allow-Origin` має бути або `*`, або джерелом запиту, наприклад `https://javascript.info`, щоб дозволити це.
- `Access-Control-Allow-Methods` повинен мати дозволений метод.
- `Access-Control-Allow-Headers` повинен мати список дозволених заголовків.
- Крім того, заголовок `Access-Control-Max-Age` може вказати кількість секунд для кешування дозволів. Тому веб-переглядачу не потрібно буде надсилати попередній запит для наступних запитів, які задовольняють надані дозволи.
- Крім того, заголовок `Access-Control-Max-Age` може вказати кількість секунд для кешування дозволів. Тому веб-переглядачу не потрібно буде надсилати попередній запит для наступних подібних запитів в межах вже наданих дозволів.

![](xhr-preflight.svg)

Expand All @@ -239,7 +239,7 @@ let response = await fetch('https://site.com/service.json', {
- `Content-Type` не є одним із: `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`.
- "Небезпечний" заголовок `API-Key`.

### Крок 1 (попередній запит)
### Крок 1 (попередній(preflight) запит)

Перед надсиланням такого запиту браузер самостійно надсилає попередній запит, що виглядає так:

Expand Down Expand Up @@ -368,15 +368,15 @@ Access-Control-Allow-Credentials: true
**Для безпечних запитів:**

- → Браузер надсилає заголовок `Origin` з джерелом.
- ← Для запитів без облікових даних (не надсилаються за замовчуванням), сервер повинен встановити:
- ← Для запитів без облікових даних (типово не надсилаються), сервер повинен встановити:
- `Access-Control-Allow-Origin` на `*` або те саме значення, що й `Origin`
- ← Для запитів з обліковими даними сервер повинен встановити:
- `Access-Control-Allow-Origin` на те саме значення, що й `Origin`
- `Access-Control-Allow-Credentials` на `true`

Крім того, щоб надати JavaScript доступ до будь-яких заголовків відповіді, окрім `Cache-Control`, `Content-Language`, `Content-Type`, `Expires`, `Last-Modified` або `Pragma`, сервер повинен перерахувати дозволені у заголовку `Access-Control-Expose-Headers`.

**Для небезпечних запитів попередній запит "preflight" видається перед запитом:**
**Для небезпечних запитів попередній запит "preflight" виконується перед фактичним запитом:**

- → Браузер надсилає запит `OPTIONS` на ту саму URL-адресу із заголовками:
- `Access-Control-Request-Method` містить метод, що запитується.
Expand Down