SVGAElement.username — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.username

Beschreibung

Die Eigenschaft username des SVGAElement liefert den Benutzernamen, der in der Ziel-URL des SVG-Links steht. In einer URL wie https://anna:geheim@example.com/ ist das anna. Gibt es keinen Benutzernamen, ist der Wert ein leerer String "".

Die Eigenschaft gehört zu der Gruppe von URL-Eigenschaften, die SVG 2 vom HTML-Mixin HTMLHyperlinkElementUtils übernimmt (protocol, host, hostname, port, pathname, search, hash, password, username usw.). Sie funktioniert genauso wie HTMLAnchorElement.username: Man kann einen Teil der Link-URL lesen oder ändern, ohne den ganzen URL-String selbst zu zerlegen.

Wenn du username setzt, schreibt der Browser das href-Attribut des Elements neu. Sonderzeichen werden dabei automatisch prozentkodiert, zum Beispiel wird aus @ die Folge %40. Hat die URL keinen Host (etwa bei mailto: oder data:) oder verwendet sie das Schema file:, passiert beim Setzen nichts.

In der Praxis braucht man die Eigenschaft vor allem, um Links in SVG-Grafiken zu prüfen oder zu bereinigen, zum Beispiel um eingebettete Zugangsdaten zu erkennen und zu entfernen.

Rückgabewert

Typ

string

Beschreibung

Der Benutzername aus der Ziel-URL, prozentkodiert. Ist keiner vorhanden, ist der Wert ein leerer String "". Die Eigenschaft ist beschreibbar.

Beispiele

Benutzernamen aus einem SVG-Link lesen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
const link = document.createElementNS(SVG_NS, 'a');
link.setAttribute('href', 'https://anna:geheim@example.com/dashboard');
svg.append(link);
document.body.append(svg);

console.log(link.username);
console.log(link.password);

anna geheim

Benutzernamen setzen – Sonderzeichen werden kodiert

const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
link.setAttribute('href', 'https://example.com/login');

link.username = 'max@firma';
console.log(link.getAttribute('href'));
console.log(link.username);

https://max%40firma@example.com/login max%40firma

Zugangsdaten aus allen SVG-Links entfernen (mit Fallback)

const stripCredentials = (root = document) => {
  const supported = 'username' in SVGAElement.prototype;

  for (const a of root.querySelectorAll('svg a')) {
    if (supported) {
      if (a.username || a.password) {
        a.username = '';
        a.password = '';
      }
      continue;
    }
    // Fallback über die URL-API
    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);
    }
  }
};

stripCredentials();

// Wichtig · Fallstricke

Browser-Unterstützung: Die URL-Eigenschaften von SVGAElement (SVG 2) werden nicht von allen Browsern unterstützt. Prüfe das vorher mit 'username' in SVGAElement.prototype und nutze sonst new URL(a.getAttribute('href'), document.baseURI). Ohne Unterstützung ist username einfach undefined. Es wird dann kein Fehler ausgelöst.
Nicht mit href verwechseln: SVGAElement.href ist ein SVGAnimatedString und kein String. Den ganzen URL-String bekommst du über a.href.baseVal oder getAttribute('href').
Kodierung: Der Rückgabewert ist prozentkodiert. Wenn du ihn anzeigen willst, dekodiere ihn mit decodeURIComponent().
Kein Effekt beim Setzen: Bei URLs ohne Host (zum Beispiel mailto: oder data:), bei file:-URLs und bei ungültigen href-Werten ändert sich nichts.
Sicherheit: Zugangsdaten in URLs gelten als unsicher. Sie tauchen im Verlauf, in Logs und im Referer-Kontext auf und werden für Phishing missbraucht (zum Beispiel https://bank.de@boese.example/). Viele Browser blockieren oder warnen bei solchen URLs. Schreibe deshalb keine echten Passwörter per username oder password in Links, sondern nutze sichere Anmeldeverfahren.

Siehe auch

SVGAElement SVGAElement.password SVGAElement.host SVGAElement.href HTMLAnchorElement.username URL.username IdleDetector.userState