Signatur
Beschreibung
Die Eigenschaft crossOrigin eines HTMLLinkElement spiegelt das HTML-Attribut crossorigin des <link>-Elements wider. Sie legt fest, ob die verknüpfte Ressource (Stylesheet, Preload, Modul-Preload, Font usw.) im CORS-Modus abgerufen wird und ob dabei Anmeldedaten wie Cookies oder HTTP-Authentifizierung mitgeschickt werden.
Mögliche Werte:
"anonymous"– CORS-Anfrage ohne Anmeldedaten bei fremden Origins (Credentials-Modussame-origin). Jeder ungültige Wert und auch ein leerer String werden als"anonymous"behandelt."use-credentials"– CORS-Anfrage mit Anmeldedaten (Credentials-Modusinclude). Der Server muss dannAccess-Control-Allow-Credentials: trueund einen konkreten Origin (nicht*) senden.null– Attribut fehlt; die Ressource wird ohne CORS geladen (Modusno-cors).
Praktisch wichtig ist die Eigenschaft vor allem bei rel="preload" und rel="modulepreload": Der Preload wird nur wiederverwendet, wenn sein CORS-Modus exakt mit dem der späteren Anfrage übereinstimmt. Schriftarten werden immer im CORS-Modus geladen, daher benötigt ein Font-Preload stets crossorigin. Außerdem ist CORS Voraussetzung für Subresource Integrity bei fremden Origins und für den Zugriff auf cssRules fremder Stylesheets.
Die Eigenschaft sollte gesetzt werden, bevor das Element ins Dokument eingefügt bzw. href gesetzt wird, da sonst bereits eine Anfrage mit falschem Modus gestartet sein kann.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | null | null | Beim Setzen: "anonymous", "use-credentials" oder null (entfernt das Attribut crossorigin). |
Rückgabewert
"anonymous", "use-credentials" oder null, falls das Attribut nicht gesetzt ist. Ungültige Attributwerte werden als "anonymous" zurückgegeben.Beispiele
Font-Preload dynamisch mit CORS anlegen
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'font';
link.type = 'font/woff2';
// Fonts werden immer per CORS geladen – ohne crossOrigin wird der Preload verworfen
link.crossOrigin = 'anonymous';
link.href = 'https://cdn.example.com/fonts/inter.woff2';
document.head.append(link);
console.log(link.crossOrigin);
console.log(link.outerHTML.includes('crossorigin="anonymous"'));Externes Stylesheet mit SRI laden
const css = document.createElement('link');
css.rel = 'stylesheet';
css.crossOrigin = 'anonymous'; // Pflicht für SRI bei fremden Origins
css.integrity = 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC';
css.href = 'https://cdn.example.com/lib.min.css';
css.addEventListener('load', () => {
// Dank CORS sind die Regeln lesbar
console.log('Regeln:', css.sheet.cssRules.length);
});
css.addEventListener('error', () => console.error('Laden oder Integritätsprüfung fehlgeschlagen'));
document.head.append(css);Werte auslesen, normalisieren und entfernen
const link = document.createElement('link');
console.log(link.crossOrigin); // kein Attribut
link.setAttribute('crossorigin', '');
console.log(link.crossOrigin); // leerer String → anonymous
link.setAttribute('crossorigin', 'foo');
console.log(link.crossOrigin); // ungültig → anonymous
link.crossOrigin = 'use-credentials';
console.log(link.getAttribute('crossorigin'));
link.crossOrigin = null; // Attribut entfernen
console.log(link.hasAttribute('crossorigin'));// Wichtig · Fallstricke
- Preload-Mismatch: Stimmt
crossOrigineines Preloads nicht mit der späteren Anfrage überein (z. B. Preload ohne,<script type="module">mit CORS), lädt der Browser die Ressource doppelt und meldet eine Konsolenwarnung.rel="modulepreload"nutzt standardmäßig CORS. - Server-Konfiguration: Im CORS-Modus muss der Server passende
Access-Control-Allow-Origin-Header senden, sonst schlägt das Laden fehl (error-Event). Bei"use-credentials"ist*als Origin nicht zulässig. - Datenschutz:
"use-credentials"schickt Cookies an Drittanbieter – nur verwenden, wenn wirklich benötigt. - Reihenfolge:
crossOriginvorhrefbzw. vor dem Einfügen setzen; ein nachträgliches Ändern löst bei Stylesheets ggf. ein erneutes Laden aus. - Kompatibilität: In allen modernen Browsern unterstützt;
nullals Rückgabewert bei fehlendem Attribut ist in älteren Browsern (vor ca. 2016) teils uneinheitlich umgesetzt.