Start · Sprachen · JavaScript · Referenz · SVGAElement.password

SVGAElement.password

Eigenschaft

Liest oder setzt die Passwortkomponente der URL im <code>href</code>-Attribut eines SVG-<code>&lt;a&gt;</code>-Elements als String.

seit JavaScript SVG 2 (HTMLHyperlinkElementUtils) – Browser-Unters Kategorie: webapi

Signatur

SVGAElement.password

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

Typ
string
Beschreibung
Das prozentkodierte Passwort aus der URL im 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));
geheim

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'));
https://nutzer:neu@example.com/dashboard

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();
Bereinigt: https://example.com/

// Wichtig · Fallstricke

  • Browser-Unterstützung: Die URL-Zerlegungseigenschaften von SVGAElement stehen 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 sich new URL(...), wie in den Beispielen gezeigt.
  • Anderer Typ als bei HTML: SVGAElement.href ist ein SVGAnimatedString und kein String. Den URL-Text bekommst du über href.baseVal oder getAttribute('href').
  • Veraltetes xlink:href: Ältere SVG-Dateien verwenden noch xlink:href. Frage beide Attribute ab.
  • Sicherheit: Zugangsdaten in URLs sind unsicher. Sie tauchen im Verlauf, in Protokollen, im Quelltext und unter Umständen im Referer auf. Viele Browser blockieren solche Unterressourcen oder zeigen Warnungen. Speichere keine echten Passwörter in href-Attributen.
  • Kodierung: Sonderzeichen wie @ oder : werden beim Setzen prozentkodiert (%40, %3A). Beim Lesen bekommst du den kodierten Wert. Mit decodeURIComponent() erhältst du den Klartext.