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: 3-frames-and-windows/03-cross-window-communication/article.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -118,7 +118,7 @@ That's all. Now they can interact without limitations. Again, that's only possib
118
118
119
119
## Iframe: wrong document pitfall
120
120
121
-
When an iframe comes from the same origin, and we may access its `document`, there's a pitfall. It's not related to cross-domain things, but important to know.
121
+
When an iframe comes from the same origin, and we may access its `document`, there's a pitfall. It's not related to cross-origin things, but important to know.
122
122
123
123
Upon its creation an iframe immediately has a document. But that document is different from the one that loads into it!
Copy file name to clipboardExpand all lines: 5-network/03-fetch-progress/article.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -91,7 +91,7 @@ Let's explain that step-by-step:
91
91
Please note, we can't use both these methods to read the same response: either use a reader or a response method to get the result.
92
92
2. Prior to reading, we can figure out the full response length from the `Content-Length` header.
93
93
94
-
It may be absent for cross-domain requests (see chapter <info:fetch-crossorigin>) and, well, technically a server doesn't have to set it. But usually it's at place.
94
+
It may be absent for cross-origin requests (see chapter <info:fetch-crossorigin>) and, well, technically a server doesn't have to set it. But usually it's at place.
95
95
3. Call `await reader.read()` until it's done.
96
96
97
97
We gather response chunks in the array `chunks`. That's important, because after the response is consumed, we won't be able to "re-read" it using `response.json()` or another way (you can try, there'll be an error).
Copy file name to clipboardExpand all lines: 5-network/05-fetch-crossorigin/article.md
+31-28
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,6 @@
1
1
# Fetch: Cross-Origin Requests
2
2
3
-
If we make a `fetch` from an arbitrary web-site, that will probably fail.
4
-
5
-
The core concept here is *origin* -- a domain/port/protocol triplet.
6
-
7
-
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.
3
+
If we send a `fetch` request to another web-site, it will probably fail.
8
4
9
5
For instance, let's try fetching `http://example.com`:
10
6
@@ -18,19 +14,25 @@ try {
18
14
19
15
Fetch fails, as expected.
20
16
21
-
## Why? A brief history
17
+
The core concept here is *origin* -- a domain/port/protocol triplet.
18
+
19
+
Cross-origin requests -- those sent to another domain (even a subdomain) or protocol or port -- require special headers from the remote side.
20
+
21
+
That policy is called "CORS": Cross-Origin Resource Sharing.
22
22
23
-
Because cross-origin restrictions protect the internet from evil hackers.
23
+
## Why CORS is needed? A brief history
24
+
25
+
CORS exists protect the internet from evil hackers.
24
26
25
27
Seriously. Let's make a very brief historical digression.
26
28
27
29
**For many years a script from one site could not access the content of another site.**
28
30
29
-
That simple, yet powerful rule was a foundation of the internet security. E.g. a script from the page `hacker.com` could not access user's mailbox at `gmail.com`. People felt safe.
31
+
That simple, yet powerful rule was a foundation of the internet security. E.g. an evil script from website `hacker.com` could not access user's mailbox at website`gmail.com`. People felt safe.
30
32
31
33
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.
32
34
33
-
But web developers demanded more power. A variety of tricks were invented to work around the limitation.
35
+
But web developers demanded more power. A variety of tricks were invented to work around the limitation and make requests to other websites.
34
36
35
37
### Using forms
36
38
@@ -50,34 +52,36 @@ One way to communicate with another server was to submit a `<form>` there. Peopl
50
52
</form>
51
53
```
52
54
53
-
So, it was possible to make a GET/POST request to another site, even without networking methods. But as it's forbidden to access the content of an `<iframe>` from another site, it wasn't possible to read the response.
55
+
So, it was possible to make a GET/POST request to another site, even without networking methods, as forms can send data anywhere. But as it's forbidden to access the content of an `<iframe>` from another site, it wasn't possible to read the response.
54
56
55
-
As we can see, forms allowed to send data anywhere, but not receive the response. To be precise, there wre actually tricks for that (required special scripts at both the iframe and the page), but let these dinosaurs rest in peace.
57
+
To be precise, there were actually tricks for that, they required special scripts at both the iframe and the page. So the communication with the iframe was technically possible. Right now there's no point to go into details, let these dinosaurs rest in peace.
56
58
57
59
### Using scripts
58
60
59
-
Another trick was to use a `<script src="http://another.com/…">` tag. A script could have any `src`, from any domain. But again -- it was impossible to access the raw content of such script.
61
+
Another trick was to use a `script` tag. A script could have any `src`, with any domain, like `<script src="http://another.com/…">`. It's possible to execute a script from any website.
62
+
63
+
If a website, e.g. `another.com` intended to expose data for this kind of access, then a so-called "JSONP (JSON with padding)" protocol was used.
60
64
61
-
If `another.com` intended to expose data for this kind of access, then a so-called "JSONP (JSON with padding)" protocol was used.
65
+
Here's how it worked.
62
66
63
-
Let's say weneed to get the data from `http://another.com` this way:
67
+
Let's say we, at our site, need to get the data from `http://another.com`, such as the weather:
64
68
65
69
1. First, in advance, we declare a global function to accept the data, e.g. `gotWeather`.
66
70
67
71
```js
68
-
// 1. Declare the function to process the data
72
+
// 1. Declare the function to process the weather data
2. Then we make a `<script>` tag with`src="http://another.com/weather.json?callback=gotWeather"`, please note that the name of our functionis its `callback` parameter.
77
+
2. Then we make a `<script>` tag with`src="http://another.com/weather.json?callback=gotWeather"`, using the name of our functionas the `callback` URL-parameter.
3. The remote server dynamically generates a script that calls `gotWeather(...)` with the data it wants us to receive.
84
+
3. The remote server `another.com` dynamically generates a script that calls `gotWeather(...)` with the data it wants us to receive.
81
85
```js
82
86
// The expected answer from the server looks like this:
83
87
gotWeather({
@@ -87,17 +91,16 @@ Let's say we need to get the data from `http://another.com` this way:
87
91
```
88
92
4. When the remote script loads and executes, `gotWeather` runs, and, as it's our function, we have the data.
89
93
90
-
91
-
92
94
That works, and doesn't violate security, because both sides agreed to pass the data thisway. And, when both sides agree, it's definitely not a hack. There are still services that provide such access, as it works even for very old browsers.
93
95
94
-
After a while, networking methods appeared, such as `XMLHttpRequest`.
96
+
After a while, networking methods appeared in browser JavaScript.
95
97
96
-
At first, cross-origin requests were forbidden. But as a result of long discussions, cross-domain requests were allowed, in a way that does not add any capabilities unless explicitly allowed by the server.
98
+
At first, cross-origin requests were forbidden. But as a result of long discussions, cross-origin requests were allowed, but any new capabilities unless require an explicit allowance by the server, expressed in special headers.
97
99
98
100
## Simple requests
99
101
100
-
There are two types of cross-domain requests:
102
+
There are two types of cross-origin requests:
103
+
101
104
1. Simple requests.
102
105
2. All the others.
103
106
@@ -124,7 +127,7 @@ When we try to make a non-simple request, the browser sends a special "preflight
124
127
125
128
And, unless the server explicitly confirms that with headers, a non-simple request is not sent.
126
129
127
-
Now we'll go into details.Allof them serve a single purpose -- to ensure that newcross-origin capabilities are only accessible with an explicit permission from the server.
As you can see, `Origin` contains exactly the origin (domain/protocol/port), without a path.
147
+
As you can see, `Origin`header contains exactly the origin (domain/protocol/port), without a path.
145
148
146
149
The server can inspect the `Origin` and, if it agrees to accept such a request, adds a special header `Access-Control-Allow-Origin` to the response. That header should contain the allowed origin (in our case `https://javascript.info`), or a star `*`. Then the response is successful, otherwise an error.
147
150
148
151
The browser plays the role of a trusted mediator here:
149
-
1. It ensures that the corrent `Origin` is sent with a cross-domain request.
150
-
2. If checks forcorrect`Access-Control-Allow-Origin`in the response, if it is so, then JavaScript access, otherwise forbidswith an error.
152
+
1. It ensures that the corrent `Origin` is sent with a cross-origin request.
153
+
2. If checks forpermitting`Access-Control-Allow-Origin`in the response, if it exists, then JavaScript is allowed to access the response, otherwise it failswith an error.
151
154
152
155

153
156
@@ -217,7 +220,7 @@ If the server agrees to serve the requests, then it should respond with status 2
217
220
218
221

219
222
220
-
Let's see how it works step-by-step on example, for a cross-domain `PATCH` request (this method is often used to update data):
223
+
Let's see how it works step-by-step on example, for a cross-origin `PATCH` request (this method is often used to update data):
221
224
222
225
```js
223
226
let response = await fetch('https://site.com/service.json', {
@@ -303,7 +306,7 @@ Now everything's correct. JavaScript is able to read the full response.
303
306
304
307
A cross-origin request by default does not bring any credentials (cookies or HTTP authentication).
305
308
306
-
That's uncommon for HTTP-requests. Usually, a request to `http://site.com` is accompanied by all cookies from that domain. But cross-domain requests made by JavaScript methods are an exception.
309
+
That's uncommon for HTTP-requests. Usually, a request to `http://site.com` is accompanied by all cookies from that domain. But cross-origin requests made by JavaScript methods are an exception.
307
310
308
311
For example, `fetch('http://another.com')` does not send any cookies, even those that belong to `another.com` domain.
0 commit comments