From 4023cf38542a58881c5d38cbcb881959c9d54bed Mon Sep 17 00:00:00 2001 From: Vitaly Nesteruk Date: Wed, 24 Aug 2022 02:44:22 +0300 Subject: [PATCH 1/2] Fetch: Cross-Origin Requests --- .../1-do-we-need-origin/solution.md | 10 +- .../1-do-we-need-origin/task.md | 14 +- 5-network/05-fetch-crossorigin/article.md | 290 +++++++++--------- .../cors-gmail-messages.svg | 2 +- .../xhr-another-domain.svg | 2 +- .../05-fetch-crossorigin/xhr-preflight.svg | 2 +- 6 files changed, 160 insertions(+), 160 deletions(-) diff --git a/5-network/05-fetch-crossorigin/1-do-we-need-origin/solution.md b/5-network/05-fetch-crossorigin/1-do-we-need-origin/solution.md index d44494e18..da0c02ae9 100644 --- a/5-network/05-fetch-crossorigin/1-do-we-need-origin/solution.md +++ b/5-network/05-fetch-crossorigin/1-do-we-need-origin/solution.md @@ -1,9 +1,9 @@ -We need `Origin`, because sometimes `Referer` is absent. For instance, when we `fetch` HTTP-page from HTTPS (access less secure from more secure), then there's no `Referer`. +Нам потрібен `Origin`, тому що іноді `Referer` відсутній. Наприклад, коли ми запитуємо через `fetch` HTTP-сторінку з HTTPS (доступ до менш безпечного з більш безпечного), тоді немає `Referer`. -The [Content Security Policy](http://en.wikipedia.org/wiki/Content_Security_Policy) may forbid sending a `Referer`. +[Content Security Policy](http://en.wikipedia.org/wiki/Content_Security_Policy) може забороняти надсилання `Referer`. -As we'll see, `fetch` has options that prevent sending the `Referer` and even allow to change it (within the same site). +Як ми побачимо, `fetch` має параметри, які забороняють надсилати `Referer` і навіть дозволяють змінювати його (в межах того самого сайту). -By specification, `Referer` is an optional HTTP-header. +За специфікацією `Referer` є необов'язковим HTTP-заголовком. -Exactly because `Referer` is unreliable, `Origin` was invented. The browser guarantees correct `Origin` for cross-origin requests. +Саме тому, що `Referer` є ненадійним, було винайдено `Origin`. Браузер гарантує правильне `Origin` для запитів між різними джерелами. \ No newline at end of file diff --git a/5-network/05-fetch-crossorigin/1-do-we-need-origin/task.md b/5-network/05-fetch-crossorigin/1-do-we-need-origin/task.md index fb8142a3b..13f558d87 100644 --- a/5-network/05-fetch-crossorigin/1-do-we-need-origin/task.md +++ b/5-network/05-fetch-crossorigin/1-do-we-need-origin/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Why do we need Origin? +# Навіщо нам Origin? -As you probably know, there's HTTP-header `Referer`, that usually contains an url of the page which initiated a network request. +Як ви, мабуть, знаєте, існує HTTP-заголовок `Referer`, який зазвичай містить URL-адресу сторінки, що ініціювала мережевий запит. -For instance, when fetching `http://google.com` from `http://javascript.info/some/url`, the headers look like this: +Наприклад, під час отримання `http://google.com` з `http://javascript.info/some/url` заголовки виглядають так: ``` Accept: */* @@ -20,9 +20,9 @@ Referer: http://javascript.info/some/url */!* ``` -As you can see, both `Referer` and `Origin` are present. +Як бачите, присутні і `Referer`, і `Origin`. -The questions: +Питання: -1. Why `Origin` is needed, if `Referer` has even more information? -2. Is it possible that there's no `Referer` or `Origin`, or is it incorrect? +1. Навіщо потрібен `Origin`, якщо `Referer` містить ще більше інформації? +2. Чи можливо, що немає `Referer` чи `Origin`, або ж це неправильно? \ No newline at end of file diff --git a/5-network/05-fetch-crossorigin/article.md b/5-network/05-fetch-crossorigin/article.md index d45ee391d..f8b177bbb 100644 --- a/5-network/05-fetch-crossorigin/article.md +++ b/5-network/05-fetch-crossorigin/article.md @@ -1,8 +1,8 @@ -# Fetch: Cross-Origin Requests +# Fetch: Запити між різними джерелами -If we send a `fetch` request to another web-site, it will probably fail. +Якщо ми надішлемо запит `fetch` на інший веб-сайт, він, ймовірно, завершиться невдало. -For instance, let's try fetching `http://example.com`: +Наприклад, спробуймо запросити `http://example.com`: ```js run async try { @@ -12,39 +12,39 @@ try { } ``` -Fetch fails, as expected. +Запит завершився невдало, як і очікувалося. -The core concept here is *origin* -- a domain/port/protocol triplet. +Основною концепцією тут є *джерело* (*origin*) -- триплет домен/порт/протокол. -Cross-origin requests -- those sent to another domain (even a subdomain) or protocol or port -- require special headers from the remote side. +Запити на інші сайти -- надіслані до іншого домену (навіть субдомену), протоколу чи порту -- потребують спеціальних заголовків від віддаленої сторони. -That policy is called "CORS": Cross-Origin Resource Sharing. +Ця політика називається "CORS": Cross-Origin Resource Sharing ("спільне використання ресурсів між різними джерелами"). -## Why is CORS needed? A brief history +## Навіщо потрібен CORS? Коротка історія -CORS exists to protect the internet from evil hackers. +CORS існує для захисту інтернету від злісних хакерів. -Seriously. Let's make a very brief historical digression. +Серйозно. Зробімо дуже короткий історичний екскурс. -**For many years a script from one site could not access the content of another site.** +**Протягом багатьох років скрипт з одного сайту не міг отримати доступ до вмісту іншого сайту.** -That simple, yet powerful rule was a foundation of the internet security. E.g. an evil script from website `hacker.com` could not access the user's mailbox at website `gmail.com`. People felt safe. +Це просте, але потужне правило було основою інтернет-безпеки. Наприклад, шкідливий скрипт із веб-сайту `hacker.com` не міг отримати доступ до поштової скриньки користувача на веб-сайті `gmail.com`. Люди відчували себе в безпеці. -JavaScript also did not have any special methods to perform network requests at that time. It was a toy language to decorate a web page. +На той час JavaScript також не мав спеціальних методів для виконання мережевих запитів. Це була іграшкова мова для прикраси веб-сторінки. -But web developers demanded more power. A variety of tricks were invented to work around the limitation and make requests to other websites. +Але веб-розробники вимагали більшої потужності. Щоб обійти обмеження та надсилати запити на інші веб-сайти, було винайдено різноманітні прийоми. -### Using forms +### Використання форм -One way to communicate with another server was to submit a `
` there. People submitted it into `