PasswordCredential.password — Eigenschaft · JavaScript-Referenz

Signatur

PasswordCredential.password

Beschreibung

Die Eigenschaft password der Schnittstelle PasswordCredential ist schreibgeschützt und enthält das Passwort des Anmeldedatensatzes als String. Sie gehört zur Credential Management API. Mit dieser API kann eine Webanwendung gespeicherte Zugangsdaten aus dem Passwortmanager des Browsers abrufen (navigator.credentials.get()) oder neue Zugangsdaten dort ablegen (navigator.credentials.store()).

Typischer Einsatz ist die automatische Anmeldung: Die Seite fordert beim Laden ein PasswordCredential an, liest id (den Benutzernamen) und password aus und schickt beide per fetch() an den eigenen Anmelde-Endpunkt. So muss der Nutzer das Formular nicht selbst ausfüllen.

Das Passwort wird beim Erzeugen festgelegt, entweder über den Konstruktor new PasswordCredential({ id, password, ... }) oder aus einem <form>-Element mit passenden autocomplete-Attributen (current-password bzw. new-password). Danach lässt es sich nicht mehr ändern. Wer ein anderes Passwort speichern will, erzeugt ein neues Objekt.

Rückgabewert

Typ

string

Beschreibung

Das im Anmeldedatensatz hinterlegte Passwort im Klartext.

Beispiele

Credential erzeugen und Passwort auslesen

// Nur in Browsern mit PasswordCredential-Unterstützung (Chromium)
const cred = new PasswordCredential({
  id: 'anna@example.com',
  password: 'geheim123',
  name: 'Anna Beispiel'
});

console.log(cred.id);       // Benutzername
console.log(cred.password); // Passwort
console.log(cred.type);

anna@example.com geheim123 password

Automatische Anmeldung mit gespeichertem Passwort

const autoLogin = async () => {
  if (!('PasswordCredential' in window)) return false;

  const cred = await navigator.credentials.get({
    password: true,
    mediation: 'optional'
  });

  if (!cred || cred.type !== 'password') return false;

  const res = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'same-origin',
    body: JSON.stringify({ username: cred.id, password: cred.password })
  });
  return res.ok;
};

autoLogin().then(ok => console.log(ok ? 'Angemeldet' : 'Formular anzeigen'));

Angemeldet

Passwort aus einem Formular speichern

// HTML: <form id="login"><input name="user" autocomplete="username">
//        <input name="pw" type="password" autocomplete="current-password"></form>
const form = document.querySelector('#login');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const cred = new PasswordCredential(form);
  console.log('Passwortlänge:', cred.password.length);
  // Nach erfolgreicher Anmeldung im Passwortmanager ablegen
  await navigator.credentials.store(cred);
});

Passwortlänge: 9

Schreibschutz der Eigenschaft

const cred = new PasswordCredential({ id: 'bob', password: 'alt' });
cred.password = 'neu'; // wird ignoriert (im Strict Mode: TypeError)
console.log(cred.password);

alt

// Wichtig · Fallstricke

Browserunterstützung: PasswordCredential gibt es nur in Chromium-Browsern (Chrome, Edge, Opera, Samsung Internet). Firefox und Safari unterstützen die Schnittstelle nicht. Prüfen Sie deshalb vorher mit 'PasswordCredential' in window, ob sie vorhanden ist, und halten Sie immer ein normales Anmeldeformular bereit.
Sicherer Kontext: Die Schnittstelle funktioniert nur über HTTPS (oder auf localhost) und nur im Dokument der obersten Ebene, also nicht in fremden iframes.
Sicherheit: Das Passwort liegt im Klartext vor. Geben Sie es nicht mit console.log aus, speichern Sie es nicht in localStorage und senden Sie es nicht an Analyse- oder Fehlerdienste. Übertragen Sie es nur per HTTPS-POST an den eigenen Server. Bei XSS-Lücken können eingeschleuste Skripte die API ebenfalls aufrufen; eine strikte CSP verringert dieses Risiko.
Veraltetes Verhalten: Früher war password nicht lesbar, und Anmeldedaten mussten über fetch(url, { credentials: cred }) übertragen werden. Dieses Vorgehen ist veraltet; heute liest man password direkt aus.
Rückgabe von navigator.credentials.get() kann null sein oder ein anderer Credential-Typ (z. B. FederatedCredential). Prüfen Sie daher cred.type === 'password', bevor Sie auf password zugreifen.

Siehe auch

Credential.id PasswordCredential.iconURL PasswordCredential.name PublicKeyCredential.rawId SVGAElement.password