Prüfung der Funktionserkennung der Credential Management API

Eiji Kitamura

Zusammenfassung

WebAuthn trägt zur Erhöhung der Sicherheit bei, da die Public-Key-Authentifizierung ins Web gebracht wird. Die Funktion wird bald in Chrome, Firefox und Edge unterstützt (mit der aktualisierten Spezifikation). Es wird eine neue Art von Credential-Objekt hinzugefügt, die jedoch Websites beeinträchtigen kann, die die Credential Management API verwenden, ohne die verwendeten Anmeldedatentypen zu erkennen.

Wenn Sie dies derzeit für die Feature-Erkennung tun

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

Stattdessen

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Hier finden Sie die Änderungen, die am Beispielcode vorgenommen wurden.

Lesen Sie weiter, um zusätzliche Informationen zu erhalten!

Hinweis : Wenn Sie die Google-Identität als primäre Anmeldemethode für Ihre Nutzer verwenden, können Sie die JavaScript-Bibliothek für die Registrierung und automatische Anmeldung mit nur einem Fingertipp verwenden, die auf der Credential Management API basiert. Sie kombiniert die Anmeldung über Google und die passwortbasierte Anmeldung in einem API-Aufruf und bietet Unterstützung für die Erstellung von Konten mit nur einem Tippen.

Was ist die Credential Management API?

Die Credential Management API (CM API) bietet Websites programmatischen Zugriff auf das Anmeldedatenspeicher des User-Agents zum Speichern und Abrufen von Nutzeranmeldedaten für den aufrufenden Ursprung.

Zu den grundlegenden APIs gehören:

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.create()
• navigator.credentials.preventSilentAccess()

Die ursprüngliche CM API-Spezifikation definiert zwei Anmeldedatentypen:

• PasswordCredential
• FederatedCredential

PasswordCredential ist ein Anmeldedatensatz, der die ID und das Passwort des Nutzers enthält. FederatedCredential ist ein Anmeldedatensatz, der die ID des Nutzers und einen String enthält, der einen Identitätsanbieter darstellt.

Mit diesen beiden Anmeldedaten können Websites:

• Nutzer können sich mit einem zuvor gespeicherten passwortbasierten oder föderierten Anmeldedatensatz anmelden, sobald sie die Seite aufrufen (automatische Anmeldung).
• Speichern Sie die passwortbasierten oder föderierten Anmeldedaten, mit denen sich der Nutzer angemeldet hat.
• Anmeldedaten des Nutzers auf dem neuesten Stand halten (z.B. nach einer Passwortänderung)

Was ist WebAuthn?

WebAuthn (Web Authentication) fügt der CM API Public-Key-Anmeldedaten hinzu. So können Websites beispielsweise die Zwei-Faktor-Authentifizierung mithilfe von FIDO 2.0-kompatiblen Authentifizierungsgeräten standardmäßig implementieren.

Auf technischer Ebene erweitert WebAuthn die CM API um die PublicKeyCredential-Schnittstelle.

Was ist das Problem?

Bisher haben wir Entwicklern empfohlen, die CM API mit dem folgenden Code zu erkennen:

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
</td></tr></tbody></table>


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Hier finden Sie die tatsächlichen Änderungen, die am Beispielcode vorgenommen wurden.

Hier ist eine Referenz zum Erkennen von PublicKeyCredential, die in WebAuthn hinzugefügt wurde:

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

Zeitachse

Die früheste verfügbare Implementierung von WebAuthn ist Firefox. Die stabile Version soll Anfang Mai 2018 verfügbar sein.

Finally

Wenn Sie Fragen haben, senden Sie eine E-Mail an @agektmr oder an [e-mail].