This commit is contained in:
Ilya Kantor 2019-06-25 16:25:50 +03:00
parent 69fbb63bc4
commit 4f2a90854d
4 changed files with 33 additions and 26 deletions

View file

@ -1,20 +1,21 @@
# Fetch API
So far, we know quite a bit about fetch.
So far, we know quite a bit about `fetch`.
Now let's see the rest of API, to cover all its abilities.
Here's the full list of all possible fetch options with their default values (alternatives in comments):
Here's the full list of all possible `fetch` options with their default values (alternatives in comments):
```js
let promise = fetch(url, {
method: "GET", // POST, PUT, DELETE, etc.
headers: {
"Content-Type": "text/plain;charset=UTF-8" // for a string body, depends on body
// the content type header value is usually auto-set depending on the request body
"Content-Type": "text/plain;charset=UTF-8"
},
body: undefined // string, FormData, Blob, BufferSource, or URLSearchParams
referrer: "about:client", // "" for no-referrer, or an url from the current origin
referrer: "about:client", // or "" to send no Referer header, or an url from the current origin
referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
mode: "cors", // same-origin, no-cors
credentials: "same-origin", // omit, include
@ -39,8 +40,7 @@ Now let's explore the rest of options.
These options govern how `fetch` sets HTTP `Referer` header.
That header contains the url of the page that made the request. In most scenarios, it plays a very minor informational role, but sometimes, for security purposes, it makes sense to remove or modify it.
.
That header contains the url of the page that made the request. In most scenarios, it plays a very minor informational role, but sometimes, for security purposes, it makes sense to remove or shorten it.
**The `referrer` option allows to set any `Referer` within the current origin) or disable it.**
@ -72,13 +72,13 @@ Possible values are described in the [Referrer Policy specification](https://w3c
- **`"no-referrer-when-downgrade"`** -- default value: `Referer` is sent always, unless we send a request from HTTPS to HTTP (to less secure protocol).
- **`"no-referrer"`** -- never send `Referer`.
- **`"origin"`** -- only send the origin in `Referer`, not the full page URL, e.g. `http://site.com` instead of `http://site.com/path`.
- **`"origin-when-cross-origin"`** -- send full referrer to the same origin, but only the origin part for cross-origin requests.
- **`"same-origin"`** -- send full referrer to the same origin, but no referer for for cross-origin requests.
- **`"strict-origin"`** -- send only origin, don't send referrer for HTTPS→HTTP requests.
- **`"strict-origin-when-cross-origin"`** -- for same-origin send full referrer, for cross-origin send only origin, unless it's HTTPS→HTTP request, then send nothing.
- **`"origin-when-cross-origin"`** -- send full `Referer` to the same origin, but only the origin part for cross-origin requests.
- **`"same-origin"`** -- send full `Referer` to the same origin, but no referer for for cross-origin requests.
- **`"strict-origin"`** -- send only origin, don't send `Referer` for HTTPS→HTTP requests.
- **`"strict-origin-when-cross-origin"`** -- for same-origin send full `Referer`, for cross-origin send only origin, unless it's HTTPS→HTTP request, then send nothing.
- **`"unsafe-url"`** -- always send full url in `Referer`.
Let's say we have an admin zone with URL structure that shouldn't be visible from outside.
Let's say we have an admin zone with URL structure that shouldn't be known from outside of the site.
If we send a cross-origin `fetch`, then by default it sends the `Referer` header with the full url of our page (except when we request from HTTPS to HTTP, then no `Referer`).
@ -92,7 +92,7 @@ fetch('https://another.com/page', {
});
```
Otherwise, if we'd like the remote side to see where the request comes from, we can send only the "origin" part of the url:
Otherwise, if we'd like the remote side to see only the domain where the request comes from, but not the full URL, we can send only the "origin" part of it:
```js
fetch('https://another.com/page', {