HTML-Attribut: crossorigin
Das crossorigin
Attribut, gültig für die <audio>
, <img>
, <link>
, <script>
, und <video>
Elemente, bietet Unterstützung für CORS und definiert, wie das Element mit Cross-Origin-Anfragen umgeht. Dadurch kann die Konfiguration der CORS-Anfragen für die vom Element abgerufenen Daten ermöglicht werden. Je nach Element kann das Attribut ein CORS-Einstellungsattribut sein.
Das crossorigin
Inhaltsattribut bei Medienelementen ist ein CORS-Einstellungsattribut.
Diese Attribute sind aufgezählt und haben folgende mögliche Werte:
anonymous
-
Die Anfrage verwendet CORS-Header und das Credentials-Flag ist auf
'same-origin'
gesetzt. Es gibt keinen Austausch von Benutzeranmeldeinformationen über Cookies, Client-seitige TLS-Zertifikate oder HTTP-Authentifizierung, es sei denn, das Ziel ist derselbe Ursprung. use-credentials
-
Die Anfrage verwendet CORS-Header, das Credentials-Flag ist auf
'include'
gesetzt, und Benutzeranmeldeinformationen werden immer einbezogen. ""
-
Das Setzen des Attributnamens auf einen leeren Wert, wie
crossorigin
odercrossorigin=""
, ist dasselbe wieanonymous
.
Ein ungültiges Schlüsselwort und ein leerer String werden als das Schlüsselwort anonymous
behandelt.
Standardmäßig (d. h. wenn das Attribut nicht angegeben ist) wird CORS überhaupt nicht verwendet. Der Benutzeragent fragt nicht um Erlaubnis für den vollständigen Zugriff auf die Ressource, und im Falle einer Cross-Origin-Anfrage werden bestimmte Einschränkungen angewendet, abhängig vom betreffenden Elementtyp:
Element | Einschränkungen |
img , audio , video |
Wenn die Ressource in <canvas> platziert wird, wird das Element als verfälscht markiert.
|
script |
Der Zugriff auf Fehlerprotokollierung über [`window.onerror`](/de/docs/Web/API/Window/error_event) wird eingeschränkt. |
link |
Anfragen ohne passenden crossorigin Header können verworfen werden.
|
Hinweis:
Das crossorigin
Attribut wird bei rel="icon"
in auf Chromium basierten Browsern nicht unterstützt. Siehe das offene Chromium-Problem.
Beispiel: crossorigin
mit dem <script>
Element
Sie können das folgende <script>
Element verwenden, um einem Browser mitzuteilen, das Skript https://example.com/example-framework.js
auszuführen, ohne Benutzeranmeldeinformationen zu senden.
<script
src="https://example.com/example-framework.js"
crossorigin="anonymous"></script>
Beispiel: Web-Manifest mit Anmeldedaten
Der Wert use-credentials
muss verwendet werden, wenn ein Manifest abgerufen wird, das Anmeldeinformationen erfordert, selbst wenn die Datei aus demselben Ursprung stammt.
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
Spezifikationen
Specification |
---|
HTML # cors-settings-attributes |
Browser-Kompatibilität
html.elements.audio.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.