You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-network/05-fetch-crossorigin/article.md
+30-30
Original file line number
Diff line number
Diff line change
@@ -97,39 +97,39 @@ After a while, networking methods appeared in browser JavaScript.
97
97
98
98
At first, cross-origin requests were forbidden. But as a result of long discussions, cross-origin requests were allowed, but with any new capabilities requiring an explicit allowance by the server, expressed in special headers.
99
99
100
-
## Simple requests
100
+
## Safe requests
101
101
102
102
There are two types of cross-origin requests:
103
103
104
-
1. Simple requests.
104
+
1. Safe requests.
105
105
2. All the others.
106
106
107
-
Simple Requests are, well, simpler to make, so let's start with them.
107
+
Safe Requests are simpler to make, so let's start with them.
108
108
109
-
A[simple request](http://www.w3.org/TR/cors/#terminology) is a request that satisfies two conditions:
109
+
A request is safe if it satisfies two conditions:
110
110
111
-
1. [Simple method](http://www.w3.org/TR/cors/#simple-method): GET, POST or HEAD
112
-
2. [Simple headers](http://www.w3.org/TR/cors/#simple-header) -- the only allowed custom headers are:
111
+
1. [Safe method](https://fetch.spec.whatwg.org/#cors-safelisted-method): GET, POST or HEAD
112
+
2. [Safe headers](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) -- the only allowed custom headers are:
113
113
-`Accept`,
114
114
-`Accept-Language`,
115
115
-`Content-Language`,
116
116
-`Content-Type`with the value `application/x-www-form-urlencoded`, `multipart/form-data` or `text/plain`.
117
117
118
-
Any other request is considered "non-simple". For instance, a request with`PUT` method or with an `API-Key`HTTP-header does not fit the limitations.
118
+
Any other request is considered "unsafe". For instance, a request with`PUT` method or with an `API-Key`HTTP-header does not fit the limitations.
119
119
120
-
**The essential difference is that a "simple request" can be made with a `<form>` or a `<script>`, without any special methods.**
120
+
**The essential difference is that a safe request can be made with a `<form>` or a `<script>`, without any special methods.**
121
121
122
-
So, even a very old server should be ready to accept a simple request.
122
+
So, even a very old server should be ready to accept a safe request.
123
123
124
124
Contrary to that, requests with non-standard headers or e.g. method`DELETE` can't be created this way. For a long time JavaScript was unable to do such requests. So an old server may assume that such requests come from a privileged source, "because a webpage is unable to send them".
125
125
126
-
When we try to make a non-simple request, the browser sends a special "preflight" request that asks the server -- does it agree to accept such cross-origin requests, or not?
126
+
When we try to make a unsafe request, the browser sends a special "preflight" request that asks the server -- does it agree to accept such cross-origin requests, or not?
127
127
128
-
And, unless the server explicitly confirms that with headers, a non-simple request is not sent.
128
+
And, unless the server explicitly confirms that with headers, a unsafe request is not sent.
129
129
130
130
Now we'll go into details.
131
131
132
-
## CORSforsimple requests
132
+
## CORSforsafe requests
133
133
134
134
If a request is cross-origin, the browser always adds `Origin` header to it.
For cross-origin request, by default JavaScript may only access so-called "simple" response headers:
168
+
For cross-origin request, by default JavaScript may only access so-called "safe" response headers:
169
169
170
170
- `Cache-Control`
171
171
- `Content-Language`
@@ -182,7 +182,7 @@ There's no `Content-Length` header in the list!
182
182
This header contains the full response length. So, if we're downloading something and would like to track the percentage of progress, then an additional permission is required to access that header (see below).
183
183
```
184
184
185
-
To grant JavaScript access to any other response header, the server must send `Access-Control-Expose-Headers` header. It contains a comma-separated list of non-simple header names that should be made accessible.
185
+
To grant JavaScript access to any other response header, the server must send `Access-Control-Expose-Headers` header. It contains a comma-separated list of unsafe header names that should be made accessible.
With such `Access-Control-Expose-Headers` header, the script is allowed to read `Content-Length` and `API-Key` headers of the response.
201
201
202
-
## "Non-simple" requests
202
+
## "Unsafe" requests
203
203
204
204
We can use any HTTP-method: not just `GET/POST`, but also `PATCH`, `DELETE` and others.
205
205
206
206
Some time ago no one could even imagine that a webpage could make such requests. So there may still exist webservices that treat a non-standard method as a signal: "That's not a browser". They can take it into account when checking access rights.
207
207
208
-
So, to avoid misunderstandings, any "non-simple" request -- that couldn't be done in the old times, the browser does not make such requests right away. Before it sends a preliminary, so-called "preflight" request, asking for permission.
208
+
So, to avoid misunderstandings, any "unsafe" request -- that couldn't be done in the old times, the browser does not make such requests right away. Before it sends a preliminary, so-called "preflight" request, asking for permission.
209
209
210
210
A preflight request uses method `OPTIONS`, no body and two headers:
211
211
212
-
- `Access-Control-Request-Method` header has the method of the non-simple request.
213
-
- `Access-Control-Request-Headers` header provides a comma-separated list of its non-simple HTTP-headers.
212
+
- `Access-Control-Request-Method` header has the method of the unsafe request.
213
+
- `Access-Control-Request-Headers` header provides a comma-separated list of its unsafe HTTP-headers.
214
214
215
215
If the server agrees to serve the requests, then it should respond with empty body, status 200 and headers:
216
216
@@ -233,10 +233,10 @@ let response = await fetch('https://site.com/service.json', {
233
233
});
234
234
```
235
235
236
-
There are three reasons why the request is not simple (one is enough):
236
+
There are three reasons why the request is unsafe (one is enough):
237
237
- Method `PATCH`
238
238
- `Content-Type` is not one of: `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`.
- `Access-Control-Request-Headers` -- a comma-separated list of "non-simple" headers.
258
+
- `Access-Control-Request-Headers` -- a comma-separated list of "unsafe" headers.
259
259
260
260
### Step 2 (preflight response)
261
261
@@ -284,7 +284,7 @@ If there's header `Access-Control-Max-Age` with a number of seconds, then the pr
284
284
285
285
### Step 3 (actual request)
286
286
287
-
When the preflight is successful, the browser now makes the main request. The algorithm here is the same as for simple requests.
287
+
When the preflight is successful, the browser now makes the main request. The algorithm here is the same as for safe requests.
288
288
289
289
The main request has `Origin` header (because it's cross-origin):
290
290
@@ -350,21 +350,21 @@ Please note: `Access-Control-Allow-Origin` is prohibited from using a star `*` f
350
350
351
351
## Summary
352
352
353
-
From the browser point of view, there are two kinds of cross-origin requests: "simple" and all the others.
353
+
From the browser point of view, there are two kinds of cross-origin requests: "safe" and all the others.
354
354
355
-
[Simple requests](http://www.w3.org/TR/cors/#terminology) must satisfy the following conditions:
355
+
"Safe" requests must satisfy the following conditions:
356
356
- Method: GET, POST or HEAD.
357
357
- Headers -- we can set only:
358
358
- `Accept`
359
359
- `Accept-Language`
360
360
- `Content-Language`
361
361
- `Content-Type` to the value `application/x-www-form-urlencoded`, `multipart/form-data` or `text/plain`.
362
362
363
-
The essential difference is that simple requests were doable since ancient times using `<form>` or `<script>` tags, while non-simple were impossible for browsers for a long time.
363
+
The essential difference is that safe requests were doable since ancient times using `<form>` or `<script>` tags, while unsafe were impossible for browsers for a long time.
364
364
365
-
So, the practical difference is that simple requests are sent right away, with `Origin` header, while for the other ones the browser makes a preliminary "preflight" request, asking for permission.
365
+
So, the practical difference is that safe requests are sent right away, with `Origin` header, while for the other ones the browser makes a preliminary "preflight" request, asking for permission.
366
366
367
-
**For simple requests:**
367
+
**For safe requests:**
368
368
369
369
- → The browser sends `Origin` header with the origin.
370
370
- ← For requests without credentials (not sent default), the server should set:
@@ -375,13 +375,13 @@ So, the practical difference is that simple requests are sent right away, with `
375
375
376
376
Additionally, to grant JavaScript access to any response headers except `Cache-Control`, `Content-Language`, `Content-Type`, `Expires`, `Last-Modified` or `Pragma`, the server should list the allowed ones in `Access-Control-Expose-Headers` header.
377
377
378
-
**For non-simple requests, a preliminary "preflight" request is issued before the requested one:**
378
+
**For unsafe requests, a preliminary "preflight" request is issued before the requested one:**
379
379
380
380
- → The browser sends `OPTIONS` request to the same URL, with headers:
381
381
- `Access-Control-Request-Method` has requested method.
0 commit comments