diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:50:13 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:56 +0200 |
commit | 0fe03b92344c0f9b0d4ada2146d4480997ab2e25 (patch) | |
tree | b2b704c9e2987a769980ad0d619ff1bd879c7e34 /files/fr/web/http/cors | |
parent | df12ec2617159d79d2ea959389358ef52423f9ff (diff) | |
download | translated-content-0fe03b92344c0f9b0d4ada2146d4480997ab2e25.tar.gz translated-content-0fe03b92344c0f9b0d4ada2146d4480997ab2e25.tar.bz2 translated-content-0fe03b92344c0f9b0d4ada2146d4480997ab2e25.zip |
convert content to md
Diffstat (limited to 'files/fr/web/http/cors')
7 files changed, 437 insertions, 516 deletions
diff --git a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md index e113a3438b..37bf96589a 100644 --- a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md +++ b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md @@ -12,32 +12,30 @@ tags: translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginNeCorrespondPas --- -<div>{{HTTPSidebar}}</div> +{{HTTPSidebar}} -<h2 id="Symptomes">Symptomes</h2> +## Symptomes -<pre class="syntaxbox">Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz »</pre> + Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz » -<h2 id="Quel_est_le_problème">Quel est le problème ?</h2> +## Quel est le problème ? -<p>En clair, l'origine de la demande ne correspond à aucune des origines autorisées par l'en-tête {{HTTPHeader("Access-Control-Allow-Origin")}}.</p> +En clair, l'origine de la demande ne correspond à aucune des origines autorisées par l'en-tête {{HTTPHeader("Access-Control-Allow-Origin")}}. -<p>Cette erreur peut également se produire si la réponse contient plus d'un en-tête <code>Access-Control-Allow-Origin</code>.</p> +Cette erreur peut également se produire si la réponse contient plus d'un en-tête `Access-Control-Allow-Origin`. -<p>Si vous contrôlez le serveur auquel votre code accède via une requête CORS, assurez-vous qu'il est configuré pour mentionner votre origine dans son entête <code>Access-Control-Allow-Origin</code>, avec un seul entête de ce type dans les réponses. Cet en-tête accepte une liste d'origines délimitée par des virgules, de sorte que l'ajout d'une nouvelle origine n'est pas difficile.</p> +Si vous contrôlez le serveur auquel votre code accède via une requête CORS, assurez-vous qu'il est configuré pour mentionner votre origine dans son entête `Access-Control-Allow-Origin`, avec un seul entête de ce type dans les réponses. Cet en-tête accepte une liste d'origines délimitée par des virgules, de sorte que l'ajout d'une nouvelle origine n'est pas difficile. -<p>Par exemple, dans Apache, ajoutez une ligne comme celle qui suit à la configuration du serveur (dans la section appropriée <code><Directory></code>, <code><Location></code>, <code><Files></code>, ou <code><VirtualHost></code>). La configuration se trouve généralement dans un fichier <code>.conf</code> (<code>httpd.conf</code> et <code>apache.conf</code> sont des noms couramment attribués à ces fichiers), ou dans un fichier <code>.htaccess</code>.</p> +Par exemple, dans Apache, ajoutez une ligne comme celle qui suit à la configuration du serveur (dans la section appropriée `<Directory>`, `<Location>`, `<Files>`, ou `<VirtualHost>`). La configuration se trouve généralement dans un fichier `.conf` (`httpd.conf` et `apache.conf` sont des noms couramment attribués à ces fichiers), ou dans un fichier `.htaccess`. -<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> + Header set Access-Control-Allow-Origin 'origin-list' -<p>Pour Nginx, la commande pour mettre en place cet entête est :</p> +Pour Nginx, la commande pour mettre en place cet entête est : -<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> + add_header 'Access-Control-Allow-Origin' 'origin-list' -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/CORS/Errors">Erreurs CORS</a></li> - <li>Glossaire : {{Glossary("CORS")}}</li> - <li><a href="/fr/docs/Web/HTTP/CORS">Introduction au CORS</a></li> -</ul> +- [Erreurs CORS](https://developer.mozilla.org/fr/docs/Web/HTTP/CORS/Errors) +- Glossaire : {{Glossary("CORS")}} +- [Introduction au CORS](/fr/docs/Web/HTTP/CORS) diff --git a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md index 1745ec854f..2e32ab6224 100644 --- a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md +++ b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md @@ -16,20 +16,18 @@ tags: translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed original_slug: Web/HTTP/CORS/Errors/CORSNAPasRéussi --- -<div>{{HTTPSidebar}}</div> +{{HTTPSidebar}} -<h2 id="Raison">Raison</h2> +## Raison -<pre class="syntaxbox">Raison: la requête CORS a échoué</pre> + Raison: la requête CORS a échoué -<h2 id="Qu'est_ce_qui_ne_s'est_pas_bien_passé">Qu'est ce qui ne s'est pas bien passé ?</h2> +## Qu'est ce qui ne s'est pas bien passé ? -<p>La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base.</p> +La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">Erreurs CORS</a></li> - <li>Grammaire: {{Glossary("CORS")}}</li> - <li><a href="/en-US/docs/Web/HTTP/CORS">Introduction CORS</a></li> -</ul> +- [Erreurs CORS](/en-US/docs/Web/HTTP/CORS/Errors) +- Grammaire: {{Glossary("CORS")}} +- [Introduction CORS](/en-US/docs/Web/HTTP/CORS) diff --git a/files/fr/web/http/cors/errors/corsdisabled/index.md b/files/fr/web/http/cors/errors/corsdisabled/index.md index f635378215..cdd6928b0f 100644 --- a/files/fr/web/http/cors/errors/corsdisabled/index.md +++ b/files/fr/web/http/cors/errors/corsdisabled/index.md @@ -22,23 +22,23 @@ tags: translation_of: Web/HTTP/CORS/Errors/CORSDisabled original_slug: Web/HTTP/CORS/Errors/CORSDesactive --- -<div>{{HTTPSidebar}}</div> +{{HTTPSidebar}} -<h2 id="reason">Raison</h2> +## Raison -<pre class="brush: html">Reason: CORS disabled -(Raison : CORS désactivé)</pre> +```html +Reason: CORS disabled +(Raison : CORS désactivé) +``` -<h2 id="what_went_wrong">Quel est le problème ?</h2> +## Quel est le problème ? -<p>Une requête HTTP nécessitant le <a href="/fr/docs/Glossary/CORS">CORS</a> a été tentée, mais le CORS est désactivé sur le navigateur de l'utilisateur. Lorsque cela se produit, l'utilisateur doit réactiver CORS dans le navigateur.</p> +Une requête HTTP nécessitant le [CORS](/fr/docs/Glossary/CORS) a été tentée, mais le CORS est désactivé sur le navigateur de l'utilisateur. Lorsque cela se produit, l'utilisateur doit réactiver CORS dans le navigateur. -<p>Pour Firefox, la préférence qui désactive le CORS est <code>content.cors.disable</code>. Définir cette préférence avec <code>true</code> désactive le CORS. Dans ce cas, les requêtes CORS échoueront toujours avec cette erreur.</p> +Pour Firefox, la préférence qui désactive le CORS est `content.cors.disable`. Définir cette préférence avec `true` désactive le CORS. Dans ce cas, les requêtes CORS échoueront toujours avec cette erreur. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/HTTP/CORS/Errors">Les erreurs CORS</a></li> - <li>Le terme <a href="/fr/docs/Glossary/CORS">CORS</a> sur le glossaire</li> - <li><a href="/fr/docs/Web/HTTP/CORS">Introduction au CORS</a></li> -</ul> +- [Les erreurs CORS](/fr/docs/Web/HTTP/CORS/Errors) +- Le terme [CORS](/fr/docs/Glossary/CORS) sur le glossaire +- [Introduction au CORS](/fr/docs/Web/HTTP/CORS) diff --git a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md index e49b01ae2a..6896531f36 100644 --- a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md +++ b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md @@ -4,46 +4,40 @@ slug: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginManquant --- -<div>{{HTTPSidebar}}</div> +{{HTTPSidebar}} -<h2 id="Symptomes">Symptomes</h2> +## Symptomes -<pre class="syntaxbox"> Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. </pre> + Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. -<h2 id="Quel_est_le_problème">Quel est le problème ?</h2> +## Quel est le problème ? -<p>La réponse à la requête {{Glossary("CORS")}} ne contient pas l'en-tête requis {{HTTPHeader("Access-Control-Allow-Origin")}}, dont la fonction est de déterminer si le domaine à l'origine de la requête est autorisé à accéder à cette ressource.</p> +La réponse à la requête {{Glossary("CORS")}} ne contient pas l'en-tête requis {{HTTPHeader("Access-Control-Allow-Origin")}}, dont la fonction est de déterminer si le domaine à l'origine de la requête est autorisé à accéder à cette ressource. -<p>Si vous avez le contrôle du serveur, vous pouvez ajouter l'origine de la requête à la liste des domaines autorisés à accéder aux ressources du serveur en l'ajoutant aux valeurs de l'en-tête <code>Access-Control-Allow-Origin</code>.</p> +Si vous avez le contrôle du serveur, vous pouvez ajouter l'origine de la requête à la liste des domaines autorisés à accéder aux ressources du serveur en l'ajoutant aux valeurs de l'en-tête `Access-Control-Allow-Origin`. -<p>Par exemple, pour autoriser le site https://amazing.site à accéder aux resources avec CORS, le header doit être comme suit :</p> +Par exemple, pour autoriser le site https\://amazing.site à accéder aux resources avec CORS, le header doit être comme suit : -<pre>Access-Control-Allow-Origin: https://amazing.site</pre> + Access-Control-Allow-Origin: https://amazing.site -<p>Vous pouvez aussi configurer le serveur pour autoriser tous les domaines à accéder aux ressources avec le caractère générique <code>*</code>. Ceci ne devrait être utilisé que pour des APIs publiques. Les APIs privées ne devraient jamais utiliser <code>*</code>, et devraient à la place utiliser un domaine ou un ensemble de domaines. De plus, l'astérisque ne fonctionne que pour les requêtes avec l'attribut {{htmlattrxref("crossorigin")}} ayant comme valeur <code>anonymous</code>.</p> +Vous pouvez aussi configurer le serveur pour autoriser tous les domaines à accéder aux ressources avec le caractère générique `*`. Ceci ne devrait être utilisé que pour des APIs publiques. Les APIs privées ne devraient jamais utiliser `*`, et devraient à la place utiliser un domaine ou un ensemble de domaines. De plus, l'astérisque ne fonctionne que pour les requêtes avec l'attribut {{htmlattrxref("crossorigin")}} ayant comme valeur `anonymous`. -<pre>Access-Control-Allow-Origin: *</pre> + Access-Control-Allow-Origin: * -<div class="warning"> -<p><strong>Attention :</strong> Autoriser n'importe quel site à accéder à une API privée est une mauvaise idée.</p> -</div> +> **Attention :** Autoriser n'importe quel site à accéder à une API privée est une mauvaise idée. -<p>Pour autoriser n'importe quel site à faire des requêtes CORS <em>sans</em> utiliser le caractère générique <code>*</code> (par exemple, pour fournir des authentifiants), votre serveur doit lire la valeur de l'entête <code>Origin</code> de la requête et l'utiliser dans <code>Access-Control-Allow-Origin</code>, tout en ajoutant une entête <code>Vary: Origin</code> pour indiquer que certaines entêtes sont définies dynamiquement selon leur origine.</p> +Pour autoriser n'importe quel site à faire des requêtes CORS _sans_ utiliser le caractère générique `*` (par exemple, pour fournir des authentifiants), votre serveur doit lire la valeur de l'entête `Origin` de la requête et l'utiliser dans `Access-Control-Allow-Origin`, tout en ajoutant une entête `Vary: Origin` pour indiquer que certaines entêtes sont définies dynamiquement selon leur origine. -<p>L'instruction exacte pour définir les entêtes dépend de votre serveur Web. Par exemple, avec Apache, ajouter (dans la section <code><Directory></code>, <code><Location></code>, <code><Files></code>, ou <code><VirtualHost></code> appropriée) la ligne ci-dessous au fichier de configuration. Le fichier de configuration est en général un <code>.conf</code> (<code>httpd.conf</code> et <code>apache.conf</code> sont les noms les plus communs) ou un fichier nommé <code>.htaccess</code>.</p> +L'instruction exacte pour définir les entêtes dépend de votre serveur Web. Par exemple, avec Apache, ajouter (dans la section `<Directory>`, `<Location>`, `<Files>`, ou `<VirtualHost>` appropriée) la ligne ci-dessous au fichier de configuration. Le fichier de configuration est en général un `.conf` (`httpd.conf` et `apache.conf` sont les noms les plus communs) ou un fichier nommé `.htaccess`. -<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> + Header set Access-Control-Allow-Origin 'origin-list' -<p>Avec Nginx, la commande pour créer l'en-tête est :</p> +Avec Nginx, la commande pour créer l'en-tête est : -<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> + add_header 'Access-Control-Allow-Origin' 'origin-list' +## Voir aussi - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/HTTP/CORS/Errors">Erreurs CORS</a></li> - <li>Glossaire: {{Glossary("CORS")}}</li> - <li><a href="/fr/docs/Web/HTTP/CORS">Introduction au CORS</a></li> -</ul> +- [Erreurs CORS](/fr/docs/Web/HTTP/CORS/Errors) +- Glossaire: {{Glossary("CORS")}} +- [Introduction au CORS](/fr/docs/Web/HTTP/CORS) diff --git a/files/fr/web/http/cors/errors/corsrequestnothttp/index.md b/files/fr/web/http/cors/errors/corsrequestnothttp/index.md index 640ac4c7b4..7ad0885f78 100644 --- a/files/fr/web/http/cors/errors/corsrequestnothttp/index.md +++ b/files/fr/web/http/cors/errors/corsrequestnothttp/index.md @@ -15,29 +15,27 @@ tags: - console translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp --- -<div>{{HTTPSidebar}}</div> +{{HTTPSidebar}} -<h2 id="Raison">Raison</h2> +## Raison -<pre class="syntaxbox">Raison : la requête CORS n’utilise pas http.</pre> + Raison : la requête CORS n’utilise pas http. -<h2 id="Quest_ce_qui_na_pas_fonctionné">Qu'est ce qui n'a pas fonctionné ?</h2> +## Qu'est ce qui n'a pas fonctionné ? -<p>Les requêtes {{Glossary("CORS")}} ne peuvent utiliser que les URL HTTPS, mais l'URL spécifiée par la requête est d'un type différent. Cela se produit souvent si l'URL spécifie un fichier local, en utilisant un URL de la forme <code>file:///</code>.</p> +Les requêtes {{Glossary("CORS")}} ne peuvent utiliser que les URL HTTPS, mais l'URL spécifiée par la requête est d'un type différent. Cela se produit souvent si l'URL spécifie un fichier local, en utilisant un URL de la forme `file:///`. -<p>Pour résoudre ce problème, assurez-vous simplement d'utiliser les URL HTTPS lorsque vous émettez des requêtes impliquant CORS , comme {{domxref("XMLHttpRequest")}}, <a href="/fr/docs/Web/API/Fetch_API">Fetch</a> APIs, Web Fonts (<code>@font-face</code>), <a href="/fr/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL textures</a>, et des stylesheets XSL.</p> +Pour résoudre ce problème, assurez-vous simplement d'utiliser les URL HTTPS lorsque vous émettez des requêtes impliquant CORS , comme {{domxref("XMLHttpRequest")}}, [Fetch](/fr/docs/Web/API/Fetch_API) APIs, Web Fonts (`@font-face`), [WebGL textures](/fr/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL), et des stylesheets XSL. -<h3 id="Sécurité_des_fichiers_locaux_dans_Firefox_68">Sécurité des fichiers locaux dans Firefox 68</h3> +### Sécurité des fichiers locaux dans Firefox 68 -<p>Lorsqu'un utilisateur ouvrait une page en utilisant un URI <code>file:///</code> dans Firefox 67 et antérieur, l'origine de la page était définie comme le répertoire à partir duquel la page était ouverte. Les ressources du même répertoire et de ses sous-répertoires étaient traitées comme ayant la même origine aux fins de la règle de la même origine de la CORS.</p> +Lorsqu'un utilisateur ouvrait une page en utilisant un URI `file:///` dans Firefox 67 et antérieur, l'origine de la page était définie comme le répertoire à partir duquel la page était ouverte. Les ressources du même répertoire et de ses sous-répertoires étaient traitées comme ayant la même origine aux fins de la règle de la même origine de la CORS. -<p>En réponse au <a href="https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730">CVE-2019-11730</a>, Firefox 68 et les versions ultérieures définissent l'origine d'une page ouverte à l'aide d'un URI <code>file:///</code> comme unique. Par conséquent, les autres ressources du même répertoire ou de ses sous-répertoires ne satisfont plus à la règle de la même origine de la COROS. Ce nouveau comportement est activé par défaut en utilisant la préférence <code>privacy.file_unique_origin</code>.</p> +En réponse au [CVE-2019-11730](https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730), Firefox 68 et les versions ultérieures définissent l'origine d'une page ouverte à l'aide d'un URI `file:///` comme unique. Par conséquent, les autres ressources du même répertoire ou de ses sous-répertoires ne satisfont plus à la règle de la même origine de la COROS. Ce nouveau comportement est activé par défaut en utilisant la préférence `privacy.file_unique_origin`. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/HTTP/CORS/Errors">Erreurs liées à CORS</a></li> - <li>Glossaire: {{Glossary("CORS")}}</li> - <li><a href="/fr/docs/Web/HTTP/CORS">Introduction à CORS</a></li> - <li><a href="/fr/docs/Learn/Common_questions/What_is_a_URL">C'est quoi une URL?</a></li> -</ul> +- [Erreurs liées à CORS](/fr/docs/Web/HTTP/CORS/Errors) +- Glossaire: {{Glossary("CORS")}} +- [Introduction à CORS](/fr/docs/Web/HTTP/CORS) +- [C'est quoi une URL?](/fr/docs/Learn/Common_questions/What_is_a_URL) diff --git a/files/fr/web/http/cors/errors/index.md b/files/fr/web/http/cors/errors/index.md index 17fa5f8e9b..e9defcfb12 100644 --- a/files/fr/web/http/cors/errors/index.md +++ b/files/fr/web/http/cors/errors/index.md @@ -14,66 +14,56 @@ tags: - troubleshooting translation_of: Web/HTTP/CORS/Errors --- -<div>{{HTTPSidebar}}</div> +{{HTTPSidebar}} -<p><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) </span>est une norme qui permet à un serveur d'assouplir la <a href="/en-US/docs/Web/Security/Same-origin_policy">politique de même origine</a>.</p> +[Cross-Origin Resource Sharing](/en-US/docs/Web/HTTP/CORS) ({{Glossary("CORS")}}) est une norme qui permet à un serveur d'assouplir la [politique de même origine](/en-US/docs/Web/Security/Same-origin_policy). -<p>Celle-ci est utilisée pour autoriser explicitement certaines requêtes provenant d'autres sources tout en en rejetant d'autres. Par exemple, si un site offre un service intégrable, il peut être nécessaire d'assouplir certaines restrictions. La configuration d'une telle configuration CORS n'est pas nécessairement facile et peut présenter certains défis. Dans ces pages, nous examinerons quelques messages d'erreur CORS courants et comment les résoudre.</p> +Celle-ci est utilisée pour autoriser explicitement certaines requêtes provenant d'autres sources tout en en rejetant d'autres. Par exemple, si un site offre un service intégrable, il peut être nécessaire d'assouplir certaines restrictions. La configuration d'une telle configuration CORS n'est pas nécessairement facile et peut présenter certains défis. Dans ces pages, nous examinerons quelques messages d'erreur CORS courants et comment les résoudre. +Si la configuration CORS n'est pas correctement effectuée, la console du navigateur affichera une erreur du type `"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"` (`"Requête Cross-Origin bloquée : La politique de même origine interdit la lecture de la ressource distante à $somesite"` en français) indiquant que la demande a été bloquée en raison d'une violation des règles de sécurité de CORS. Cependant, ce n'est pas nécessairement une erreur de configuration. Il est possible que la demande soit en fait intentionnellement refusée par l'application web de l'utilisateur et le service externe distant. Toutefois, si le terminal est destiné à être disponible, un certain débogage est nécessaire pour y parvenir. +## Identifier le problème -<p>Si la configuration CORS n'est pas correctement effectuée, la console du navigateur affichera une erreur du type <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> (<code>"Requête Cross-Origin bloquée : La politique de même origine interdit la lecture de la ressource distante à $somesite"</code> en français) indiquant que la demande a été bloquée en raison d'une violation des règles de sécurité de CORS. Cependant, ce n'est pas nécessairement une erreur de configuration. Il est possible que la demande soit en fait intentionnellement refusée par l'application web de l'utilisateur et le service externe distant. Toutefois, si le terminal est destiné à être disponible, un certain débogage est nécessaire pour y parvenir.</p> +Pour saisir la cause de l'erreur, il faut préalablement découvrir la requête fautive, ainsi que la configuration erronée. Ces étapes peuvent être utiles au processus: -<h2 id="Identifier_le_problème">Identifier le problème</h2> +1. Rendez-vous sur le site défaillant et ouvrez les [Developer Tools](/en-US/docs/Tools). +2. Essayez de reproduir la requête qui échoue et vérifiez la [console](/en-US/docs/Tools/Web_Console) pour trouver les messages de violation CORS, ce qui tournerait autours de: -<p>Pour saisir la cause de l'erreur, il faut préalablement découvrir la requête fautive, ainsi que la configuration erronée. Ces étapes peuvent être utiles au processus:</p> +![Firefox console showing CORS error](cors-error2.png) -<ol> - <li>Rendez-vous sur le site défaillant et ouvrez les <a href="/en-US/docs/Tools">Developer Tools</a>.</li> - <li>Essayez de reproduir la requête qui échoue et vérifiez la <a href="/en-US/docs/Tools/Web_Console">console</a> pour trouver les messages de violation CORS, ce qui tournerait autours de:</li> -</ol> +Le text de l'erreur sera probablement similaire à: -<p><img alt="Firefox console showing CORS error" src="cors-error2.png"></p> + Cross-Origin Request Blocked: The Same Origin Policy disallows + reading the remote resource at https://some-url-here. (Reason: + additional information here). -<p>Le text de l'erreur sera probablement similaire à:</p> +> **Note :** Pour des raisons de sécurité, il _est impossible_ d'analyser les causes de l'erreur CORS via JavaScript. Seule une indication de l'échec de la requête sera fournie. Il faut donc absolument regarder manuellement les messages d'erreur de la console pour débugger. -<pre>Cross-Origin Request Blocked: The Same Origin Policy disallows -reading the remote resource at <em>https://some-url-here</em>. (<em>Reason: -additional information here</em>).</pre> +## Messages d'erreur CORS -<div class="note"> -<p><strong>Note :</strong> Pour des raisons de sécurité, il <em>est impossible</em> d'analyser les causes de l'erreur CORS via JavaScript. Seule une indication de l'échec de la requête sera fournie. Il faut donc absolument regarder manuellement les messages d'erreur de la console pour débugger.</p> -</div> +Firefox affiche les erreurs dans la console lors d'échec de requête CORS. Ce message contient entre autres un champ "reason" donnant un meilleur contexte quant à la raison de l'échec de la requête. Ces messages sont listés ci-dessous; chacun de ces liens pointent vers un article plus spécifique et contenant des pistes de solution. -<h2 id="Messages_derreur_CORS">Messages d'erreur CORS</h2> +- [Raison: CORS désactivé](/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled) +- [Raison: la requête CORS a échoué](/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed) +- [Raison: l'en-tête CORS ‘Origin’ ne peut pas être ajouté](/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded) +- [Raison: Requête CORS redirection externe non autorisée](/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed) +- [Raison: Requête CORS non http](/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp) +- [Raison: En-tête CORS ‘Access-Control-Allow-Origin’ manquant](/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin) +- [Raison: l'en-tête CORS ‘Access-Control-Allow-Origin’ ne correspond pas à ‘xyz’](/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin) +- [Raison: les informations d'identification ne sont pas prises en charge si l'en-tête CORS ‘Access-Control-Allow-Origin’ est ‘\*’](/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials) +- [Raison: Méthode introuvable dans l'en-tête CORS 'Access-Control-Allow-Methods’](/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound) +- [Raison: ‘true’ attendu dans l'en-tête CORS ‘Access-Control-Allow-Credentials’](/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials) +- [Raison: Échec du canal de contrôle en amont CORS](/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed) +- [Raison: jeton ‘xyz’ non valide dans l'en-tête CORS ‘Access-Control-Allow-Methods’](/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod) +- [Raison: jeton ‘xyz’ non valide dans l'en-tête CORS ‘Access-Control-Allow-Headers’](/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader) +- [Raison: jeton ‘xyz’ manquant dans l'en-tête CORS ‘Access-Control-Allow-Headers’ du canal de contrôle en amont CORS](/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight) +- [Raison: plusieurs en-têtes CORS ‘Access-Control-Allow-Origin’ ne sont pas autorisés](/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed) -<p>Firefox affiche les erreurs dans la console lors d'échec de requête CORS. Ce message contient entre autres un champ "reason" donnant un meilleur contexte quant à la raison de l'échec de la requête. Ces messages sont listés ci-dessous; chacun de ces liens pointent vers un article plus spécifique et contenant des pistes de solution.</p> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Raison: CORS désactivé</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Raison: la requête CORS a échoué</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Raison: l'en-tête CORS ‘Origin’ ne peut pas être ajouté</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Raison: Requête CORS redirection externe non autorisée</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Raison: Requête CORS non http</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Raison: En-tête CORS ‘Access-Control-Allow-Origin’ manquant</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Raison: l'en-tête CORS ‘Access-Control-Allow-Origin’ ne correspond pas à ‘xyz’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Raison: les informations d'identification ne sont pas prises en charge si l'en-tête CORS ‘Access-Control-Allow-Origin’ est ‘*’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Raison: Méthode introuvable dans l'en-tête CORS 'Access-Control-Allow-Methods’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Raison: ‘true’ attendu dans l'en-tête CORS ‘Access-Control-Allow-Credentials’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Raison: Échec du canal de contrôle en amont CORS</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Raison: jeton ‘xyz’ non valide dans l'en-tête CORS ‘Access-Control-Allow-Methods’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Raison: jeton ‘xyz’ non valide dans l'en-tête CORS ‘Access-Control-Allow-Headers’</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Raison: jeton ‘xyz’ manquant dans l'en-tête CORS ‘Access-Control-Allow-Headers’ du canal de contrôle en amont CORS</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Raison: plusieurs en-têtes CORS ‘Access-Control-Allow-Origin’ ne sont pas autorisés</a></li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Glossaire: {{Glossary("CORS")}}</li> - <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> - <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Paramètres CORS côté serveur</a></li> - <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">Image compatible CORS</a></li> - <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">Attributs des paramètres CORS</a></li> - <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – une page pour tester les requêtes CORS</li> -</ul> +- Glossaire: {{Glossary("CORS")}} +- [CORS introduction](/en-US/docs/Web/HTTP/CORS) +- [Paramètres CORS côté serveur](/en-US/docs/Web/HTTP/Server-Side_Access_Control) +- [Image compatible CORS](/en-US/docs/Web/HTML/CORS_enabled_image) +- [Attributs des paramètres CORS](/en-US/docs/Web/HTML/CORS_settings_attributes) +- <https://www.test-cors.org> – une page pour tester les requêtes CORS diff --git a/files/fr/web/http/cors/index.md b/files/fr/web/http/cors/index.md index 24d38600ac..ea22f274d4 100644 --- a/files/fr/web/http/cors/index.md +++ b/files/fr/web/http/cors/index.md @@ -10,95 +10,85 @@ tags: - cross-site translation_of: Web/HTTP/CORS --- -<div>{{HTTPSidebar}}</div> +{{HTTPSidebar}} -<p>Le « <em>Cross-origin resource sharing</em> » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant. Un agent utilisateur réalise une requête HTTP <strong>multi-origine (<em>cross-origin</em>)</strong> lorsqu'il demande une ressource provenant d'un domaine, d'un protocole ou d'un port différent de ceux utilisés pour la page courante.</p> +Le « _Cross-origin resource sharing_ » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant. Un agent utilisateur réalise une requête HTTP **multi-origine (_cross-origin_)** lorsqu'il demande une ressource provenant d'un domaine, d'un protocole ou d'un port différent de ceux utilisés pour la page courante. -<p>Prenons un exemple de requête multi-origine : une page HTML est servie depuis <code>http://domaine-a.com</code> contient un élément <code><a href="/fr/docs/Web/HTML/Element/Img#attr-src"><img> src</a></code> ciblant <code>http://domaine-b.com/image.jpg</code>. Aujourd'hui, de nombreuses pages web chargent leurs ressources (feuilles CSS, images, scripts) à partir de domaines séparés (par exemple des CDN (<em>Content Delivery Network</em> en anglais ou « Réseau de diffusion de contenu »).</p> +Prenons un exemple de requête multi-origine : une page HTML est servie depuis `http://domaine-a.com` contient un élément [`<img> src`](/fr/docs/Web/HTML/Element/Img#attr-src) ciblant `http://domaine-b.com/image.jpg`. Aujourd'hui, de nombreuses pages web chargent leurs ressources (feuilles CSS, images, scripts) à partir de domaines séparés (par exemple des CDN (_Content Delivery Network_ en anglais ou « Réseau de diffusion de contenu »). -<p>Pour des raisons de sécurité, les requêtes HTTP multi-origine émises depuis les scripts sont restreintes. Ainsi, {{domxref("XMLHttpRequest")}} et l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> respectent la règle <a href="/en-US/docs/Web/Security/Same-origin_policy">d'origine unique</a>. Cela signifie qu'une application web qui utilise ces API peut uniquement émettre des requêtes vers la même origine que celle à partir de laquelle l'application a été chargée, sauf si des en-têtes CORS sont utilisés.</p> +Pour des raisons de sécurité, les requêtes HTTP multi-origine émises depuis les scripts sont restreintes. Ainsi, {{domxref("XMLHttpRequest")}} et l'[API Fetch](/en-US/docs/Web/API/Fetch_API) respectent la règle [d'origine unique](/en-US/docs/Web/Security/Same-origin_policy). Cela signifie qu'une application web qui utilise ces API peut uniquement émettre des requêtes vers la même origine que celle à partir de laquelle l'application a été chargée, sauf si des en-têtes CORS sont utilisés. -<p><img alt="" src="cors_principle.png"></p> +![](cors_principle.png) -<p>Le CORS permet de prendre en charge des requêtes multi-origines sécurisées et des transferts de données entre des navigateurs et des serveurs web. Les navigateurs récents utilisent le CORS dans une API contenante comme {{domxref("XMLHttpRequest")}} ou <code><a href="/fr/docs/Web/API/Fetch_API">Fetch</a></code> pour aider à réduire les risques de requêtes HTTP multi-origines.</p> +Le CORS permet de prendre en charge des requêtes multi-origines sécurisées et des transferts de données entre des navigateurs et des serveurs web. Les navigateurs récents utilisent le CORS dans une API contenante comme {{domxref("XMLHttpRequest")}} ou [`Fetch`](/fr/docs/Web/API/Fetch_API) pour aider à réduire les risques de requêtes HTTP multi-origines. -<h2 id="À_qui_est_destiné_cet_article">À qui est destiné cet article ?</h2> +## À qui est destiné cet article ? -<p>Cet article est destiné à toutes et à tous.</p> +Cet article est destiné à toutes et à tous. -<p>Il pourra notamment servir aux administrateurs web, aux développeurs côté serveur ainsi qu'aux développeurs côté client. Les navigateurs récents permettent de gérer les règles de partage multi-origine côté client grâce à certaines règles et en-têtes mais cela implique également que des serveurs puissent gérer ces requêtes et réponses. Aussi, pour compléter le spectre concerné, nous vous invitons à lire d'autres articles complétant le point de vue « serveur » (par exemple <a href="/fr/docs/Web/HTTP/Server-Side_Access_Control">cet article utilisant des fragments de code PHP</a>).</p> +Il pourra notamment servir aux administrateurs web, aux développeurs côté serveur ainsi qu'aux développeurs côté client. Les navigateurs récents permettent de gérer les règles de partage multi-origine côté client grâce à certaines règles et en-têtes mais cela implique également que des serveurs puissent gérer ces requêtes et réponses. Aussi, pour compléter le spectre concerné, nous vous invitons à lire d'autres articles complétant le point de vue « serveur » (par exemple [cet article utilisant des fragments de code PHP](/fr/docs/Web/HTTP/Server-Side_Access_Control)). -<h2 id="Quelles_requêtes_utilisent_le_CORS">Quelles requêtes utilisent le CORS ?</h2> +## Quelles requêtes utilisent le CORS ? -<p>Le <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">standard CORS</a> est utilisé afin de permettre les requêtes multi-origines pour :</p> +Le [standard CORS](https://fetch.spec.whatwg.org/#http-cors-protocol) est utilisé afin de permettre les requêtes multi-origines pour : -<ul> - <li>L'utilisation des API {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a></li> - <li>Les polices web (pour récupérer des polices provenant d'autres origines lorsqu'on utilise {{cssxref("@font-face")}} en CSS), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">afin que les serveurs puissent déployer des polices TrueType uniquement chargées en <em>cross-site</em> et utilisées par les sites web qui l'autorisent</a></li> - <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL">Les textures WebGL</a></li> - <li>Les <em>frames</em> (images ou vidéo) dessinées sur un canevas avec <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code></li> - <li>Les feuilles de style (pour les accès <a href="/fr/docs/Web/CSS/CSSOM_View">CSSOM</a>)</li> - <li>Les scripts (pour les exceptions non silencieuses (<em>unmuted exceptions</em>)).</li> -</ul> +- L'utilisation des API {{domxref("XMLHttpRequest")}} ou [Fetch](/fr/docs/Web/API/Fetch_API) +- Les polices web (pour récupérer des polices provenant d'autres origines lorsqu'on utilise {{cssxref("@font-face")}} en CSS), [afin que les serveurs puissent déployer des polices TrueType uniquement chargées en _cross-site_ et utilisées par les sites web qui l'autorisent](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements) +- [Les textures WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL) +- Les _frames_ (images ou vidéo) dessinées sur un canevas avec [`drawImage`](/fr/docs/Web/API/CanvasRenderingContext2D/drawImage) +- Les feuilles de style (pour les accès [CSSOM](/fr/docs/Web/CSS/CSSOM_View)) +- Les scripts (pour les exceptions non silencieuses (_unmuted exceptions_)). -<p>Cet article propose un aperçu général de <em>Cross-Origin Resource Sharing</em> ainsi qu'un aperçu des en-têtes HTTP nécessaires.</p> +Cet article propose un aperçu général de _Cross-Origin Resource Sharing_ ainsi qu'un aperçu des en-têtes HTTP nécessaires. -<h2 id="Aperçu_fonctionnel">Aperçu fonctionnel</h2> +## Aperçu fonctionnel -<p>Le standard CORS fonctionne grâce à l'ajout de nouveaux <a href="/fr/docs/Web/HTTP/Headers">en-têtes HTTP</a> qui permettent aux serveurs de décrire un ensemble d'origines autorisées pour lire l'information depuis un navigateur web. De plus, pour les méthodes de requêtes HTTP qui entraînent des effets de bord sur les données côté serveur (notamment pour les méthodes en dehors de {{HTTPMethod("GET")}} ou pour les méthodes {{HTTPMethod("POST")}} utilisées avec certains <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types">types MIME</a>), la spécification indique que les navigateurs doivent effectuer une requête préliminaire (« <em>preflight request</em> ») et demander au serveur les méthodes prises en charges via une requête utilisant la méthode {{HTTPMethod("OPTIONS")}} puis, après approbation du serveur, envoyer la vraie requête. Les serveurs peuvent également indiquer aux clients s'il est nécessaire de fournir des informations d'authentification (que ce soit des <a href="/fr/docs/Web/HTTP/Cookies">cookies</a> ou des données d'authentification HTTP) avec les requêtes.</p> +Le standard CORS fonctionne grâce à l'ajout de nouveaux [en-têtes HTTP](/fr/docs/Web/HTTP/Headers) qui permettent aux serveurs de décrire un ensemble d'origines autorisées pour lire l'information depuis un navigateur web. De plus, pour les méthodes de requêtes HTTP qui entraînent des effets de bord sur les données côté serveur (notamment pour les méthodes en dehors de {{HTTPMethod("GET")}} ou pour les méthodes {{HTTPMethod("POST")}} utilisées avec certains [types MIME](/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types)), la spécification indique que les navigateurs doivent effectuer une requête préliminaire (« _preflight request_ ») et demander au serveur les méthodes prises en charges via une requête utilisant la méthode {{HTTPMethod("OPTIONS")}} puis, après approbation du serveur, envoyer la vraie requête. Les serveurs peuvent également indiquer aux clients s'il est nécessaire de fournir des informations d'authentification (que ce soit des [cookies](/fr/docs/Web/HTTP/Cookies) ou des données d'authentification HTTP) avec les requêtes. -<p>Les sections qui suivent évoquent les différents scénarios relatifs au CORS ainsi qu'un aperçu des en-têtes HTTP utilisés.</p> +Les sections qui suivent évoquent les différents scénarios relatifs au CORS ainsi qu'un aperçu des en-têtes HTTP utilisés. -<h2 id="Exemples_de_scénarios_pour_le_contrôle_daccès">Exemples de scénarios pour le contrôle d'accès</h2> +## Exemples de scénarios pour le contrôle d'accès -<p>Voyons ici trois scénarios qui illustrent le fonctionnement du CORS. Tous ces exemples utilisent l'objet {{domxref("XMLHttpRequest")}} qui peut être utilisé afin de faire des requêtes entre différents sites (dans les navigateurs qui prennent en charge cette fonctionnalité).</p> +Voyons ici trois scénarios qui illustrent le fonctionnement du CORS. Tous ces exemples utilisent l'objet {{domxref("XMLHttpRequest")}} qui peut être utilisé afin de faire des requêtes entre différents sites (dans les navigateurs qui prennent en charge cette fonctionnalité). -<p>Les fragments de code JavaScript (ainsi que les instances serveurs qui gèrent ces requêtes) se trouvent sur <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a> et fonctionnent pour les navigateurs qui prennent en charge {{domxref("XMLHttpRequest")}} dans un contexte multi-site.</p> +Les fragments de code JavaScript (ainsi que les instances serveurs qui gèrent ces requêtes) se trouvent sur <http://arunranga.com/examples/access-control/> et fonctionnent pour les navigateurs qui prennent en charge {{domxref("XMLHttpRequest")}} dans un contexte multi-site. -<p>Un aperçu « côté serveur » des fonctionnalités CORS se trouve dans l'article <a href="/fr/docs/Web/HTTP/Server-Side_Access_Control">Contrôle d'accès côté serveur</a>.</p> +Un aperçu « côté serveur » des fonctionnalités CORS se trouve dans l'article [Contrôle d'accès côté serveur](/fr/docs/Web/HTTP/Server-Side_Access_Control). -<h3 id="Requêtes_simples">Requêtes simples</h3> +### Requêtes simples -<p>Certaines requêtes ne nécessitent pas de <a href="#preflight">requête CORS préliminaire</a>. Dans le reste de cet article, ce sont ce que nous appellerons des requêtes « simples » (bien que la spécification {{SpecName('Fetch')}} (qui définit le CORS) n'utilise pas ce terme). Une requête simple est une requête qui respecte les conditions suivantes :</p> +Certaines requêtes ne nécessitent pas de [requête CORS préliminaire](#preflight). Dans le reste de cet article, ce sont ce que nous appellerons des requêtes « simples » (bien que la spécification {{SpecName('Fetch')}} (qui définit le CORS) n'utilise pas ce terme). Une requête simple est une requête qui respecte les conditions suivantes : -<ul> - <li>Les seules méthodes autorisées sont : - <ul> - <li>{{HTTPMethod("GET")}}</li> - <li>{{HTTPMethod("HEAD")}}</li> - <li>{{HTTPMethod("POST")}}</li> - </ul> - </li> - <li>En dehors des en-têtes paramétrés automatiquement par l'agent utilisateur (tels que {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">tout autre en-tête dont le nom fait partie de la spécification Fetch comme « nom d'en-tête interdit »</a>), les seuls en-têtes qui peuvent être paramétrés manuellement sont, selon <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">la spécification</a> : - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (cf. les contraintes supplémentaires ci-après)</li> - </ul> - </li> - <li>Les seules valeurs autorisées pour l'en-tête {{HTTPHeader("Content-Type")}} sont : - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li>Aucun gestionnaire d'évènement n'est enregistré sur aucun des objets {{domxref("XMLHttpRequestUpload")}} utilisés pour la requête, on y accède via la propriété {{domxref("XMLHttpRequest.upload")}}.</li> - <li>Aucun objet {{domxref("ReadableStream")}} n'est utilisé dans la requête.</li> -</ul> +- Les seules méthodes autorisées sont : -<div class="note"> - <p><strong>Note :</strong> Cela correspond aux classes de requêtes généralement produites par du contenu web. Aucune donnée de réponse n'est envoyée au client qui a lancé la requête sauf si le serveur envoie un en-tête approprié. Aussi, les sites qui empêchent les requêtes étrangères falsifiées ne craignent rien de nouveau.</p> -</div> + - {{HTTPMethod("GET")}} + - {{HTTPMethod("HEAD")}} + - {{HTTPMethod("POST")}} -<div class="note"> - <p><strong>Note :</strong> WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></em>, <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></em> et <em><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></em>. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification.</p> -</div> +- En dehors des en-têtes paramétrés automatiquement par l'agent utilisateur (tels que {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou [tout autre en-tête dont le nom fait partie de la spécification Fetch comme « nom d'en-tête interdit »](https://fetch.spec.whatwg.org/#forbidden-header-name)), les seuls en-têtes qui peuvent être paramétrés manuellement sont, selon [la spécification](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) : -<p>Si, par exemple, on a un contenu web situé sous le domaine <code>http://toto.example</code> qui souhaite invoquer du contenu situé sous le domaine <code>http://truc.autre</code>, on pourrait utiliser du code JavaScript semblable à ce qui suit sur <code>toto.example</code> :</p> + - {{HTTPHeader("Accept")}} + - {{HTTPHeader("Accept-Language")}} + - {{HTTPHeader("Content-Language")}} + - {{HTTPHeader("Content-Type")}} (cf. les contraintes supplémentaires ci-après) -<pre class="brush: js">var invocation = new XMLHttpRequest(); +- Les seules valeurs autorisées pour l'en-tête {{HTTPHeader("Content-Type")}} sont : + + - `application/x-www-form-urlencoded` + - `multipart/form-data` + - `text/plain` + +- Aucun gestionnaire d'évènement n'est enregistré sur aucun des objets {{domxref("XMLHttpRequestUpload")}} utilisés pour la requête, on y accède via la propriété {{domxref("XMLHttpRequest.upload")}}. +- Aucun objet {{domxref("ReadableStream")}} n'est utilisé dans la requête. + +> **Note :** Cela correspond aux classes de requêtes généralement produites par du contenu web. Aucune donnée de réponse n'est envoyée au client qui a lancé la requête sauf si le serveur envoie un en-tête approprié. Aussi, les sites qui empêchent les requêtes étrangères falsifiées ne craignent rien de nouveau. + +> **Note :** WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : _[Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language](https://bugs.webkit.org/show_bug.cgi?id=165178)_, _[Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS](https://bugs.webkit.org/show_bug.cgi?id=165566)_ et _[Switch to a blacklist model for restricted Accept headers in simple CORS requests](https://bugs.webkit.org/show_bug.cgi?id=166363)_. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification. + +Si, par exemple, on a un contenu web situé sous le domaine `http://toto.example` qui souhaite invoquer du contenu situé sous le domaine `http://truc.autre`, on pourrait utiliser du code JavaScript semblable à ce qui suit sur `toto.example` : + +```js +var invocation = new XMLHttpRequest(); var url = 'http://truc.autre/resources/public-data/'; function callOtherDomain() { @@ -108,96 +98,89 @@ function callOtherDomain() { invocation.send(); } } -</pre> - -<p>Cela entraînera un échange simple entre le client et le serveur laissant aux en-têtes CORS le soin de gérer les privilèges d'accès :</p> - -<p><img alt="" src="simple-req-updated.png"></p> - -<p>Voyons dans le détail ce que le navigateur envoie au serveur et quelle sera sa réponse :</p> - -<pre>GET /resources/public-data/ HTTP/1.1 -Host: truc.autre -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://toto.example/exemples/access-control/simpleXSInvocation.html -Origin: http://toto.example - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 00:23:53 GMT -Server: Apache/2.0.61 -Access-Control-Allow-Origin: * -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Transfer-Encoding: chunked -Content-Type: application/xml - -[XML Data] -</pre> - -<p>Les lignes 1 à 10 correspondent aux en-têtes envoyés. L'en-tête qui nous intéresse particulièrement ici est {{HTTPHeader("Origin")}}, situé à la ligne 10 : on y voit que l'invocation provient du domaine <code>http://toto.example</code>.</p> - -<p>Les lignes 13 à 22 détaillent la réponse HTTP du serveur situé sous le domaine <code>http://truc.autre</code>. Dans la réponse, le serveur renvoie un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} (visible à la ligne 16). On voit ici les en-têtes {{HTTPHeader("Origin")}} et {{HTTPHeader("Access-Control-Allow-Origin")}} pour un contrôle d'accès dans sa forme la plus simple. Ici, le serveur répond avec <code>Access-Control-Allow-Origin: *</code> ce qui signifie que la ressource peut être demandée par n'importe quel domaine. Si les propriétés de la ressource située sous <code>http://truc.autre</code> souhaitaient restreindre l'accès à la ressource à l'origine <code>http://toto.example</code>, ils auraient renvoyé :</p> - -<p><code>Access-Control-Allow-Origin: http://toto.example</code></p> - -<p>On notera que, dans ce cas, aucun autre domaine que <code>http://toto.example</code> (tel qu'identifié par l'en-tête <code>Origin</code>) ne pourra accéder à la ressource. L'en-tête <code>Access-Control-Allow-Origin</code> devrait contenir la valeur qui a été envoyée dans l'en-tête <code>Origin</code> de la requête.</p> - -<h3 id="Requêtes_nécessitant_une_requête_préliminaire">Requêtes nécessitant une requête préliminaire</h3> - -<p>À la différence des <a href="#simples">requêtes simples</a>, les requêtes préliminaires envoient d'abord une requête HTTP avec la méthode {{HTTPMethod("OPTIONS")}} vers la ressource de l'autre domaine afin de déterminer quelle requête peut être envoyée de façon sécurisée. Les requêtes entre différents sites peuvent notamment utiliser ce mécanisme de vérification préliminaire lorsque des données utilisateurs sont impliquées.</p> - -<p>Une requête devra être précédée d'une requête préliminaire si <strong>une</strong> des conditions suivantes est respectée :</p> - -<ul> - <li>La requête utilise une des méthodes suivantes : - <ul> - <li>{{HTTPMethod("PUT")}}</li> - <li>{{HTTPMethod("DELETE")}}</li> - <li>{{HTTPMethod("CONNECT")}}</li> - <li>{{HTTPMethod("OPTIONS")}}</li> - <li>{{HTTPMethod("TRACE")}}</li> - <li>{{HTTPMethod("PATCH")}}</li> - </ul> - </li> - <li><strong>Ou si</strong>, en dehors des en-têtes automatiquement paramétrés par l'agent utilisateur (comme {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">tout autre en-tête dont le nom est réservé dans la spécification</a>), la requête inclut <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">tout autre en-tête que ceux définis sur la liste blanche</a> : - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (cf. les contraintes supplémentaires ci-après)</li> - <li>{{HTTPHeader("Last-Event-ID")}}</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li><strong>Ou si</strong> l'en-tête {{HTTPHeader("Content-Type")}} possède une valeur autre que : - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li><strong>Ou si</strong> un ou plusieurs gestionnaires d'évènements sont enregistrés sur l'objet {{domxref("XMLHttpRequestUpload")}} utilisé dans la requête.</li> - <li><strong>Ou si</strong> un objet {{domxref("ReadableStream")}} est utilisé dans la requête.</li> -</ul> - -<div class="note"> - <p><strong>Note :</strong> WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></em>, <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></em> et <em><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></em>. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification.</p> -</div> - -<p>Voici un exemple d'une requête qui devra être précédée d'une requête préliminaire :</p> - -<pre class="brush: js">var invocation = new XMLHttpRequest(); +``` + +Cela entraînera un échange simple entre le client et le serveur laissant aux en-têtes CORS le soin de gérer les privilèges d'accès : + +![](simple-req-updated.png) + +Voyons dans le détail ce que le navigateur envoie au serveur et quelle sera sa réponse : + + GET /resources/public-data/ HTTP/1.1 + Host: truc.autre + User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre + Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 + Accept-Language: en-us,en;q=0.5 + Accept-Encoding: gzip,deflate + Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 + Connection: keep-alive + Referer: http://toto.example/exemples/access-control/simpleXSInvocation.html + Origin: http://toto.example + + + HTTP/1.1 200 OK + Date: Mon, 01 Dec 2008 00:23:53 GMT + Server: Apache/2.0.61 + Access-Control-Allow-Origin: * + Keep-Alive: timeout=2, max=100 + Connection: Keep-Alive + Transfer-Encoding: chunked + Content-Type: application/xml + + [XML Data] + +Les lignes 1 à 10 correspondent aux en-têtes envoyés. L'en-tête qui nous intéresse particulièrement ici est {{HTTPHeader("Origin")}}, situé à la ligne 10 : on y voit que l'invocation provient du domaine `http://toto.example`. + +Les lignes 13 à 22 détaillent la réponse HTTP du serveur situé sous le domaine `http://truc.autre`. Dans la réponse, le serveur renvoie un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} (visible à la ligne 16). On voit ici les en-têtes {{HTTPHeader("Origin")}} et {{HTTPHeader("Access-Control-Allow-Origin")}} pour un contrôle d'accès dans sa forme la plus simple. Ici, le serveur répond avec `Access-Control-Allow-Origin: *` ce qui signifie que la ressource peut être demandée par n'importe quel domaine. Si les propriétés de la ressource située sous `http://truc.autre` souhaitaient restreindre l'accès à la ressource à l'origine `http://toto.example`, ils auraient renvoyé : + +`Access-Control-Allow-Origin: http://toto.example` + +On notera que, dans ce cas, aucun autre domaine que `http://toto.example` (tel qu'identifié par l'en-tête `Origin`) ne pourra accéder à la ressource. L'en-tête `Access-Control-Allow-Origin` devrait contenir la valeur qui a été envoyée dans l'en-tête `Origin` de la requête. + +### Requêtes nécessitant une requête préliminaire + +À la différence des [requêtes simples](#simples), les requêtes préliminaires envoient d'abord une requête HTTP avec la méthode {{HTTPMethod("OPTIONS")}} vers la ressource de l'autre domaine afin de déterminer quelle requête peut être envoyée de façon sécurisée. Les requêtes entre différents sites peuvent notamment utiliser ce mécanisme de vérification préliminaire lorsque des données utilisateurs sont impliquées. + +Une requête devra être précédée d'une requête préliminaire si **une** des conditions suivantes est respectée : + +- La requête utilise une des méthodes suivantes : + + - {{HTTPMethod("PUT")}} + - {{HTTPMethod("DELETE")}} + - {{HTTPMethod("CONNECT")}} + - {{HTTPMethod("OPTIONS")}} + - {{HTTPMethod("TRACE")}} + - {{HTTPMethod("PATCH")}} + +- **Ou si**, en dehors des en-têtes automatiquement paramétrés par l'agent utilisateur (comme {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou [tout autre en-tête dont le nom est réservé dans la spécification](https://fetch.spec.whatwg.org/#forbidden-header-name)), la requête inclut [tout autre en-tête que ceux définis sur la liste blanche](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) : + + - {{HTTPHeader("Accept")}} + - {{HTTPHeader("Accept-Language")}} + - {{HTTPHeader("Content-Language")}} + - {{HTTPHeader("Content-Type")}} (cf. les contraintes supplémentaires ci-après) + - {{HTTPHeader("Last-Event-ID")}} + - [`DPR`](http://httpwg.org/http-extensions/client-hints.html#dpr) + - [`Save-Data`](http://httpwg.org/http-extensions/client-hints.html#save-data) + - [`Viewport-Width`](http://httpwg.org/http-extensions/client-hints.html#viewport-width) + - [`Width`](http://httpwg.org/http-extensions/client-hints.html#width) + +- **Ou si** l'en-tête {{HTTPHeader("Content-Type")}} possède une valeur autre que : + + - `application/x-www-form-urlencoded` + - `multipart/form-data` + - `text/plain` + +- **Ou si** un ou plusieurs gestionnaires d'évènements sont enregistrés sur l'objet {{domxref("XMLHttpRequestUpload")}} utilisé dans la requête. +- **Ou si** un objet {{domxref("ReadableStream")}} est utilisé dans la requête. + +> **Note :** WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : _[Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language](https://bugs.webkit.org/show_bug.cgi?id=165178)_, _[Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS](https://bugs.webkit.org/show_bug.cgi?id=165566)_ et _[Switch to a blacklist model for restricted Accept headers in simple CORS requests](https://bugs.webkit.org/show_bug.cgi?id=166363)_. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification. + +Voici un exemple d'une requête qui devra être précédée d'une requête préliminaire : + +```js +var invocation = new XMLHttpRequest(); var url = 'http://truc.autre/resources/post-here/'; -var body = '<?xml version="1.0"?><personne><nom>Toto</nom></personne>'; +var body = '<?xml version="1.0"?><personne><nom>Toto</nom></personne>'; function callOtherDomain(){ if(invocation) @@ -211,139 +194,127 @@ function callOtherDomain(){ } ...... -</pre> - -<p>Dans le fragment de code ci-avant, à la ligne 3, on crée un corps XML envoyé avec la requête <code>POST</code> ligne 8. Sur la ligne 9, on voit également un en-tête de requête HTTP non standard : <code>X-PINGOTHER: pingpong</code>. De tels en-têtes ne sont pas décrits par le protocole HTTP/1.1 mais peuvent être utilisés par les applications web. La requête utilisant un en-tête <code>Content-Type</code> qui vaut <code>application/xml</code> et un en-tête spécifique, il est nécessaire d'envoyer au préalable une requête préliminaire.</p> - -<p><img alt="" src="preflight_correct.png"></p> - -<div class="note"> -<p><strong>Note :</strong> Comme décrit après, la vraie requête POST n'inclut pas les en-têtes <code>Access-Control-Request-*</code> qui sont uniquement nécessaires pour la requête OPTIONS.</p> -</div> +``` + +Dans le fragment de code ci-avant, à la ligne 3, on crée un corps XML envoyé avec la requête `POST` ligne 8. Sur la ligne 9, on voit également un en-tête de requête HTTP non standard : `X-PINGOTHER: pingpong`. De tels en-têtes ne sont pas décrits par le protocole HTTP/1.1 mais peuvent être utilisés par les applications web. La requête utilisant un en-tête `Content-Type` qui vaut `application/xml` et un en-tête spécifique, il est nécessaire d'envoyer au préalable une requête préliminaire. -<p>Voyons ce qui se passe entre le client et le serveur. Le premier échange est la requête/réponse préliminaire :</p> +![](preflight_correct.png) -<pre>OPTIONS /resources/post-here/ HTTP/1.1 -Host: truc.autre -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Origin: http://toto.example -Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type +> **Note :** Comme décrit après, la vraie requête POST n'inclut pas les en-têtes `Access-Control-Request-*` qui sont uniquement nécessaires pour la requête OPTIONS. +Voyons ce qui se passe entre le client et le serveur. Le premier échange est la requête/réponse préliminaire : -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:39 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://toto.example -Access-Control-Allow-Methods: POST, GET -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400 -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 0 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain -</pre> + OPTIONS /resources/post-here/ HTTP/1.1 + Host: truc.autre + User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre + Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 + Accept-Language: en-us,en;q=0.5 + Accept-Encoding: gzip,deflate + Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 + Connection: keep-alive + Origin: http://toto.example + Access-Control-Request-Method: POST + Access-Control-Request-Headers: X-PINGOTHER, Content-Type -<p>Une fois que la requête préliminaire est effectuée, la requête principale est envoyée :</p> -<pre>POST /resources/post-here/ HTTP/1.1 -Host: truc.autre -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -X-PINGOTHER: pingpong -Content-Type: text/xml; charset=UTF-8 -Referer: http://toto.example/exemples/preflightInvocation.html -Content-Length: 55 -Origin: http://toto.example -Pragma: no-cache -Cache-Control: no-cache + HTTP/1.1 200 OK + Date: Mon, 01 Dec 2008 01:15:39 GMT + Server: Apache/2.0.61 (Unix) + Access-Control-Allow-Origin: http://toto.example + Access-Control-Allow-Methods: POST, GET + Access-Control-Allow-Headers: X-PINGOTHER, Content-Type + Access-Control-Max-Age: 86400 + Vary: Accept-Encoding, Origin + Content-Encoding: gzip + Content-Length: 0 + Keep-Alive: timeout=2, max=100 + Connection: Keep-Alive + Content-Type: text/plain -<?xml version="1.0"?><personne><nom>Toto</nom></personne> +Une fois que la requête préliminaire est effectuée, la requête principale est envoyée : + POST /resources/post-here/ HTTP/1.1 + Host: truc.autre + User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre + Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 + Accept-Language: en-us,en;q=0.5 + Accept-Encoding: gzip,deflate + Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 + Connection: keep-alive + X-PINGOTHER: pingpong + Content-Type: text/xml; charset=UTF-8 + Referer: http://toto.example/exemples/preflightInvocation.html + Content-Length: 55 + Origin: http://toto.example + Pragma: no-cache + Cache-Control: no-cache -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:40 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://toto.example -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 235 -Keep-Alive: timeout=2, max=99 -Connection: Keep-Alive -Content-Type: text/plain + <?xml version="1.0"?><personne><nom>Toto</nom></personne> -[Une charge utile GZIPée] -</pre> -<p>Entre les lignes 1 à 12 qui précèdent, on voit la requête préliminaire avec la méthode {{HTTPMethod("OPTIONS")}}. Le navigateur détermine qu'il est nécessaire d'envoyer cela à cause des paramètres de la requête fournie par le code JavaScript. De cette façon le serveur peut répondre si la requête principale est acceptable et avec quels paramètres. OPTIONS est une méthode HTTP/1.1 qui est utilisée afin de déterminer de plus amples informations à propos du serveur. La méthode OPTIONS est une méthode « sûre » (<em>safe</em>) et ne change aucune ressource. On notera, qu'avec la requête OPTIONS, deux autres en-têtes sont envoyés (cf. lignes 10 et 11) :</p> + HTTP/1.1 200 OK + Date: Mon, 01 Dec 2008 01:15:40 GMT + Server: Apache/2.0.61 (Unix) + Access-Control-Allow-Origin: http://toto.example + Vary: Accept-Encoding, Origin + Content-Encoding: gzip + Content-Length: 235 + Keep-Alive: timeout=2, max=99 + Connection: Keep-Alive + Content-Type: text/plain -<pre>Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type -</pre> + [Une charge utile GZIPée] -<p>L'en-tête {{HTTPHeader("Access-Control-Request-Method")}} indique au serveur, pendant la requête préliminaire, que la requête principale sera envoyée avec la méthode <code>POST</code>. L'en-tête {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que la requête principale sera envoyée avec un en-tête <code>X-PINGOTHER</code> et un en-tête <code>Content-Type</code> spécifique. Le serveur peut alors déterminer s'il souhaite accepter une telle requête.</p> +Entre les lignes 1 à 12 qui précèdent, on voit la requête préliminaire avec la méthode {{HTTPMethod("OPTIONS")}}. Le navigateur détermine qu'il est nécessaire d'envoyer cela à cause des paramètres de la requête fournie par le code JavaScript. De cette façon le serveur peut répondre si la requête principale est acceptable et avec quels paramètres. OPTIONS est une méthode HTTP/1.1 qui est utilisée afin de déterminer de plus amples informations à propos du serveur. La méthode OPTIONS est une méthode « sûre » (_safe_) et ne change aucune ressource. On notera, qu'avec la requête OPTIONS, deux autres en-têtes sont envoyés (cf. lignes 10 et 11) : -<p>Dans les lignes 14 à 26 qui suivent, on voit la réponse renvoyée par le serveur qui indique que la méthode de la requête (<code>POST</code>) ainsi que ses en-têtes (<code>X-PINGOTHER</code>) sont acceptables. Voici ce qu'on peut notamment lire entre les lignes 17 et 20 :</p> + Access-Control-Request-Method: POST + Access-Control-Request-Headers: X-PINGOTHER, Content-Type -<pre>Access-Control-Allow-Origin: http://toto.example -Access-Control-Allow-Methods: POST, GET -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400</pre> +L'en-tête {{HTTPHeader("Access-Control-Request-Method")}} indique au serveur, pendant la requête préliminaire, que la requête principale sera envoyée avec la méthode `POST`. L'en-tête {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que la requête principale sera envoyée avec un en-tête `X-PINGOTHER` et un en-tête `Content-Type` spécifique. Le serveur peut alors déterminer s'il souhaite accepter une telle requête. -<p>Le serveur répond avec un en-tête <code>Access-Control-Allow-Methods</code> et indique que les méthodes <code>POST</code> et <code>GET</code> sont acceptables pour manipuler la ressource visée. On notera que cet en-tête est semblable à l'en-tête de réponse {{HTTPHeader("Allow")}}, toutefois, <code>Access-Control-Allow-Methods</code> est uniquement utilisé dans le cadre du contrôle d'accès.</p> +Dans les lignes 14 à 26 qui suivent, on voit la réponse renvoyée par le serveur qui indique que la méthode de la requête (`POST`) ainsi que ses en-têtes (`X-PINGOTHER`) sont acceptables. Voici ce qu'on peut notamment lire entre les lignes 17 et 20 : -<p>Le serveur envoie également l'en-tête <code>Access-Control-Allow-Headers</code> avec une valeur "<code>X-PINGOTHER, Content-Type</code>" qui confirme que les en-têtes souhaités sont autorisés pour la requête principale. Comme <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> est une liste d'en-têtes acceptables séparés par des virgules.</p> + Access-Control-Allow-Origin: http://toto.example + Access-Control-Allow-Methods: POST, GET + Access-Control-Allow-Headers: X-PINGOTHER, Content-Type + Access-Control-Max-Age: 86400 -<p>Enfin, l'en-tête {{HTTPHeader("Access-Control-Max-Age")}} indique avec une valeur exprimée en secondes, la durée pendant laquelle cette réponse préliminaire peut être mise en cache avant la prochaine requête préliminaire. Ici, la réponse est 86400 secondes, ce qui correspond à 24 heures. On notera ici que chaque navigateur possède<a href="/fr/docs/Web/HTTP/Headers/Access-Control-Max-Age"> un maximum interne</a> qui a la priorité lorsque <code>Access-Control-Max-Age</code> lui est supérieur.</p> +Le serveur répond avec un en-tête `Access-Control-Allow-Methods` et indique que les méthodes `POST` et `GET` sont acceptables pour manipuler la ressource visée. On notera que cet en-tête est semblable à l'en-tête de réponse {{HTTPHeader("Allow")}}, toutefois, `Access-Control-Allow-Methods` est uniquement utilisé dans le cadre du contrôle d'accès. -<h4 id="Requêtes_préliminaires_et_redirection">Requêtes préliminaires et redirection</h4> +Le serveur envoie également l'en-tête `Access-Control-Allow-Headers` avec une valeur "`X-PINGOTHER, Content-Type`" qui confirme que les en-têtes souhaités sont autorisés pour la requête principale. Comme `Access-Control-Allow-Methods`, `Access-Control-Allow-Headers` est une liste d'en-têtes acceptables séparés par des virgules. -<p>À l'heure actuelle, la plupart des navigateurs ne prennent pas en charge les redirections pour les requêtes préliminaires. Si une redirection se produit pour une requête préliminaire, la plupart des navigateurs émettront un message d'erreur semblables à ceux-ci.</p> +Enfin, l'en-tête {{HTTPHeader("Access-Control-Max-Age")}} indique avec une valeur exprimée en secondes, la durée pendant laquelle cette réponse préliminaire peut être mise en cache avant la prochaine requête préliminaire. Ici, la réponse est 86400 secondes, ce qui correspond à 24 heures. On notera ici que chaque navigateur possède[ un maximum interne](/fr/docs/Web/HTTP/Headers/Access-Control-Max-Age) qui a la priorité lorsque `Access-Control-Max-Age` lui est supérieur. -<blockquote> -<p>La requête a été redirigée vers 'https://example.com/toto', ce qui n'est pas autorisé pour les requêtes multi-origines qui doivent être précédées d'une requête préliminaire. (<em>The request was redirected to 'https://example.com/toto', which is disallowed for cross-origin requests that require preflight.</em>)</p> -</blockquote> +#### Requêtes préliminaires et redirection -<blockquote> -<p>Il est nécessaire d'effectuer une requête préliminaire pour cette requête, or, ceci n'est pas autorisé pour suivre les redirections multi-origines. (<em>Request requires preflight, which is disallowed to follow cross-origin redirect.</em>)</p> -</blockquote> +À l'heure actuelle, la plupart des navigateurs ne prennent pas en charge les redirections pour les requêtes préliminaires. Si une redirection se produit pour une requête préliminaire, la plupart des navigateurs émettront un message d'erreur semblables à ceux-ci. -<p>Le protocole CORS demandait initialement ce comportement. Toutefois, <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">il a été modifié et ces erreurs ne sont plus nécessaires</a>. Toutefois, la plupart des navigateurs n'ont pas encore implémenté cette modification et conservent alors le comportement conçu initialement.</p> +> La requête a été redirigée vers 'https\://example.com/toto', ce qui n'est pas autorisé pour les requêtes multi-origines qui doivent être précédées d'une requête préliminaire. (_The request was redirected to 'https\://example.com/toto', which is disallowed for cross-origin requests that require preflight._) -<p>En attendant que les navigateurs comblent ce manque, il est possible de contourner cette limitation en utilisant l'une de ces deux méthodes :</p> +> Il est nécessaire d'effectuer une requête préliminaire pour cette requête, or, ceci n'est pas autorisé pour suivre les redirections multi-origines. (_Request requires preflight, which is disallowed to follow cross-origin redirect._) -<ul> - <li>Modifier le comportement côté serveur afin d'éviter la requête préliminaire ou la redirection (dans le cas où vous contrôler le serveur sur lequel la requête est effectuée)</li> - <li>Modifier la requête afin que ce soit une <a href="#simples">requête simple</a> qui ne nécessite pas de requête préliminaire.</li> -</ul> +Le protocole CORS demandait initialement ce comportement. Toutefois, [il a été modifié et ces erreurs ne sont plus nécessaires](https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2). Toutefois, la plupart des navigateurs n'ont pas encore implémenté cette modification et conservent alors le comportement conçu initialement. -<p>S'il n'est pas possible d'appliquer ces changements, on peut également :</p> +En attendant que les navigateurs comblent ce manque, il est possible de contourner cette limitation en utilisant l'une de ces deux méthodes : -<ol> - <li>Effectuer <a href="#simples">une requête simple</a> (avec <code><a href="/fr/docs/Web/API/Response/url">Response.url</a></code> si on utilise l'API Fetch ou <code><a href="/fr/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a></code> si on utilise XHR) afin de déterminer l'URL à laquelle aboutirait la requête avec requête préliminaire.</li> - <li>Effectuer la requête initialement souhaitée avec l'URL <em>réelle</em> obtenue à la première étape.</li> -</ol> +- Modifier le comportement côté serveur afin d'éviter la requête préliminaire ou la redirection (dans le cas où vous contrôler le serveur sur lequel la requête est effectuée) +- Modifier la requête afin que ce soit une [requête simple](#simples) qui ne nécessite pas de requête préliminaire. -<p>Toutefois, si la requête déclenche une requête préliminaire suite à l'absence de l'en-tête {{HTTPHeader("Authorization")}}, on ne pourra pas utiliser cette méthode de contournement et il sera nécessaire d'avoir accès au serveur pour contourner le problème.</p> +S'il n'est pas possible d'appliquer ces changements, on peut également : -<h3 id="Requêtes_avec_informations_dauthentification">Requêtes avec informations d'authentification</h3> +1. Effectuer [une requête simple](#simples) (avec [`Response.url`](/fr/docs/Web/API/Response/url) si on utilise l'API Fetch ou [`XHR.responseURL`](/fr/docs/Web/API/XMLHttpRequest/responseURL) si on utilise XHR) afin de déterminer l'URL à laquelle aboutirait la requête avec requête préliminaire. +2. Effectuer la requête initialement souhaitée avec l'URL _réelle_ obtenue à la première étape. -<p>Une des fonctionnalités intéressante mise en avant par le CORS (via {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>) est la possibilité d'effectuer des requêtes authentifiées reconnaissant les <a href="/fr/docs/Web/HTTP/Cookies">cookies HTTP</a> et les informations d'authentification HTTP. Par défaut, lorsqu'on réalise des appels {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a> entre différents sites, les navigateurs n'enverront pas les informations d'authentification. Pour cela, il est nécessaire d'utiliser une option spécifique avec le constructeur {{domxref("XMLHttpRequest")}} ou {{domxref("Request")}} lorsqu'on l'appelle.</p> +Toutefois, si la requête déclenche une requête préliminaire suite à l'absence de l'en-tête {{HTTPHeader("Authorization")}}, on ne pourra pas utiliser cette méthode de contournement et il sera nécessaire d'avoir accès au serveur pour contourner le problème. -<p>Dans cet exemple, le contenu chargé depuis <code>http://toto.example</code> effectue une requête GET simple vers une ressource située sous <code>http://truc.autre</code> qui définit des <em>cookies</em>. Voici un exemple de code JavaScript qui pourrait se trouver sur <code>toto.example</code> :</p> +### Requêtes avec informations d'authentification -<pre class="brush: js">var invocation = new XMLHttpRequest(); +Une des fonctionnalités intéressante mise en avant par le CORS (via {{domxref("XMLHttpRequest")}} ou [Fetch](/fr/docs/Web/API/Fetch_API)) est la possibilité d'effectuer des requêtes authentifiées reconnaissant les [cookies HTTP](/fr/docs/Web/HTTP/Cookies) et les informations d'authentification HTTP. Par défaut, lorsqu'on réalise des appels {{domxref("XMLHttpRequest")}} ou [Fetch](/fr/docs/Web/API/Fetch_API) entre différents sites, les navigateurs n'enverront pas les informations d'authentification. Pour cela, il est nécessaire d'utiliser une option spécifique avec le constructeur {{domxref("XMLHttpRequest")}} ou {{domxref("Request")}} lorsqu'on l'appelle. + +Dans cet exemple, le contenu chargé depuis `http://toto.example` effectue une requête GET simple vers une ressource située sous `http://truc.autre` qui définit des _cookies_. Voici un exemple de code JavaScript qui pourrait se trouver sur `toto.example` : + +```js +var invocation = new XMLHttpRequest(); var url = 'http://truc.autre/resources/credentialed-content/'; function callOtherDomain(){ @@ -353,202 +324,174 @@ function callOtherDomain(){ invocation.onreadystatechange = handler; invocation.send(); } -}</pre> +} +``` + +À la ligne 7, on voit que l'option `withCredentials`, du constructeur {{domxref("XMLHttpRequest")}}, doit être activée pour que l'appel utilise les _cookies_. Par défaut, l'appel sera réalisé sans les _cookies_. Cette requête étant une simple requête `GET`, il n'est pas nécessaire d'avoir une requête préliminaire. Cependant, le navigateur rejettera tout réponse qui ne possède pas l'en-tête {{HTTPHeader("Access-Control-Allow-Credentials")}}`: true` et la réponse correspondante ne sera pas disponible pour le contenu web qui l'a demandée. -<p>À la ligne 7, on voit que l'option <code>withCredentials</code>, du constructeur {{domxref("XMLHttpRequest")}}, doit être activée pour que l'appel utilise les <em>cookies</em>. Par défaut, l'appel sera réalisé sans les <em>cookies</em>. Cette requête étant une simple requête <code>GET</code>, il n'est pas nécessaire d'avoir une requête préliminaire. Cependant, le navigateur rejettera tout réponse qui ne possède pas l'en-tête {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> et la réponse correspondante ne sera pas disponible pour le contenu web qui l'a demandée.</p> +![](cred-req-updated.png) -<p><img alt="" src="cred-req-updated.png"></p> +Voici un exemple d'échange entre le client et le serveur : -<p>Voici un exemple d'échange entre le client et le serveur :</p> + GET /resources/access-control-with-credentials/ HTTP/1.1 + Host: truc.autre + User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre + Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 + Accept-Language: en-us,en;q=0.5 + Accept-Encoding: gzip,deflate + Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 + Connection: keep-alive + Referer: http://toto.example/exemples/credential.html + Origin: http://toto.example + Cookie: pageAccess=2 -<pre>GET /resources/access-control-with-credentials/ HTTP/1.1 -Host: truc.autre -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://toto.example/exemples/credential.html -Origin: http://toto.example -Cookie: pageAccess=2 + HTTP/1.1 200 OK + Date: Mon, 01 Dec 2008 01:34:52 GMT + Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 + X-Powered-By: PHP/5.2.6 + Access-Control-Allow-Origin: http://toto.example + Access-Control-Allow-Credentials: true + Cache-Control: no-cache + Pragma: no-cache + Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT + Vary: Accept-Encoding, Origin + Content-Encoding: gzip + Content-Length: 106 + Keep-Alive: timeout=2, max=100 + Connection: Keep-Alive + Content-Type: text/plain -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:34:52 GMT -Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 -X-Powered-By: PHP/5.2.6 -Access-Control-Allow-Origin: http://toto.example -Access-Control-Allow-Credentials: true -Cache-Control: no-cache -Pragma: no-cache -Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 106 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain + [text/plain payload] -[text/plain payload] -</pre> +Bien que la ligne 11 contienne le _cookie_ pour le contenu sous `http://truc.autre`, si `truc.autre` n'avait pas répondu avec {{HTTPHeader("Access-Control-Allow-Credentials")}}`: true` (cf. ligne 19), la réponse aurait été ignorée et n'aurait pas pu être consommée par le contenu web. -<p>Bien que la ligne 11 contienne le <em>cookie</em> pour le contenu sous <code>http://truc.autre</code>, si <code>truc.autre</code> n'avait pas répondu avec {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (cf. ligne 19), la réponse aurait été ignorée et n'aurait pas pu être consommée par le contenu web.</p> +#### Requêtes authentifiées et jokers (_wildcards_) -<h4 id="Requêtes_authentifiées_et_jokers_wildcards">Requêtes authentifiées et jokers (<em>wildcards</em>)</h4> +Lorsqu'il répond à une requête authentifiée, le serveur **doit** indiquer une origine via la valeur de l'en-tête `Access-Control-Allow-Origin`, il ne doit pas utiliser le joker "`*`". -<p>Lorsqu'il répond à une requête authentifiée, le serveur <strong>doit</strong> indiquer une origine via la valeur de l'en-tête <code>Access-Control-Allow-Origin</code>, il ne doit pas utiliser le joker "<code>*</code>".</p> +Avec la requête précédente, on voit la présence d'un en-tête `Cookie` mais la requête échouerait si la valeur de l'en-tête de réponse `Access-Control-Allow-Origin` était "`*`". Ici, ce n'est pas le cas : `Access-Control-Allow-Origin` vaut "`http://toto.example`" et le contenu récupéré par la requête est alors envoyé au contenu web. -<p>Avec la requête précédente, on voit la présence d'un en-tête <code>Cookie</code> mais la requête échouerait si la valeur de l'en-tête de réponse <code>Access-Control-Allow-Origin</code> était "<code>*</code>". Ici, ce n'est pas le cas : <code>Access-Control-Allow-Origin</code> vaut "<code>http://toto.example</code>" et le contenu récupéré par la requête est alors envoyé au contenu web.</p> +Dans cet exemple, on notera également que l'en-tête de réponse `Set-Cookie` définit un autre _cookie_. En cas d'échec, une exception (dépendant de l'API utilisée) sera levée. -<p>Dans cet exemple, on notera également que l'en-tête de réponse <code>Set-Cookie</code> définit un autre <em>cookie</em>. En cas d'échec, une exception (dépendant de l'API utilisée) sera levée.</p> +#### _Cookies_ tiers -<h4 id="Cookies_tiers"><em>Cookies</em> tiers</h4> +On notera que les _cookies_ provenant de réponses CORS sont également sujets aux règles qui s'appliquent aux _cookies_ tiers. Dans l'exemple précédent, la page est chargée depuis `toto.example` et, à la ligne 22, le _cookie_ est envoyé par `truc.autre`. Aussi, ce _cookie_ n'aurait pas été enregistré si l'utilisateur avait paramétré son navigateur pour rejeter les _cookies_ tiers. -<p>On notera que les <em>cookies</em> provenant de réponses CORS sont également sujets aux règles qui s'appliquent aux <em>cookies</em> tiers. Dans l'exemple précédent, la page est chargée depuis <code>toto.example</code> et, à la ligne 22, le <em>cookie</em> est envoyé par <code>truc.autre</code>. Aussi, ce <em>cookie</em> n'aurait pas été enregistré si l'utilisateur avait paramétré son navigateur pour rejeter les <em>cookies</em> tiers.</p> +## En-têtes de réponse HTTP -<h2 id="En-têtes_de_réponse_HTTP">En-têtes de réponse HTTP</h2> +Dans cette section, on liste les en-têtes de réponse HTTP qui sont renvoyés par le serveur pour le contrôle d'accès, tels que définis par la spécification _Cross-Origin Resource Sharing_. La section précédente illustre, avec des exemples concrets, leur fonctionnement. -<p>Dans cette section, on liste les en-têtes de réponse HTTP qui sont renvoyés par le serveur pour le contrôle d'accès, tels que définis par la spécification <em>Cross-Origin Resource Sharing</em>. La section précédente illustre, avec des exemples concrets, leur fonctionnement.</p> +### `Access-Control-Allow-Origin` -<h3 id="Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></h3> +Une ressource de réponse peut avoir un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} avec la syntaxe suivante : -<p>Une ressource de réponse peut avoir un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} avec la syntaxe suivante :</p> + Access-Control-Allow-Origin: <origin> | * -<pre>Access-Control-Allow-Origin: <origin> | * -</pre> +Le paramètre `origin` définit un URI qui peut accéder à la ressource. Le navigateur doit respecter cette contrainte. Pour les requêtes qui n'impliquent pas d'informations d'authentification, le serveur pourra indiquer un joker ("`*`") qui permet à n'importe quelle origine d'accéder à la ressource. -<p>Le paramètre <code>origin</code> définit un URI qui peut accéder à la ressource. Le navigateur doit respecter cette contrainte. Pour les requêtes qui n'impliquent pas d'informations d'authentification, le serveur pourra indiquer un joker ("<code>*</code>") qui permet à n'importe quelle origine d'accéder à la ressource.</p> +Si on souhaite, par exemple, autoriser `http://mozilla.org` à accéder à la ressource, on pourra répondre avec : -<p>Si on souhaite, par exemple, autoriser <code>http://mozilla.org</code> à accéder à la ressource, on pourra répondre avec :</p> + Access-Control-Allow-Origin: http://mozilla.org -<pre>Access-Control-Allow-Origin: http://mozilla.org</pre> +Si le serveur indique une origine spécifique plutôt que "`*`", il pourra également inclure la valeur `Origin` dans l'en-tête de réponse {{HTTPHeader("Vary")}} pour indiquer au client que la réponse du serveur variera selon la valeur de l'en-tête de requête {{HTTPHeader("Origin")}}. -<p>Si le serveur indique une origine spécifique plutôt que "<code>*</code>", il pourra également inclure la valeur <code>Origin</code> dans l'en-tête de réponse {{HTTPHeader("Vary")}} pour indiquer au client que la réponse du serveur variera selon la valeur de l'en-tête de requête {{HTTPHeader("Origin")}}.</p> +### `Access-Control-Expose-Headers` -<h3 id="Access-Control-Expose-Headers"><code>Access-Control-Expose-Headers</code></h3> +L'en-tête {{HTTPHeader("Access-Control-Expose-Headers")}} fournit une liste blanche des en-têtes auxquels les navigateurs peuvent accéder. Ainsi : -<p>L'en-tête {{HTTPHeader("Access-Control-Expose-Headers")}} fournit une liste blanche des en-têtes auxquels les navigateurs peuvent accéder. Ainsi :</p> + Access-Control-Expose-Headers: X-Mon-En-tete-Specifique, X-Un-Autre-En-tete -<pre>Access-Control-Expose-Headers: X-Mon-En-tete-Specifique, X-Un-Autre-En-tete -</pre> +Cela permettra que les en-têtes `X-Mon-En-tete-Specifique` et `X-Un-Autre-En-tete` soient utilisés par le navigateur. -<p>Cela permettra que les en-têtes <code>X-Mon-En-tete-Specifique</code> et <code>X-Un-Autre-En-tete</code> soient utilisés par le navigateur.</p> +### `Access-Control-Max-Age` -<h3 id="Access-Control-Max-Age"><code>Access-Control-Max-Age</code></h3> +L'en-tête {{HTTPHeader("Access-Control-Max-Age")}} indique la durée pendant laquelle le résultat de la requête préliminaire peut être mis en cache (voir les exemples ci-avant pour des requêtes impliquant des requêtes préliminaires). -<p>L'en-tête {{HTTPHeader("Access-Control-Max-Age")}} indique la durée pendant laquelle le résultat de la requête préliminaire peut être mis en cache (voir les exemples ci-avant pour des requêtes impliquant des requêtes préliminaires).</p> + Access-Control-Max-Age: <delta-en-secondes> -<pre>Access-Control-Max-Age: <delta-en-secondes> -</pre> +Le paramètre `delta-en-seconds` indique le nombre de secondes pendant lesquelles les résultats peuvent être mis en cache. -<p>Le paramètre <code>delta-en-seconds</code> indique le nombre de secondes pendant lesquelles les résultats peuvent être mis en cache.</p> +### `Access-Control-Allow-Credentials` -<h3 id="Access-Control-Allow-Credentials"><code>Access-Control-Allow-Credentials</code></h3> +L'en-tête {{HTTPHeader("Access-Control-Allow-Credentials")}} indique si la réponse à la requête doit être exposée lorsque l'option `credentials` vaut `true`. Lorsque cet en-tête est utilisé dans une réponse préliminaire, cela indique si la requête principale peut ou non être effectuée avec des informations d'authentification. On notera que les requêtes `GET` sont des requêtes simples et si une requête est effectuée, avec des informations d'authentification pour une ressource, et que cet en-tête n'est pas renvoyé, la réponse sera ignorée par le navigateur et sa charge ne pourra pas être consommée par le contenu web. -<p>L'en-tête {{HTTPHeader("Access-Control-Allow-Credentials")}} indique si la réponse à la requête doit être exposée lorsque l'option <code>credentials</code> vaut <code>true</code>. Lorsque cet en-tête est utilisé dans une réponse préliminaire, cela indique si la requête principale peut ou non être effectuée avec des informations d'authentification. On notera que les requêtes <code>GET</code> sont des requêtes simples et si une requête est effectuée, avec des informations d'authentification pour une ressource, et que cet en-tête n'est pas renvoyé, la réponse sera ignorée par le navigateur et sa charge ne pourra pas être consommée par le contenu web.</p> + Access-Control-Allow-Credentials: true -<pre>Access-Control-Allow-Credentials: true -</pre> +[Voir les scénarios ci-avant pour des exemples](#credentials). -<p><a href="#credentials">Voir les scénarios ci-avant pour des exemples</a>.</p> +### `Access-Control-Allow-Methods` -<h3 id="Access-Control-Allow-Methods"><code>Access-Control-Allow-Methods</code></h3> +L'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique la ou les méthodes qui sont autorisées pour accéder à la ressoure. Cet en-tête est utilisé dans la réponse à la requête préliminaire (voir ci-avant [les conditions dans lesquelles une requête préliminaire est nécessaire](#preflight)). -<p>L'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique la ou les méthodes qui sont autorisées pour accéder à la ressoure. Cet en-tête est utilisé dans la réponse à la requête préliminaire (voir ci-avant <a href="#preflight">les conditions dans lesquelles une requête préliminaire est nécessaire</a>).</p> + Access-Control-Allow-Methods: <methode>[, <methode>]* -<pre>Access-Control-Allow-Methods: <methode>[, <methode>]* -</pre> +[Voir un exemple ci-avant pour l'utilisation de cet en-tête](#preflight). -<p><a href="#preflight">Voir un exemple ci-avant pour l'utilisation de cet en-tête</a>.</p> +### `Access-Control-Allow-Headers` -<h3 id="Access-Control-Allow-Headers"><code>Access-Control-Allow-Headers</code></h3> +L'en-tête {{HTTPHeader("Access-Control-Allow-Headers")}} est utilisé dans une réponse à une requête préliminaire afin d'indiquer les en-têtes HTTP qui peuvent être utilisés lorsque la requête principale est envoyée. -<p>L'en-tête {{HTTPHeader("Access-Control-Allow-Headers")}} est utilisé dans une réponse à une requête préliminaire afin d'indiquer les en-têtes HTTP qui peuvent être utilisés lorsque la requête principale est envoyée.</p> + Access-Control-Allow-Headers: <nom-champ>[, <nom-champ>]* -<pre>Access-Control-Allow-Headers: <nom-champ>[, <nom-champ>]* -</pre> +## En-têtes de requête HTTP -<h2 id="En-têtes_de_requête_HTTP">En-têtes de requête HTTP</h2> +Dans cette section, nous allons décrire les en-têtes que les clients peuvent utiliser lors de l'envoi de requêtes HTTP afin d'exploiter les fonctionnalités du CORS. Ces en-têtes sont souvent automatiquement renseignés lors d'appels aux serveurs. Les développeurs qui utilisent {{domxref("XMLHttpRequest")}} pour les requêtes multi-origines n'ont pas besoin de paramétrer ces en-têtes dans le code JavaScript. -<p>Dans cette section, nous allons décrire les en-têtes que les clients peuvent utiliser lors de l'envoi de requêtes HTTP afin d'exploiter les fonctionnalités du CORS. Ces en-têtes sont souvent automatiquement renseignés lors d'appels aux serveurs. Les développeurs qui utilisent {{domxref("XMLHttpRequest")}} pour les requêtes multi-origines n'ont pas besoin de paramétrer ces en-têtes dans le code JavaScript.</p> +### `Origin` -<h3 id="Origin"><code>Origin</code></h3> +L'en-tête {{HTTPHeader("Origin")}} indique l'origine de la requête (principale ou préliminaire) pour l'accès multi-origine. -<p>L'en-tête {{HTTPHeader("Origin")}} indique l'origine de la requête (principale ou préliminaire) pour l'accès multi-origine.</p> + Origin: <origine> -<pre>Origin: <origine> -</pre> +L'origine est un URI qui indique le serveur à partir duquel la requête a été initiée. Elle n'inclut aucune information relative au chemin mais contient uniquement le nom du serveur. -<p>L'origine est un URI qui indique le serveur à partir duquel la requête a été initiée. Elle n'inclut aucune information relative au chemin mais contient uniquement le nom du serveur.</p> +> **Note :** `origine` peut être une chaîne vide (ce qui s'avère notamment utile lorsque la source est une URL de donnée). -<div class="note"> - <p><strong>Note :</strong> <code>origine</code> peut être une chaîne vide (ce qui s'avère notamment utile lorsque la source est une URL de donnée).</p> -</div> +Pour chaque requête avec contrôle d'accès, l'en-tête {{HTTPHeader("Origin")}} sera **toujours** envoyé. -<p>Pour chaque requête avec contrôle d'accès, l'en-tête {{HTTPHeader("Origin")}} sera <strong>toujours</strong> envoyé.</p> +### `Access-Control-Request-Method` -<h3 id="Access-Control-Request-Method"><code>Access-Control-Request-Method</code></h3> +L'en-tête {{HTTPHeader("Access-Control-Request-Method")}} est utilisé lorsqu'on émet une requête préliminaire afin de savoir quelle méthode HTTP pourra être utilisée avec la requête principale. -<p>L'en-tête {{HTTPHeader("Access-Control-Request-Method")}} est utilisé lorsqu'on émet une requête préliminaire afin de savoir quelle méthode HTTP pourra être utilisée avec la requête principale.</p> + Access-Control-Request-Method: <methode> -<pre>Access-Control-Request-Method: <methode> -</pre> +Voir [ci-avant pour des exemples d'utilisation de cet en-tête](#preflight). -<p>Voir <a href="#preflight">ci-avant pour des exemples d'utilisation de cet en-tête</a>.</p> +### `Access-Control-Request-Headers` -<h3 id="Access-Control-Request-Headers"><code>Access-Control-Request-Headers</code></h3> +L'en-tête {{HTTPHeader("Access-Control-Request-Headers")}} est utilisé lorsqu'on émet une requête préliminaire afin de communiquer au serveur les en-têtes HTTP qui seront utilisés avec la requête principale. -<p>L'en-tête {{HTTPHeader("Access-Control-Request-Headers")}} est utilisé lorsqu'on émet une requête préliminaire afin de communiquer au serveur les en-têtes HTTP qui seront utilisés avec la requête principale.</p> + Access-Control-Request-Headers: <nom-champ>[, <nom-champ>]* -<pre>Access-Control-Request-Headers: <nom-champ>[, <nom-champ>]* -</pre> +Voir [ci-avant pour des exemples d'utilisation de cet en-tête](#preflight). -<p>Voir <a href="#preflight">ci-avant pour des exemples d'utilisation de cet en-tête</a>.</p> +## Spécifications -<h2 id="Spécifications">Spécifications</h2> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------- | +| {{SpecName('Fetch', '#cors-protocol', 'CORS')}} | {{Spec2('Fetch')}} | Nouvelle définition, remplace la spécification [W3C pour le CORS](https://www.w3.org/TR/cors/). | -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>Nouvelle définition, remplace la spécification <a href="https://www.w3.org/TR/cors/">W3C pour le CORS</a>.</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("http.headers.Access-Control-Allow-Origin")}} -<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> +### Notes de compatibilité -<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3> +- Internet Explorer 8 et 9 exposent les fonctionnalités relatives au CORS via l'objet `XDomainRequest`. L'implémentation complète est disponible à partir d'IE 10. +- Bien que Firefox 3.5 ait introduit la prise en charge des requêtes `XMLHttpRequest` entre différents sites et des polices web, certaines requêtes étaient limitées jusqu'à des versions ultérieures. Plus précisément, Firefox 7 permet les requêtes multi-origines pour les textures WebGL et Firefox 9 permet la récupération d'images dessinées sur un canevas via `drawImage`. -<ul> - <li>Internet Explorer 8 et 9 exposent les fonctionnalités relatives au CORS via l'objet <code>XDomainRequest</code>. L'implémentation complète est disponible à partir d'IE 10.</li> - <li>Bien que Firefox 3.5 ait introduit la prise en charge des requêtes <code>XMLHttpRequest</code> entre différents sites et des polices web, certaines requêtes étaient limitées jusqu'à des versions ultérieures. Plus précisément, Firefox 7 permet les requêtes multi-origines pour les textures WebGL et Firefox 9 permet la récupération d'images dessinées sur un canevas via <code>drawImage</code>.</li> -</ul> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> +- [Exemples de codes utilisant `XMLHttpRequest` et le CORS (en anglais)](https://arunranga.com/examples/access-control/) +- [Exemples de code côté client et côté serveur utilisant le CORS (en anglais)](https://github.com/jackblackevo/cors-jsonp-sample) +- [Le CORS vu côté serveur (PHP, etc.)](/fr/docs/Web/HTTP/Server-Side_Access_Control) +- {{domxref("XMLHttpRequest")}} +- [L'API Fetch](/fr/docs/Web/API/Fetch_API) +- [Utiliser le CORS - HTML5 Rocks (en anglais)](https://www.html5rocks.com/en/tutorials/cors/) +- [Une réponse Stack Overflow pour répondre aux problèmes fréquemment posés par le CORS (en anglais)](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141) : -<ul> - <li><a class="external" href="https://arunranga.com/examples/access-control/">Exemples de codes utilisant <code>XMLHttpRequest</code> et le CORS (en anglais)</a></li> - <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Exemples de code côté client et côté serveur utilisant le CORS (en anglais)</a></li> - <li><a href="/fr/docs/Web/HTTP/Server-Side_Access_Control">Le CORS vu côté serveur (PHP, etc.)</a></li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li><a href="/fr/docs/Web/API/Fetch_API">L'API Fetch</a></li> - <li><a href="https://www.html5rocks.com/en/tutorials/cors/">Utiliser le CORS - HTML5 Rocks (en anglais)</a></li> - <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Une réponse Stack Overflow pour répondre aux problèmes fréquemment posés par le CORS (en anglais)</a> : - <ul> - <li>Comment éviter les requêtes préliminaires</li> - <li>Comment utiliser un proxy CORS pour contourner <em>No Access-Control-Allow-Origin header</em></li> - <li>Comment corriger <em>Access-Control-Allow-Origin header must not be the wildcard</em></li> - </ul> - </li> -</ul>
\ No newline at end of file + - Comment éviter les requêtes préliminaires + - Comment utiliser un proxy CORS pour contourner _No Access-Control-Allow-Origin header_ + - Comment corriger _Access-Control-Allow-Origin header must not be the wildcard_ |