SVGScriptElement.crossOrigin — Eigenschaft · JavaScript-Referenz

Signatur

SVGScriptElement.crossOrigin

Beschreibung

Die Eigenschaft crossOrigin der Schnittstelle SVGScriptElement spiegelt das Inhaltsattribut crossorigin eines <script>-Elements in SVG wider. Sie steuert, ob der Browser ein externes Skript, das über href (oder das veraltete xlink:href) eingebunden ist, als CORS-Anfrage lädt. Außerdem legt sie fest, ob dabei Zugangsdaten wie Cookies, HTTP-Authentifizierung oder Client-Zertifikate mitgeschickt werden.

Die Eigenschaft funktioniert genauso wie HTMLScriptElement.crossOrigin. Mögliche Werte:

"anonymous": CORS-Anfrage ohne Zugangsdaten bei fremden Ursprüngen (Credentials-Modus same-origin).
"use-credentials": CORS-Anfrage, die immer Zugangsdaten mitschickt (Credentials-Modus include).
null: Das Attribut fehlt. Das Skript wird dann ohne CORS geladen, also im Modus no-cors.

Sinnvoll ist das vor allem, wenn SVG-Grafiken Skripte von einem CDN oder einer anderen Domain laden. Nur mit crossorigin bekommt man bei Fehlern im fremden Skript vollständige Fehlermeldungen im error-Ereignis bzw. in window.onerror, statt nur ein allgemeines „Script error.“. Außerdem ist crossorigin Voraussetzung dafür, dass Subresource Integrity (integrity) bei fremden Ursprüngen greift.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Setzen: `"anonymous"`, `"use-credentials"` oder `null`. Mit `null` wird das Attribut entfernt. Leere oder ungültige Werte werden beim Lesen als `"anonymous"` geliefert.

Rückgabewert

Typ

string | null

Beschreibung

"anonymous", "use-credentials" oder null, wenn das Attribut crossorigin fehlt.

Beispiele

Aktuellen Wert eines SVG-Skripts auslesen

// <svg id="grafik" xmlns="http://www.w3.org/2000/svg">
//   <script href="https://cdn.example.com/anim.js" crossorigin="anonymous"></script>
// </svg>
const script = document.querySelector('#grafik script');
console.log(script instanceof SVGScriptElement); // true
console.log(script.crossOrigin);

true anonymous

SVG-Skript dynamisch mit CORS nachladen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const script = document.createElementNS(SVG_NS, 'script');
// crossOrigin VOR dem Einfügen setzen – danach ist es zu spät
script.crossOrigin = 'anonymous';
script.setAttribute('href', 'https://cdn.example.com/diagramm.js');

script.addEventListener('load', () => console.log('Skript geladen'));
script.addEventListener('error', () => console.error('Laden fehlgeschlagen (CORS?)'));

svg.append(script);
console.log(script.getAttribute('crossorigin'));

anonymous Skript geladen

Normalisierung ungültiger Werte und Entfernen des Attributs

const script = document.createElementNS('http://www.w3.org/2000/svg', 'script');

console.log(script.crossOrigin);        // Attribut fehlt

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

script.crossOrigin = 'irgendwas';       // ungültiger Wert
console.log(script.crossOrigin);

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

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

null anonymous anonymous use-credentials false

// Wichtig · Fallstricke

Zeitpunkt: Der Wert wirkt nur, wenn er gesetzt ist, bevor das Skript geladen wird, also vor dem Einfügen ins Dokument bzw. vor dem Setzen von href. Spätere Änderungen lösen keinen neuen Ladevorgang aus.
Server muss mitspielen: Mit crossorigin muss der fremde Server den Header Access-Control-Allow-Origin senden, sonst schlägt das Laden fehl und das error-Ereignis wird ausgelöst. Bei \"use-credentials\" darf dieser Header nicht * sein und zusätzlich muss Access-Control-Allow-Credentials: true gesetzt sein.
Sicherheit: Verwende \"use-credentials\" nur bei vertrauenswürdigen Quellen, weil dabei Cookies an fremde Server gehen. Die Content Security Policy (script-src) gilt unabhängig davon.
Inline-Skripte: Bei SVG-Skripten ohne href hat die Eigenschaft keine Wirkung.
Kompatibilität: SVGScriptElement.crossOrigin kam später in die Browser als das HTML-Gegenstück. Ältere Browser liefern undefined. Zur Erkennung eignet sich 'crossOrigin' in SVGScriptElement.prototype. Im Zweifel kann man stattdessen setAttribute('crossorigin', …) verwenden.
SVG-Skripte werden nur ausgeführt, wenn die SVG-Grafik inline oder per <object>/<iframe> eingebunden ist, nicht bei <img> oder CSS-Hintergründen.

Siehe auch

SVGScriptElement SVGScriptElement.type HTMLScriptElement.crossOrigin HTMLImageElement.crossOrigin Document.createElementNS() Element.setAttribute() PaymentRequestEvent.topOrigin