Skip to content

Commit 69acca8

Browse files
committed
minor
1 parent b2bbd1c commit 69acca8

File tree

8 files changed

+63
-60
lines changed

8 files changed

+63
-60
lines changed

1-js/12-generators-iterators/1-generators/genYield2-2.svg

+2-2
Loading

3-frames-and-windows/03-cross-window-communication/article.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ That's all. Now they can interact without limitations. Again, that's only possib
118118

119119
## Iframe: wrong document pitfall
120120

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.
122122

123123
Upon its creation an iframe immediately has a document. But that document is different from the one that loads into it!
124124

@@ -326,7 +326,7 @@ window.addEventListener("message", function(event) {
326326
}
327327

328328
alert( "received: " + event.data );
329-
329+
330330
// can message back using event.source.postMessage(...)
331331
});
332332
```

5-network/03-fetch-progress/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ Let's explain that step-by-step:
9191
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.
9292
2. Prior to reading, we can figure out the full response length from the `Content-Length` header.
9393

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.
9595
3. Call `await reader.read()` until it's done.
9696

9797
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).

5-network/05-fetch-crossorigin/article.md

+31-28
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
# Fetch: Cross-Origin Requests
22

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.
84

95
For instance, let's try fetching `http://example.com`:
106

@@ -18,19 +14,25 @@ try {
1814

1915
Fetch fails, as expected.
2016

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.
2222

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.
2426

2527
Seriously. Let's make a very brief historical digression.
2628

2729
**For many years a script from one site could not access the content of another site.**
2830

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.
3032

3133
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.
3234

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.
3436

3537
### Using forms
3638

@@ -50,34 +52,36 @@ One way to communicate with another server was to submit a `<form>` there. Peopl
5052
</form>
5153
```
5254

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.
5456

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.
5658

5759
### Using scripts
5860

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.
6064

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.
6266

63-
Let's say we need 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:
6468

6569
1. First, in advance, we declare a global function to accept the data, e.g. `gotWeather`.
6670

6771
```js
68-
// 1. Declare the function to process the data
72+
// 1. Declare the function to process the weather data
6973
function gotWeather({ temperature, humidity }) {
7074
alert(`temperature: ${temperature}, humidity: ${humidity}`);
7175
}
7276
```
73-
2. Then we make a `<script>` tag with `src="http://another.com/weather.json?callback=gotWeather"`, please note that the name of our function is 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 function as the `callback` URL-parameter.
7478

7579
```js
7680
let script = document.createElement('script');
7781
script.src = `http://another.com/weather.json?callback=gotWeather`;
7882
document.body.append(script);
7983
```
80-
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.
8185
```js
8286
// The expected answer from the server looks like this:
8387
gotWeather({
@@ -87,17 +91,16 @@ Let's say we need to get the data from `http://another.com` this way:
8791
```
8892
4. When the remote script loads and executes, `gotWeather` runs, and, as it's our function, we have the data.
8993
90-
91-
9294
That works, and doesn't violate security, because both sides agreed to pass the data this way. 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.
9395
94-
After a while, networking methods appeared, such as `XMLHttpRequest`.
96+
After a while, networking methods appeared in browser JavaScript.
9597
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.
9799
98100
## Simple requests
99101
100-
There are two types of cross-domain requests:
102+
There are two types of cross-origin requests:
103+
101104
1. Simple requests.
102105
2. All the others.
103106
@@ -124,7 +127,7 @@ When we try to make a non-simple request, the browser sends a special "preflight
124127
125128
And, unless the server explicitly confirms that with headers, a non-simple request is not sent.
126129
127-
Now we'll go into details. All of them serve a single purpose -- to ensure that new cross-origin capabilities are only accessible with an explicit permission from the server.
130+
Now we'll go into details.
128131

129132
## CORS for simple requests
130133

@@ -141,13 +144,13 @@ Origin: https://javascript.info
141144
...
142145
```
143146

144-
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.
145148

146149
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.
147150

148151
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 for correct `Access-Control-Allow-Origin` in the response, if it is so, then JavaScript access, otherwise forbids with an error.
152+
1. It ensures that the corrent `Origin` is sent with a cross-origin request.
153+
2. If checks for permitting `Access-Control-Allow-Origin` in the response, if it exists, then JavaScript is allowed to access the response, otherwise it fails with an error.
151154

152155
![](xhr-another-domain.svg)
153156

@@ -217,7 +220,7 @@ If the server agrees to serve the requests, then it should respond with status 2
217220
218221
![](xhr-preflight.svg)
219222
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):
221224
222225
```js
223226
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.
303306
304307
A cross-origin request by default does not bring any credentials (cookies or HTTP authentication).
305308
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.
307310
308311
For example, `fetch('http://another.com')` does not send any cookies, even those that belong to `another.com` domain.
309312

0 commit comments

Comments
 (0)