Verificación de la detección de atributos de la API de Credential Management

Resumen

WebAuthn ayuda a aumentar la seguridad mediante la autenticación basada en credenciales de clave pública en la Web, y pronto será compatible con Chrome, Firefox y Edge (con las especificaciones actualizadas). Agrega un tipo nuevo de objeto Credential, que, sin embargo, puede dañar los sitios web que usan la API de Credential Management sin detectar funciones para detectar los tipos de credenciales específicos que están usando.

Si actualmente haces esto para la detección de funciones

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

Haz lo siguiente

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()
}

Consulta los cambios realizados en el código de muestra a modo de ejemplo.

Continúa leyendo para obtener más información.

¿Qué es la API de Credential Management?

La API de Credential Management (API de CM) brinda a los sitios web acceso programático al almacén de credenciales del usuario-agente para almacenar o recuperar credenciales de usuario para el origen de la llamada.

Las APIs básicas son las siguientes:

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

La especificación original de la API de CM define 2 tipos de credenciales:

  • PasswordCredential
  • FederatedCredential

El PasswordCredential es una credencial que contiene el ID y la contraseña del usuario. El FederatedCredential es una credencial que contiene el ID del usuario y una string que representa un proveedor de identidad.

Con estas 2 credenciales, los sitios web pueden hacer lo siguiente:

  • Permitir que el usuario acceda con una credencial federada o basada en contraseña previamente guardada en cuanto llegue (acceso automático)
  • Almacenar la credencial federada o basada en contraseña con la que el usuario accedió
  • Mantener actualizadas las credenciales de acceso del usuario (p.ej., después de un cambio de contraseña)

¿Qué es WebAuthn?

WebAuthn (autenticación web) agrega credenciales de clave pública a la API de CM. Por ejemplo, les ofrece a los sitios web una forma estandarizada de implementar la autenticación de dos factores con dispositivos autenticadores que cumplen con FIDO 2.0.

En un nivel técnico, WebAuthn extiende la API de CM con la interfaz PublicKeyCredential.

¿Cuál es el problema?

Anteriormente, guiamos a los desarrolladores para que detecten la API de CM con el siguiente código:

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()
}

Consulta los cambios reales realizados en el código de muestra a modo de ejemplo.

A modo de referencia, aquí te mostramos cómo detectar que se agregue PublicKeyCredential en WebAuthn:

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

Línea de tiempo

La implementación más antigua de WebAuthn es Firefox y se planea que sea estable alrededor de principios de mayo de 2018.

Finalmente

Si tienes alguna pregunta, envíala a @agektmr oagektmr@chromium.org.