103 Early Hints
Le code de statut de réponse informative HTTP 103 Early Hints peut être envoyé par un serveur pendant qu'il prépare encore une réponse, avec des indices sur les sites et ressources auxquels la réponse finale fait référence.
Cela permet à un navigateur de pré-connecter à des sites ou de commencer à précharger des ressources avant même que le serveur ait préparé et envoyé la réponse finale.
Les ressources préchargées indiquées par les indices précoces sont récupérées par le client dès que les indices sont reçus.
La réponse d'indice précoce est principalement destinée à être utilisée avec l'en-tête Link, qui indique les ressources à charger.
Elle peut aussi contenir un en-tête Content-Security-Policy appliqué lors du traitement de l'indice précoce.
Un serveur peut envoyer plusieurs réponses 103, par exemple après une redirection.
Les navigateurs ne traitent que la première réponse d'indices précoces, et cette réponse doit être ignorée si la requête aboutit à une redirection inter-origine.
Note :
Pour des raisons de compatibilité et de sécurité, il est recommandé de n'envoyer des réponses HTTP 103 Early Hints que sur HTTP/2 ou version ultérieure (angl.) sauf si le client est connu pour gérer correctement les réponses informatives.
La plupart des navigateurs limitent la prise en charge à HTTP/2 ou version ultérieure pour cette raison. Voir la compatibilité des navigateurs ci-dessous. Malgré cela, les exemples ci-dessous utilisent la notation de style HTTP/1.1 par convention.
Syntaxe
103 Early Hints
Exemples
Exemple de pré-connexion
La réponse d'indice précoce 103 suivante montre une réponse où le serveur indique que le client peut vouloir pré-connecter à une origine particulière (https://cdn.example.com).
Comme pour l'attribut HTML rel=preconnect, il s'agit d'un indice que la page a probablement besoin de ressources provenant de l'origine cible, et que le navigateur peut améliorer l'expérience utilisateur en initiant préventivement une connexion vers cette origine.
103 Early Hints
Link: <https://cdn.example.com>; rel=preconnect, <https://cdn.example.com>; rel=preconnect; crossorigin
Cet exemple pré-connecte deux fois à https://cdn.example.com :
- La première connexion est utilisée pour charger des ressources pouvant être récupérées sans CORS, comme des images.
- La seconde connexion inclut l'attribut
crossoriginet est utilisée pour charger des ressources protégées par CORS, comme des polices.
Les ressources protégées par CORS doivent être récupérées avec une connexion totalement distincte. Si vous n'avez besoin que d'un seul type de ressource depuis une origine, il suffit de pré-connecter une seule fois.
Ensuite, le serveur envoie la réponse finale.
Celle-ci inclut un préchargement de police avec crossorigin et une balise <img> chargée depuis l'origine supplémentaire.
200 OK
Content-Type: text/html
<!doctype html>
...
<link rel="preload" href="https://cdn.example.com/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
...
<img src="https://cdn.example.com/images/image.jpg" alt="">
...
Exemple de préchargement
La réponse d'indice précoce 103 suivante indique qu'une feuille de style style.css peut être nécessaire dans la réponse finale.
103 Early Hints
Link: </style.css>; rel=preload; as=style
Ensuite, le serveur envoie la réponse finale. Celle-ci inclut un lien vers la feuille de style, qui a peut-être déjà été préchargée grâce à l'indice précoce.
200 OK
Content-Type: text/html
<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
Réponse d'indice précoce avec CSP
L'exemple suivant montre la même réponse d'indice précoce mais avec un en-tête Content-Security-Policy inclus.
103 Early Hints
Content-Security-Policy: style-src: self;
Link: </style.css>; rel=preload; as=style
La réponse précoce limite le préchargement à la même origine que la requête. La feuille de style est préchargée si l'origine correspond.
La réponse finale peut définir la CSP à none, comme ci-dessous.
La feuille de style a déjà été préchargée, mais n'est pas utilisée lors de l'affichage de la page.
200 OK
Content-Security-Policy: style-src: none;
Content-Type: text/html
<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
Spécifications
| Spécification |
|---|
| An HTTP Status Code for Indicating Hints # early-hints |
| HTML # early-hints |
Compatibilité des navigateurs
Voir aussi
- L'en-tête HTTP
Link - Partage des ressources entre origines (CORS)
- Content Security Policy (CSP)
rel="preconnect"(attribut de l'élément<link>)rel="preload"(attribut de l'élément<link>)fetchpriority(attribut de l'élément<link>)- Early Hints update: How Cloudflare, Google, and Shopify are working together to build a faster Internet for everyone (angl.)