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/06-fetch-api/article.md
+1-73Lines changed: 1 addition & 73 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,19 +42,11 @@ Nous avons entièrement couvert `method`, `headers` et `body` dans le chapitre <
42
42
43
43
L'option `signal` est couverte dans <info:fetch-abort>.
44
44
45
-
<<<<<<< HEAD
46
45
Explorons maintenant le reste des capacités.
47
46
48
47
## referrer, referrerPolicy
49
48
50
49
Ces options régissent la façon dont `fetch` définit l'en-tête HTTP `Referer`.
51
-
=======
52
-
Now let's explore the remaining capabilities.
53
-
54
-
## referrer, referrerPolicy
55
-
56
-
These options govern how `fetch` sets the HTTP `Referer` header.
57
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
58
50
59
51
Habituellement, cet en-tête est défini automatiquement et contient l'url de la page à l'origine de la requête. Dans la plupart des scénarios, ce n'est pas important du tout, parfois, pour des raisons de sécurité, il est logique de le supprimer ou de le raccourcir.
60
52
@@ -89,15 +81,10 @@ Les requêtes sont divisées en 3 types :
89
81
2. Requête à une autre origine.
90
82
3. Requête de HTTPS à HTTP (du protocole sûr au protocole non sécurisé).
91
83
92
-
<<<<<<< HEAD
93
84
Contrairement à l'option `referrer` qui permet de définir la valeur exacte de `Referer`, `referrerPolicy` indique les règles générales du navigateur pour chaque type de requête.
94
-
=======
95
-
Unlike the `referrer` option that allows to set the exact `Referer` value, `referrerPolicy` tells the browser general rules for each request type.
96
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
97
85
98
86
Les valeurs possibles sont décrites dans la [spécification Referrer Policy](https://w3c.github.io/webappsec-referrer-policy/):
99
87
100
-
<<<<<<< HEAD
101
88
-**`"no-referrer-when-downgrade"`** -- la valeur par défaut : le `Referer` complet est toujours envoyé, sauf si nous envoyons une requête de HTTPS à HTTP (vers un protocole moins sécurisé).
102
89
-**`"no-referrer"`** -- ne jamais envoyer de `Referer`.
103
90
-**`"origin"`** -- envoyer uniquement l'origine dans `Referer`, pas l'URL de la page complète, par exemple uniquement `http://site.com` au lieu de` http://site.com/path`.
@@ -106,16 +93,6 @@ Les valeurs possibles sont décrites dans la [spécification Referrer Policy](ht
106
93
-**`"strict-origin"`** -- envoyer uniquement l'origine, ne pas envoyer de `Referer` pour les requêtes HTTPS → HTTP.
107
94
-**`"strict-origin-when-cross-origin"`** -- pour la même origine envoyer un `Referer` complet, pour une cross-origin, envoyer uniquement l'origine, à moins que ce ne soit HTTPS → requête HTTP, puis ne rien envoyer.
108
95
-**`"unsafe-url"`** -- toujours envoyer l'url complète dans `Referer`, même pour les requêtes HTTPS → HTTP
109
-
=======
110
-
-**`"no-referrer-when-downgrade"`** -- the default value: full `Referer` is always sent, unless we send a request from HTTPS to HTTP (to the less secure protocol).
111
-
-**`"no-referrer"`** -- never send `Referer`.
112
-
-**`"origin"`** -- only send the origin in `Referer`, not the full page URL, e.g. only `http://site.com` instead of `http://site.com/path`.
113
-
-**`"origin-when-cross-origin"`** -- send the full `Referer` to the same origin, but only the origin part for cross-origin requests (as above).
114
-
-**`"same-origin"`** -- send the full `Referer` to the same origin, but no `Referer` for cross-origin requests.
115
-
-**`"strict-origin"`** -- send only the origin, not the `Referer` for HTTPS→HTTP requests.
116
-
-**`"strict-origin-when-cross-origin"`** -- for same-origin send the full `Referer`, for cross-origin send only the origin, unless it's HTTPS→HTTP request, then send nothing.
117
-
-**`"unsafe-url"`** -- always send the full url in `Referer`, even for HTTPS→HTTP requests.
118
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
119
96
120
97
Voici un tableau avec toutes les combinaisons :
121
98
@@ -130,21 +107,13 @@ Voici un tableau avec toutes les combinaisons :
130
107
|`"strict-origin-when-cross-origin"`| full | origin | - |
131
108
|`"unsafe-url"`| full | full | full |
132
109
133
-
<<<<<<< HEAD
134
110
Disons que nous avons une zone d'administration avec une structure d'URL qui ne devrait pas être connue de l'extérieur du site.
135
-
=======
136
-
Let's say we have an admin zone with a URL structure that shouldn't be known from outside of the site.
137
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
138
111
139
112
Si nous envoyons un `fetch`, alors par défaut, il envoie toujours l'en-tête `Referer` avec l'url complète de notre page (sauf lorsque nous demandons de HTTPS à HTTP, alors pas de `Referer`).
140
113
141
114
Par exemple : `Referer: https://javascript.info/admin/secret/paths`.
142
115
143
-
<<<<<<< HEAD
144
116
Si nous souhaitons que d'autres sites Web connaissent uniquement la partie origin, pas le chemin URL, nous pouvons définir l'option :
145
-
=======
146
-
If we'd like other websites know only the origin part, not the URL-path, we can set the option:
147
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
148
117
149
118
```js
150
119
fetch('https://another.com/page', {
@@ -160,11 +129,7 @@ Sa seule différence par rapport au comportement par défaut est que pour les re
160
129
```smart header="La Referrer policy n'est pas seulement pour `fetch`"
161
130
La Referrer policy, décrite dans la [spécification](https://w3c.github.io/webappsec-referrer-policy/), n'est pas seulement pour `fetch`, mais plus globale.
162
131
163
-
<<<<<<< HEAD
164
132
Plus particulièrement, il est possible de définir la politique par défaut pour toute la page en utilisant l'en-tête HTTP `Referrer-Policy`, ou par lien, avec `<a rel="noreferrer">`.
165
-
=======
166
-
In particular, it's possible to set the default policy for the whole page using the `Referrer-Policy` HTTP header, or per-link, with `<a rel="noreferrer">`.
167
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
168
133
```
169
134
170
135
## mode
@@ -187,29 +152,16 @@ L'option `credentials` spécifie si `fetch` doit envoyer des cookies et des en-t
187
152
188
153
## cache
189
154
190
-
<<<<<<< HEAD
191
-
Par défaut, les requêtes `fetch` utilisent la mise en cache HTTP standard. Autrement dit, il honore les en-têtes `Expires`,`Cache-Control`, envoie `If-Modified-Since`, et ainsi de suite. Tout comme les requêtes HTTP régulières.
192
-
=======
193
-
By default, `fetch` requests make use of standard HTTP-caching. That is, it respects the `Expires` and `Cache-Control` headers, sends `If-Modified-Since` and so on. Just like regular HTTP-requests do.
194
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
155
+
Par défaut, les requêtes `fetch` utilisent la mise en cache HTTP standard. Autrement dit, il honore les en-têtes `Expires` et `Cache-Control`, envoie `If-Modified-Since`, et ainsi de suite. Tout comme les requêtes HTTP régulières.
195
156
196
157
Les options `cache` permettent d'ignorer le cache HTTP ou d'affiner son utilisation :
197
158
198
-
<<<<<<< HEAD
199
159
- **`"default"`** -- `fetch` utilise des règles et des en-têtes de cache HTTP standard,
200
160
- **`"no-store"`** -- ignore totalement le cache HTTP, ce mode devient la valeur par défaut si nous définissons un en-tête `If-Modified-Since`, `If-None-Match`, `If-Unmodified-Since`, `If-Match`, ou `If-Range`,
201
161
- **`"reload"`** -- ne prenez pas le résultat du cache HTTP (le cas échéant), mais remplissez le cache avec la réponse (si les en-têtes de réponse le permettent),
202
162
- **`"no-cache"`** -- créer une requête conditionnelle s'il y a une réponse mise en cache, et sinon une requête normale. Remplissez le cache HTTP avec la réponse,
203
163
- **`"force-cache"`** -- utilise une réponse du cache HTTP, même si elle est périmée. S'il n'y a pas de réponse dans le cache HTTP, fait une requête HTTP régulière, se comporte normalement,
204
164
- **`"only-if-cached"`** -- utilise une réponse du cache HTTP, même si elle est périmée. S'il n'y a pas de réponse dans le cache HTTP, alors erreur. Fonctionne uniquement lorsque le `mode` est sur `"same-origin"`.
205
-
=======
206
-
- **`"default"`** -- `fetch` uses standard HTTP-cache rules and headers,
207
-
- **`"no-store"`** -- totally ignore HTTP-cache, this mode becomes the default if we set a header `If-Modified-Since`, `If-None-Match`, `If-Unmodified-Since`, `If-Match`, or `If-Range`,
208
-
- **`"reload"`** -- don't take the result from HTTP-cache (if any), but populate the cache with the response (if the response headers permit this action),
209
-
- **`"no-cache"`** -- create a conditional request if there is a cached response, and a normal request otherwise. Populate HTTP-cache with the response,
210
-
- **`"force-cache"`** -- use a response from HTTP-cache, even if it's stale. If there's no response in HTTP-cache, make a regular HTTP-request, behave normally,
211
-
- **`"only-if-cached"`** -- use a response from HTTP-cache, even if it's stale. If there's no response in HTTP-cache, then error. Only works when `mode` is `"same-origin"`.
212
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
213
165
214
166
## redirect
215
167
@@ -225,11 +177,7 @@ L'option `redirect` permet de changer cela :
225
177
226
178
L'option `intégrité` permet de vérifier si la réponse correspond à la somme de contrôle connue à l'avance.
227
179
228
-
<<<<<<< HEAD
229
180
Comme décrit dans la [spécification](https://w3c.github.io/webappsec-subresource-integrity/), les fonctions de hachage prises en charge sont SHA-256, SHA-384 et SHA-512, il peut y en avoir d'autres en fonction du navigateur.
230
-
=======
231
-
As described in the [specification](https://w3c.github.io/webappsec-subresource-integrity/), supported hash-functions are SHA-256, SHA-384, and SHA-512, there might be others depending on the browser.
232
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
233
181
234
182
Par exemple, nous téléchargeons un fichier et nous savons que sa somme de contrôle SHA-256 est "abcdef" (une vraie somme de contrôle est plus longue, bien sûr).
235
183
@@ -247,19 +195,11 @@ Ensuite, `fetch` calculera SHA-256 seul et le comparera avec notre chaîne de ca
247
195
248
196
L'option `keepalive` indique que la demande peut "survivre" à la page Web qui l'a initiée.
249
197
250
-
<<<<<<< HEAD
251
198
Par exemple, nous recueillons des statistiques sur la façon dont le visiteur actuel utilise notre page (clics de souris, fragments de page qu'il consulte), pour analyser et améliorer l'expérience utilisateur.
252
199
253
200
Lorsque le visiteur quitte notre page -- nous aimerions enregistrer les données sur notre serveur.
254
201
255
202
Nous pouvons utiliser l'événement `window.onunload` pour cela :
256
-
=======
257
-
For example, we gather statistics on how the current visitor uses our page (mouse clicks, page fragments he views), to analyze and improve the user experience.
258
-
259
-
When the visitor leaves our page -- we'd like to save the data to our server.
Normalement, lorsqu'un document est déchargé, toutes les requêtes réseau associées sont abandonnées. Mais l'option `keepalive` indique au navigateur d'exécuter la requête en arrière-plan, même après avoir quitté la page. Cette option est donc essentielle à la réussite de notre demande.
278
-
=======
279
-
Normally, when a document is unloaded, all associated network requests are aborted. But the `keepalive` option tells the browser to perform the request in the background, even after it leaves the page. So this option is essential for our request to succeed.
280
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
281
217
282
218
Elle a quelques limitations :
283
219
284
-
<<<<<<< HEAD
285
220
- Nous ne pouvons pas envoyer des mégaoctets : la limite de corps pour les requêtes `keepalive` est de 64kb.
286
221
- Si nous avons besoin de rassembler beaucoup de statistiques sur la visite, nous devons les envoyer régulièrement par paquets, afin qu'il ne reste plus grand-chose pour la dernière requête `onunload`.
287
222
- Cette limite s'applique à toutes les demandes `keepalive` ensemble. En d'autres termes, nous pouvons effectuer plusieurs requêtes `keepalive` en parallèle, mais la somme de leurs longueurs de corps ne doit pas dépasser 64 Kb.
288
223
- Nous ne pouvons pas gérer la réponse du serveur si le document est déchargé. Donc, dans notre exemple, `fetch` réussira grâce à `keepalive`, mais les fonctions suivantes ne fonctionneront pas.
289
224
- Dans la plupart des cas, comme l'envoi de statistiques, ce n'est pas un problème, car le serveur accepte simplement les données et envoie généralement une réponse vide à de telles demandes.
290
-
=======
291
-
- We can't send megabytes: the body limit for `keepalive` requests is 64KB.
292
-
- If we need to gather a lot of statistics about the visit, we should send it out regularly in packets, so that there won't be a lot left for the last `onunload` request.
293
-
- This limit applies to all `keepalive` requests together. In other words, we can perform multiple `keepalive` requests in parallel, but the sum of their body lengths should not exceed 64KB.
294
-
- We can't handle the server response if the document is unloaded. So in our example `fetch` will succeed due to `keepalive`, but subsequent functions won't work.
295
-
- In most cases, such as sending out statistics, it's not a problem, as the server just accepts the data and usually sends an empty response to such requests.
0 commit comments