Signatur
Beschreibung
Die Eigenschaft password des Interfaces SVGAElement gibt den Passwortteil der Ziel-URL eines SVG-Links zurück, also den Teil nach dem Doppelpunkt in https://benutzer:passwort@host/. Ist kein Passwort angegeben, ist der Wert ein leerer String "".
Laut SVG-2-Spezifikation übernimmt SVGAElement die URL-Zerlegungseigenschaften aus HTMLHyperlinkElementUtils, also dieselben Eigenschaften wie HTMLAnchorElement: protocol, username, password, host, hostname, port, pathname, search, hash und origin. Mit einer Zuweisung an password wird das Passwort in der URL geändert und das href-Attribut passend neu geschrieben. Das Passwort wird dabei prozentkodiert.
In der Praxis braucht man die Eigenschaft kaum, weil Zugangsdaten in URLs als veraltet und unsicher gelten. Am ehesten hilft sie, um solche Links in SVG-Grafiken zu erkennen und zu bereinigen, also das Passwort vor der Anzeige oder Weitergabe zu entfernen.
Rückgabewert
href-Attribut oder "", wenn keines vorhanden ist. Die Eigenschaft ist beschreibbar.Beispiele
Passwort mit Feature-Erkennung und Fallback auslesen
const link = document.querySelector('svg a');
// Liest das Passwort über SVGAElement.password, falls unterstützt, sonst über die URL-API
const getPassword = (el) => {
if ('password' in el) return el.password;
// SVGAElement.href ist ein SVGAnimatedString, kein String!
const raw = el.href.baseVal || el.getAttribute('xlink:href') || '';
return new URL(raw, document.baseURI).password;
};
// <a href="https://admin:geheim@example.com/"> in der SVG-Grafik
console.log(getPassword(link));
Passwort per URL-API ändern und zurückschreiben
const svgNS = 'http://www.w3.org/2000/svg';
const a = document.createElementNS(svgNS, 'a');
a.setAttribute('href', 'https://nutzer:alt@example.com/dashboard');
if ('password' in a) {
a.password = 'neu';
} else {
const url = new URL(a.getAttribute('href'));
url.password = 'neu';
a.setAttribute('href', url.href);
}
console.log(a.getAttribute('href'));
Zugangsdaten aus allen SVG-Links entfernen
// Bereinigt Links vor dem Export oder der Anzeige einer SVG-Grafik
const stripCredentials = (root = document) => {
for (const a of root.querySelectorAll('svg a')) {
const raw = a.getAttribute('href') ?? a.getAttribute('xlink:href');
if (!raw) continue;
const url = new URL(raw, document.baseURI);
if (url.username || url.password) {
url.username = '';
url.password = '';
a.setAttribute('href', url.href);
console.log('Bereinigt:', url.href);
}
}
};
stripCredentials();
// Wichtig · Fallstricke
- Browser-Unterstützung: Die URL-Zerlegungseigenschaften von
SVGAElementstehen zwar in der SVG-2-Spezifikation, sind aber kaum implementiert. Prüfe deshalb mit'password' in element, ob die Eigenschaft vorhanden ist. Als Fallback eignet sichnew URL(...), wie in den Beispielen gezeigt. - Anderer Typ als bei HTML:
SVGAElement.hrefist einSVGAnimatedStringund kein String. Den URL-Text bekommst du überhref.baseValodergetAttribute('href'). - Veraltetes
xlink:href: Ältere SVG-Dateien verwenden nochxlink:href. Frage beide Attribute ab. - Sicherheit: Zugangsdaten in URLs sind unsicher. Sie tauchen im Verlauf, in Protokollen, im Quelltext und unter Umständen im
Refererauf. Viele Browser blockieren solche Unterressourcen oder zeigen Warnungen. Speichere keine echten Passwörter inhref-Attributen. - Kodierung: Sonderzeichen wie
@oder:werden beim Setzen prozentkodiert (%40,%3A). Beim Lesen bekommst du den kodierten Wert. MitdecodeURIComponent()erhältst du den Klartext.