SVGScriptElement.href — Eigenschaft · JavaScript-Referenz

Signatur

SVGScriptElement.href

Beschreibung

Die Eigenschaft href der Schnittstelle SVGScriptElement gibt Zugriff auf die URL des externen Skripts, das ein SVG-<script>-Element lädt. Sie gehört zum Mixin SVGURIReference und spiegelt das Attribut href wider. Fehlt es, wird auf das ältere xlink:href zurückgegriffen.

Anders als bei HTMLScriptElement.src ist der Wert kein String. Du bekommst ein SVGAnimatedString-Objekt mit zwei Eigenschaften:

baseVal: der im Attribut stehende Wert. Er ist beschreibbar, und eine Änderung aktualisiert das Attribut.
animVal: der aktuelle, eventuell animierte Wert. Er ist nur lesbar und entspricht bei href praktisch immer baseVal.

Die Eigenschaft ist nützlich, wenn du prüfen willst, welche externen Skripte ein eingebettetes oder inline eingefügtes SVG-Dokument lädt, etwa für Sicherheitsprüfungen, beim Bereinigen von SVG-Dateien oder in Werkzeugen, die SVG-Dateien analysieren. baseVal enthält die URL genau so, wie sie im Attribut steht. Relative Pfade werden also nicht automatisch zu einer absoluten URL aufgelöst.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (string, beschreibbar) und animVal (string, nur lesbar). Ist kein Attribut gesetzt, sind beide leere Strings.

Beispiele

Skript-URL eines SVG-script-Elements auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const script = document.createElementNS(svgNS, 'script');
script.setAttribute('href', 'scripts/interaktiv.js');
svg.appendChild(script);

console.log(script.href instanceof SVGAnimatedString);
console.log(script.href.baseVal);
console.log(script.href.animVal);

true scripts/interaktiv.js scripts/interaktiv.js

Fallback auf das veraltete xlink:href

const xlinkNS = 'http://www.w3.org/1999/xlink';
const script = document.createElementNS('http://www.w3.org/2000/svg', 'script');
script.setAttributeNS(xlinkNS, 'xlink:href', 'legacy.js');

// href spiegelt xlink:href wider, wenn kein href-Attribut existiert
console.log(script.href.baseVal);

legacy.js

Externe Skripte in Inline-SVGs prüfen und auflösen

const scripts = document.querySelectorAll('svg script');

for (const s of scripts) {
  const raw = s.href.baseVal;
  if (!raw) continue; // Inline-Skript ohne externe Quelle
  const absolut = new URL(raw, document.baseURI);
  if (absolut.origin !== location.origin) {
    console.warn('Fremdes SVG-Skript gefunden:', absolut.href);
  }
}

URL über baseVal ändern

const script = document.createElementNS('http://www.w3.org/2000/svg', 'script');
script.href.baseVal = 'neu.js';
console.log(script.getAttribute('href'));

// Direkte Zuweisung an href hat keine Wirkung (nur Getter)
script.href = 'falsch.js';
console.log(script.href.baseVal);

neu.js neu.js

// Wichtig · Fallstricke

Kein String: script.href liefert ein SVGAnimatedString-Objekt. Für den Text brauchst du .baseVal. Wer script.href direkt in einer URL oder einem Vergleich verwendet, bekommt "[object SVGAnimatedString]".
Nur lesbar: href selbst hat nur einen Getter. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Änderungen gehen über href.baseVal oder setAttribute('href', …).
Relative URLs: baseVal wird nicht aufgelöst. Verwende new URL(wert, document.baseURI), um eine absolute URL zu erhalten.
xlink:href ist veraltet: Neue Dokumente sollten das einfache href nutzen (SVG 2). Sind beide Attribute gesetzt, hat href Vorrang.
Nachladen: Ein Skript wird in der Regel nur einmal ausgeführt. Wenn du baseVal nachträglich änderst, lädt der Browser das neue Skript normalerweise nicht. Erzeuge stattdessen ein neues <script>-Element.
Sicherheit: SVG-Dateien mit <script> sind eine bekannte Einfallstür für XSS. Das gilt besonders, wenn Nutzer SVG-Dateien hochladen und diese inline eingebettet oder direkt aufgerufen werden. Bereinige hochgeladene SVG-Dateien (z. B. mit DOMPurify), entferne <script>-Elemente und setze eine strenge Content Security Policy mit script-src. Als <img> eingebundene SVG-Dateien führen keine Skripte aus.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Ältere Browser erkennen eventuell nur xlink:href.

Siehe auch

SVGScriptElement SVGAnimatedString SVGScriptElement.type SVGScriptElement.crossOrigin HTMLScriptElement.src Element.setAttributeNS() HTMLScriptElement.integrity