Signatur
Beschreibung
Die Eigenschaft protocol des SVGAElement liefert das Schema der Ziel-URL eines SVG-Links, also den Teil vor dem ersten Doppelpunkt, einschließlich des Doppelpunkts, z. B. "https:", "mailto:" oder "tel:". Grundlage ist das Attribut href bzw. das veraltete xlink:href. Relative URLs werden vorher gegen die Basis-URL des Dokuments aufgelöst.
In SVG 2 übernimmt SVGAElement die Schnittstelle HTMLHyperlinkElementUtils. Deshalb verhält sich protocol genauso wie HTMLAnchorElement.protocol. Die Eigenschaft ist lesbar und schreibbar: Beim Schreiben wird nur das Schema der URL ersetzt und das href-Attribut entsprechend aktualisiert.
Typische Einsatzfälle sind Links in eingebetteten SVG-Grafiken wie Diagrammen, Karten oder Infografiken. Du kannst damit zum Beispiel externe Links erkennen, mailto:-Links gesondert behandeln, unsichere Schemata wie javascript: herausfiltern oder in einer Grafik alle Links von http: auf https: umstellen.
Rückgabewert
:, z. B. "https:". Ist die URL ungültig oder fehlt sie, wird je nach Implementierung ":" oder ein leerer String zurückgegeben.Beispiele
Protokoll eines SVG-Links auslesen
const svgNS = 'http://www.w3.org/2000/svg';
const link = document.createElementNS(svgNS, 'a');
link.setAttribute('href', 'https://programmierung.net/referenz');
console.log(link.protocol);Browserübergreifend mit Fallback über URL
// Nicht jeder Browser kennt SVGAElement.protocol, daher ein Fallback
const getProtocol = (svgLink) => {
if (typeof svgLink.protocol === 'string') return svgLink.protocol;
const raw = svgLink.getAttribute('href') ?? svgLink.getAttribute('xlink:href') ?? '';
try {
return new URL(raw, document.baseURI).protocol;
} catch {
return '';
}
};
document.querySelectorAll('svg a').forEach((a) => {
console.log(a.getAttribute('href'), '→', getProtocol(a));
});Unsichere Links in SVG entschärfen und HTTP auf HTTPS umstellen
const erlaubt = new Set(['https:', 'http:', 'mailto:', 'tel:']);
document.querySelectorAll('svg a').forEach((a) => {
const proto = a.protocol ?? new URL(a.getAttribute('href') ?? '', document.baseURI).protocol;
if (!erlaubt.has(proto)) {
// z. B. javascript: oder data: entfernen
a.removeAttribute('href');
a.removeAttribute('xlink:href');
return;
}
if (proto === 'http:' && 'protocol' in a) {
a.protocol = 'https:'; // aktualisiert das href-Attribut
}
});// Wichtig · Fallstricke
- Browser-Kompatibilität: Die URL-Bestandteile wie
protocol,hostundpathnameamSVGAElementwerden noch nicht in allen Browsern unterstützt. Prüfe die Verfügbarkeit mit'protocol' in elementund nutze sonstnew URL(href, document.baseURI).protocol. - Der Doppelpunkt gehört dazu: Vergleiche mit
'https:', nicht mit'https'. SVGAElement.hrefist kein String, sondern einSVGAnimatedString. Den Rohwert bekommst du überhref.baseValodergetAttribute('href').- Sicherheit: SVG-Links können
javascript:-URLs enthalten. Bei SVG von Nutzern oder aus fremden Quellen solltest du Links immer anhand des Schemas prüfen. Besser ist ein bewährter Sanitizer, zum Beispiel DOMPurify. - Beim Setzen werden ungültige Schemata stillschweigend ignoriert. Der Wechsel zwischen besonderen Schemata (
http:,https:) und anderen (mailto:) kann laut URL-Standard ebenfalls ohne Wirkung bleiben.