Attribut HTML : crossorigin

L'attribut crossorigin, valable sur les éléments <audio>, <img>, <link>, <script> et <video>, fournit la prise en charge de CORS, 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.

L'attribut de contenu crossorigin sur les éléments médias est un attribut de paramétrage CORS.

Ces attributs sont énumérés, et ont les valeurs possibles suivantes :

Mot-clé Description
anonymous Les requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'same-origin'.
use-credentials Les requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'include'.
"" Utiliser la chaîne vide (crossorigin="") ou l'attribut seul (crossorigin) sera équivalent à l'utilisation de la valeur anonymous.

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**'informations d'authentification de l'utilisateur** via des cookies, ni des certificats TLS côté client ou des authentifications HTTP comme détaillé dans la section terminologique de la spécification CORS.

Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé anonymous.

Note : Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un bug sur Chrome.

Exemples

Utiliser crossorigin avec l'élément script

On peut utiliser l'élément <script> afin d'indiquer au navigateur d'exécuter un script (ici, https://exemple.com/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

html
<script
  src="https://exemple.com/framework-exemple.js"
  crossorigin="anonymous"></script>

Utiliser des informations d'authentification avec un manifeste

La valeur use-credentials 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 :

html
<link rel="manifest" href="/app.manifest" crossorigin="use-credentials" />

Spécifications

Specification
HTML
# cors-settings-attributes

Compatibilité des navigateurs

html.elements.audio.crossorigin

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
crossorigin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

html.elements.img.crossorigin

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
crossorigin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.link.crossorigin

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
crossorigin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

html.elements.script.crossorigin

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
crossorigin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

html.elements.video.crossorigin

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
crossorigin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Voir aussi