SVGImageElement.crossOrigin — Eigenschaft · JavaScript-Referenz

Signatur

SVGImageElement.crossOrigin

Beschreibung

Die Eigenschaft crossOrigin des SVGImageElement-Interfaces spiegelt das Attribut crossorigin des SVG-Elements <image> wider. Sie bestimmt, ob das per href angegebene Bild als CORS-Anfrage geladen wird und ob dabei Zugangsdaten (Cookies, HTTP-Authentifizierung, Client-Zertifikate) mitgeschickt werden.

Erlaubt sind folgende Werte:

"anonymous" – CORS-Anfrage ohne Zugangsdaten (Credentials-Modus same-origin).
"use-credentials" – CORS-Anfrage mit Zugangsdaten (Credentials-Modus include).
null – das Attribut fehlt; das Bild wird ohne CORS geladen (no-cors).

Man benötigt die Eigenschaft vor allem, wenn Bilder von einem fremden Ursprung weiterverarbeitet werden sollen – etwa wenn eine SVG-Grafik später in ein <canvas> gezeichnet und per toDataURL() oder getImageData() ausgelesen wird. Ohne CORS gilt das Bild als ursprungsfremd, und der Canvas wird „verunreinigt“ (tainted). Der Server muss dafür passende Access-Control-Allow-Origin-Header senden.

Wie bei HTMLImageElement.crossOrigin sollte die Eigenschaft vor dem Setzen von href belegt werden, damit bereits die erste Anfrage im richtigen CORS-Modus erfolgt.

Parameter

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

Rückgabewert

Typ

string | null

Beschreibung

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

Beispiele

CORS-Modus vor dem Laden setzen

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

const img = document.createElementNS(SVG_NS, 'image');
img.crossOrigin = 'anonymous'; // zuerst CORS festlegen
img.setAttribute('width', '200');
img.setAttribute('height', '150');
img.setAttribute('href', 'https://cdn.example.com/foto.jpg');

svg.append(img);
console.log(img.crossOrigin);
console.log(img.getAttribute('crossorigin'));

anonymous anonymous

Reflexionsverhalten des Attributs

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

console.log(img.crossOrigin);          // kein Attribut

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

img.setAttribute('crossorigin', 'foo');
console.log(img.crossOrigin);          // ungültiger Wert

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

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

null anonymous anonymous use-credentials false

Feature-Erkennung mit Fallback aufs Attribut

const setCors = (imageEl, mode = 'anonymous') => {
  if ('crossOrigin' in SVGImageElement.prototype) {
    imageEl.crossOrigin = mode;
  } else {
    // ältere Browser: Attribut direkt setzen
    imageEl.setAttribute('crossorigin', mode);
  }
};

const img = document.querySelector('svg image');
setCors(img);
img.setAttribute('href', 'https://cdn.example.com/logo.png');

// Wichtig · Fallstricke

Reihenfolge: crossOrigin vor href setzen. Wird der Modus nachträglich geändert, kann das Bild erneut angefordert werden oder eine bereits gecachte Antwort ohne CORS-Header zu Fehlern führen.
Server-Konfiguration nötig: Ohne passenden Access-Control-Allow-Origin-Header schlägt das Laden im CORS-Modus fehl – das Bild wird dann gar nicht angezeigt, statt nur „tainted“ zu sein.
use-credentials: Der Server darf dann nicht Access-Control-Allow-Origin: * senden, sondern muss den konkreten Ursprung nennen und zusätzlich Access-Control-Allow-Credentials: true senden. Zugangsdaten nur an vertrauenswürdige Ursprünge schicken.
Kompatibilität: Die IDL-Eigenschaft ist in Browsern relativ neu. In älteren Versionen fehlt sie, das Attribut crossorigin wird dort teils ignoriert. Mit 'crossOrigin' in SVGImageElement.prototype prüfen.
Ungültige oder leere Attributwerte liefern beim Lesen "anonymous", nicht den Originalwert.

Siehe auch

SVGImageElement HTMLImageElement.crossOrigin HTMLMediaElement.crossOrigin SVGImageElement.href CanvasRenderingContext2D.drawImage() HTMLCanvasElement.toDataURL() PaymentRequestEvent.topOrigin