aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/html/attributes/crossorigin
diff options
context:
space:
mode:
authortristantheb <tristantheb@users.noreply.github.com>2021-06-06 11:44:55 +0200
committerGitHub <noreply@github.com>2021-06-06 11:44:55 +0200
commit6f85683973762f84f6d99211b3b6158059e16f5a (patch)
tree19dbf2006709d2841b8535fd3c0d6390edc2643b /files/fr/web/html/attributes/crossorigin
parent6781d84b8a98f4c28efebaf7ed15d0666083ef11 (diff)
downloadtranslated-content-6f85683973762f84f6d99211b3b6158059e16f5a.tar.gz
translated-content-6f85683973762f84f6d99211b3b6158059e16f5a.tar.bz2
translated-content-6f85683973762f84f6d99211b3b6158059e16f5a.zip
UPDATE: Update translation of the HTML attributes (#706)
* UPDATE: Refresh of the index page and remove KS * L10N: Translation of the accept attributes * UPDATE: Refresh of the autocomplete attribute * L10N: Translation of the capture attribute * Revert accept with BCD (but table not exist) * UPDATE: Refresh the crossorigin attribute * L10N: Translation of the disabled attribute * L10N: Translation of the elementtiming attribute * L10N: Translation of the for attribute * L10N: Translation of the max attribute * L10N: Translation of the maxlength attribute * L10N: Translation of the min attribute * FIX: Add missing summary * L10N: Translation of the minlength attribute * L10N: Translation of the multiple attribute * UPDATE: Refresh the pattern attribute * L10N: Translation of the readonly attribute * L10N: Translation of the rel attribute * L10N: Translation of the required attribute * L10N: Translation of the size attribute * L10N: Translation of the step attribute * Review - attr accept * Typo live sample * Review - capture * Review - autocomplete * Review - crossorigin * Review disabled * Review elementtiming * Review - for * Review max * Review - maxlength * Review min * Review minlength * Review multiple * Review pattern * Review readonly * Review rel * Review required * Review size * Review step * Review attributes index Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/attributes/crossorigin')
-rw-r--r--files/fr/web/html/attributes/crossorigin/index.html127
1 files changed, 69 insertions, 58 deletions
diff --git a/files/fr/web/html/attributes/crossorigin/index.html b/files/fr/web/html/attributes/crossorigin/index.html
index f47652bb15..76893fe115 100644
--- a/files/fr/web/html/attributes/crossorigin/index.html
+++ b/files/fr/web/html/attributes/crossorigin/index.html
@@ -1,97 +1,108 @@
---
-title: Attributs de réglage du CORS
+title: 'Attribut HTML : crossorigin'
slug: Web/HTML/Attributes/crossorigin
tags:
- - Avancé
+ - Advanced
+ - Attribute
- CORS
- HTML
+ - NeedsContent
- Reference
+ - Security
translation_of: Web/HTML/Attributes/crossorigin
original_slug: Web/HTML/Reglages_des_attributs_CORS
---
<div>{{HTMLSidebar}}</div>
-<p>En HTML5, certains des éléments HTML supportant le <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut <code>crossorigin</code> (propriété <code>crossOrigin</code>), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :</p>
+<p class="summary">L'attribut <strong><code>crossorigin</code></strong>, valable sur les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, fournit la prise en charge de <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.</p>
+
+<p>L'attribut de contenu <code>crossorigin</code> sur les éléments médias est un attribut de paramétrage CORS.</p>
+
+<p>Ces attributs sont énumérés, et ont les valeurs possibles suivantes :</p>
<table class="standard-table">
- <tbody>
- <tr>
- <td class="header">Mot-clé</td>
- <td class="header">Description</td>
- </tr>
- <tr>
- <td><code>anonymous</code></td>
- <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'same-origin'</code>.</td>
- </tr>
- <tr>
- <td><code>use-credentials</code></td>
- <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'include'</code>.</td>
- </tr>
- <tr>
- <td><code>""</code></td>
- <td>Utiliser la chaîne vide (<code>crossorigin=""</code>) ou l'attribut seul (<code>crossorigin</code>) sera équivalent à l'utilisation de la valeur <code>anonymous</code>.</td>
- </tr>
- </tbody>
+ <thead>
+ <tr>
+ <th scope="col">Mot-clé</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>anonymous</code></td>
+ <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'same-origin'</code>.</td>
+ </tr>
+ <tr>
+ <td><code>use-credentials</code></td>
+ <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'include'</code>.</td>
+ </tr>
+ <tr>
+ <td><code>""</code></td>
+ <td>Utiliser la chaîne vide (<code>crossorigin=""</code>) ou l'attribut seul (<code>crossorigin</code>) sera équivalent à l'utilisation de la valeur <code>anonymous</code>.</td>
+ </tr>
+ </tbody>
</table>
-<p>Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé <code>anonymous</code> signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d<strong>'informations d'authentification de l'utilisateur</strong> via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la <a href="https://www.w3.org/TR/cors/#user-credentials">section terminologique de la spécification CORS</a>.</p>
+<p>Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé « anonymous » signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d<strong>'informations d'authentification de l'utilisateur</strong> via des cookies, ni des certificats TLS côté client ou des authentifications HTTP comme détaillé dans la <a href="https://www.w3.org/TR/cors/#user-credentials">section terminologique de la spécification CORS</a>.</p>
<p>Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé <code>anonymous</code>.</p>
-<h3 id="Exemple_utiliser_crossorigin_avec_l'élément_script">Exemple : utiliser <code>crossorigin</code> avec l'élément <code>script</code></h3>
+<div class="notecard note">
+ <p><b>Note :</b></p>
+ <p>Avant Firefox 83, l'attribut <code>crossorigin</code> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un bug sur Chrome</a>.</p>
+</div>
-<p>On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, <code>https://exemple.com/framework-exemple.js</code>) sans envoyer les informations d'authentification de l'utilisateur.</p>
+<h2 id="examples">Exemples</h2>
+<h3 id="example_crossorigin_with_the_script_element">Utiliser <code>crossorigin</code> avec l'élément <code>script</code></h3>
-<pre class="brush: html">&lt;script src="https://exemple.com/framework-exemple.js"
- crossorigin="anonymous"&gt;
-&lt;/script&gt;</pre>
+<p>On peut utiliser l'élément <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> afin d'indiquer au navigateur d'exécuter un script (ici, <code>https://exemple.com/framework-exemple.js</code>) sans envoyer les informations d'authentification de l'utilisateur.</p>
-<h3 id="Exemple_utiliser_des_informations_d'authentification_avec_un_manifeste">Exemple : utiliser des informations d'authentification avec un manifeste</h3>
+<pre class="brush: html">&lt;script src="https://exemple.com/framework-exemple.js" crossorigin="anonymous"&gt;&lt;/script&gt;</pre>
-<p>La valeur <code>use-credentials</code> doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :</p>
+<h3 id="example_webmanifest_with_credentials">Utiliser des informations d'authentification avec un manifeste</h3>
+
+<p>La valeur <code>use-credentials</code> doit être utilisée lorsqu'on récupère un <a href="/fr/docs/Web/Manifest">manifeste</a> nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :</p>
<pre class="brush: html">&lt;link rel="manifest" href="/app.manifest" crossorigin="use-credentials"&gt;</pre>
-<h2 id="Spécifications">Spécifications</h2>
+<h2 id="specifications">Spécifications</h2>
<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">État</th>
- <th scope="col">Commentaires</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td> </td>
- </tr>
- </tbody>
+ <thead>
+ <tr>
+ <th scope="col">Spécification</th>
+ <th scope="col">Statut</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ </tr>
+ </tbody>
</table>
-<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
-
-<h3 id="L'attribut_crossorigin_pour_&lt;script>">L'attribut <code>crossorigin</code> pour <code>&lt;script&gt;</code></h3>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+<h3 id="script_crossorigin">Pour l'élément script</h3>
<p>{{Compat("html.elements.script.crossorigin")}}</p>
-<h3 id="L'attribut_crossorigin_pour_&lt;video>">L'attribut <code>crossorigin</code> pour <code>&lt;video&gt;</code></h3>
-
-<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+<h3 id="video_crossorigin">Pour l'élément video</h3>
<p>{{Compat("html.elements.video.crossorigin")}}</p>
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h3 id="link_crossorigin">Pour l'élément link</h3>
+
+<p>{{Compat("html.elements.link.crossorigin")}}</p>
+
+<h2 id="see_also">Voir aussi</h2>
<ul>
- <li><a href="/fr/docs/Web/HTTP/CORS">CORS</a></li>
+ <li><a href="/fr/docs/Web/HTTP/CORS">Partage des ressources entre origines (CORS)</a></li>
+ <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut HTML <code>rel</code></a></li>
</ul>