Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Attribut HTML : crossorigin

L'attribut crossorigin est valide sur les éléments HTML <audio>, <img>, <link>, <script> et <video>. Il permet de gérer le CORS, c'est-à-dire la façon dont l'élément traite les requêtes inter-origines, et donc de configurer les requêtes CORS pour les données récupérées par l'élément. Selon l'élément, l'attribut peut être un attribut de configuration CORS.

L'attribut de contenu crossorigin sur les éléments média est un attribut de configuration CORS.

Ces attributs sont énumérés et acceptent les valeurs suivantes :

anonymous

La requête utilise les en-têtes CORS et le drapeau credentials est positionné à 'same-origin'. Il n'y a aucun échange de données d'identification utilisateur via les cookies, certificats TLS côté client ou authentification HTTP, sauf si la destination est la même origine.

use-credentials

La requête utilise les en-têtes CORS, le drapeau credentials est positionné à 'include' et les données d'identification utilisateur sont toujours incluses.

""

Définir l'attribut sans valeur ou avec une valeur vide, comme crossorigin ou crossorigin="", revient à utiliser anonymous.

Un mot-clé invalide ou une chaîne vide sera traité comme le mot-clé anonymous.

Par défaut (c'est-à-dire si l'attribut n'est pas défini), CORS n'est pas utilisé. L'agent utilisateur ne demandera pas d'accès complet à la ressource et, en cas de requête inter-origine, certaines limitations s'appliqueront selon le type d'élément concerné :

Élément Restrictions
img, audio, video Si la ressource est placée dans un <canvas>, l'élément est marqué comme pollué.
script L'accès à la journalisation des erreurs via window.onerror sera limité.
link Une requête sans en-tête crossorigin approprié peut être ignorée.

Note : L'attribut crossorigin n'est pas pris en charge pour rel="icon" dans les navigateurs basés sur Chromium. Voir le ticket Chromium ouvert (angl.).

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.fr/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

html
<script
  src="https://exemple.fr/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

html.elements.img.crossorigin

html.elements.link.crossorigin

html.elements.script.crossorigin

html.elements.video.crossorigin

Voir aussi