1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
---
title: 'Attribut HTML : crossorigin'
slug: Web/HTML/Attributes/crossorigin
tags:
- 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 class="summary">L'attribut <strong><code>crossorigin</code></strong>, valable sur les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code><video></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">
<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é « 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>
<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>
<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>
<p>On peut utiliser l'élément <a href="/fr/docs/Web/HTML/Element/script"><code><script></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>
<pre class="brush: html"><script src="https://exemple.com/framework-exemple.js" crossorigin="anonymous"></script></pre>
<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"><link rel="manifest" href="/app.manifest" crossorigin="use-credentials"></pre>
<h2 id="specifications">Spécifications</h2>
<table class="standard-table">
<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="browser_compatibility">Compatibilité des navigateurs</h2>
<h3 id="script_crossorigin">Pour l'élément script</h3>
<p>{{Compat("html.elements.script.crossorigin")}}</p>
<h3 id="video_crossorigin">Pour l'élément video</h3>
<p>{{Compat("html.elements.video.crossorigin")}}</p>
<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">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>
|
