HTMLScriptElement.crossOrigin — Eigenschaft · JavaScript-Referenz

Signatur

HTMLScriptElement.crossOrigin

Beschreibung

Die Eigenschaft crossOrigin liest oder setzt das Attribut crossorigin eines <script>-Elements. Damit steuerst du, ob ein Skript von einem fremden Ursprung als CORS-Anfrage geladen wird und ob dabei Zugangsdaten (Cookies, HTTP-Authentifizierung, Client-Zertifikate) mitgeschickt werden.

Mögliche Werte:

"anonymous" (oder leerer String bzw. ungültiger Wert): CORS-Anfrage, Zugangsdaten nur bei gleichem Ursprung.
"use-credentials": CORS-Anfrage, Zugangsdaten werden immer mitgeschickt.
null: Das Attribut fehlt, das Skript wird klassisch ohne CORS geladen (bei klassischen Skripten).

Wichtig ist das vor allem in zwei Fällen: Erstens liefert window.onerror bzw. das error-Event nur mit CORS vollständige Fehlermeldungen samt Zeilennummer und Stacktrace (sonst nur "Script error."). Zweitens ist CORS Voraussetzung für Subresource Integrity (integrity) bei Skripten von fremden Ursprüngen, etwa von einem CDN.

Setze die Eigenschaft bei dynamisch erzeugten Skripten vor dem Zuweisen von src bzw. dem Einfügen ins Dokument. Wird sie später geändert, hat das auf einen bereits gestarteten Ladevorgang keine Wirkung.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Setzen: `"anonymous"`, `"use-credentials"` oder `null` (entfernt das Attribut). Ungültige Werte werden beim Lesen als `"anonymous"` zurückgegeben.

Rückgabewert

Typ

string | null

Beschreibung

"anonymous", "use-credentials" oder null, wenn das Attribut crossorigin nicht gesetzt ist.

Beispiele

CDN-Skript dynamisch mit SRI und CORS laden

const loadScript = (src, integrity) => new Promise((resolve, reject) => {
  const script = document.createElement('script');
  // crossOrigin VOR src setzen, sonst greift SRI nicht korrekt
  script.crossOrigin = 'anonymous';
  script.integrity = integrity;
  script.src = src;
  script.onload = () => resolve(script);
  script.onerror = () => reject(new Error(`Laden fehlgeschlagen: ${src}`));
  document.head.append(script);
});

await loadScript(
  'https://cdn.example.com/lib.min.js',
  'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC'
);
console.log('Bibliothek geladen');

Bibliothek geladen

Wert auslesen und normalisieren

const script = document.createElement('script');
console.log(script.crossOrigin);

script.setAttribute('crossorigin', '');
console.log(script.crossOrigin);

script.setAttribute('crossorigin', 'foobar');
console.log(script.crossOrigin);

script.crossOrigin = 'use-credentials';
console.log(script.getAttribute('crossorigin'));

script.crossOrigin = null;
console.log(script.hasAttribute('crossorigin'));

null anonymous anonymous use-credentials false

Vollständige Fehlerdetails für Fremd-Skripte erhalten

window.addEventListener('error', (event) => {
  // Ohne crossOrigin: nur "Script error." ohne Datei/Zeile
  console.log(event.message, event.filename, event.lineno);
});

const script = document.createElement('script');
script.crossOrigin = 'anonymous'; // Server muss Access-Control-Allow-Origin senden
script.src = 'https://static.example.com/widget.js';
document.body.append(script);

Uncaught TypeError: x is undefined https://static.example.com/widget.js 42

// Wichtig · Fallstricke

Server muss mitspielen: Mit gesetztem crossOrigin wird das Skript als CORS-Anfrage geladen. Sendet der Server keinen passenden Access-Control-Allow-Origin-Header, wird das Skript blockiert und nicht ausgeführt – anders als ohne Attribut.
"use-credentials" erfordert serverseitig Access-Control-Allow-Credentials: true und einen konkreten Ursprung statt *.
Modul-Skripte (type="module") werden immer per CORS geladen; ohne Attribut verhalten sie sich wie "anonymous" (Zugangsdaten nur bei gleichem Ursprung).
Die Eigenschaft heißt in JavaScript crossOrigin (CamelCase), das HTML-Attribut crossorigin.
Nachträgliches Ändern nach Ladebeginn hat keine Wirkung; außerdem kann ein abweichender CORS-Modus zu doppelten Anfragen führen, wenn dieselbe URL per <link rel=\"preload\"> mit anderem crossorigin-Wert vorgeladen wurde.
Browser-Kompatibilität: in allen aktuellen Browsern unterstützt; sehr alte Versionen (z. B. IE) kennen die Eigenschaft nicht.

Siehe auch

HTMLScriptElement.blocking HTMLScriptElement.integrity HTMLScriptElement.noModule HTMLScriptElement.src HTMLScriptElement.async