En-tête Sec-Fetch-Mode
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2023.
Vous voulez une meilleure prise en charge pour cette fonctionnalité ? Dites-nous pourquoi.
L'en-tête de métadonnées de requête de récupération HTTP Sec-Fetch-Mode indique le mode de la requête.
De manière générale, cela permet à un serveur de distinguer les requêtes provenant d'un·e utilisateur·ice naviguant entre des pages HTML et les requêtes visant à charger des images et d'autres ressources.
Par exemple, cet en-tête contient navigate pour les requêtes de navigation de niveau supérieur, tandis que no-cors est utilisé pour le chargement d'une image.
L'en-tête n'est inclus que dans les requêtes vers des URL potentiellement fiables.
| Type d'en-tête | En-tête de métadonnées de requête de récupération |
|---|---|
| En-tête de requête interdit | Oui (préfixe Sec-) |
| En-tête de requête autorisé par CORS | Non |
Syntaxe
Sec-Fetch-Mode: cors
Sec-Fetch-Mode: navigate
Sec-Fetch-Mode: no-cors
Sec-Fetch-Mode: same-origin
Sec-Fetch-Mode: websocket
Les serveurs doivent ignorer cet en-tête s'il contient une autre valeur.
Directives
Note :
Ces directives correspondent aux valeurs de Request.mode.
cors-
La requête est une requête du protocole CORS.
-
La requête est initiée par la navigation entre des documents HTML.
no-cors-
La requête est une requête no-cors (voir
Request.mode). same-origin-
La requête est effectuée depuis la même origine que la ressource demandée.
websocket-
La requête est effectuée pour établir une connexion WebSocket.
Exemples
Utiliser Sec-Fetch-Mode
Si un·e utilisateur·ice clique sur un lien d'une page vers une autre page de la même origine, la requête résultante a les en-têtes suivants (notez que le mode est navigate) :
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Une requête inter-site générée par un élément HTML <img> aboutit à une requête avec les en-têtes HTTP suivants (notez que le mode est no-cors) :
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
Spécifications
| Spécification |
|---|
| Fetch Metadata Request Headers # sec-fetch-mode-header |
Compatibilité des navigateurs
Voir aussi
- Les en-têtes de métadonnées de requête de récupération
Sec-Fetch-Dest,Sec-Fetch-Site,Sec-Fetch-User - Protéger vos ressources contre les attaques web avec les métadonnées de récupération (angl.) (web.dev)
- Terrain d'essai des en-têtes de métadonnées de requête de récupération (angl.) (secmetadata.appspot.com)