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

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

Si actualmente lo haces para la detección de componentes

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

En su lugar, 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 como ejemplo.

Sigue leyendo para obtener más información.

¿Qué es la API de Credential Management?

La API de Credential Management (API de CM) les 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 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

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

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

  • Permite que el usuario acceda con una credencial federada o basada en contraseña que haya guardado con anterioridad apenas llegue a la página (acceso automático).
  • Almacena la credencial basada en contraseña o federada 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 brinda a los sitios web una forma estandarizada de implementar la autenticación de dos factores con dispositivos de autenticación compatibles con FIDO 2.0.

A 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 funciones de 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 que se realizaron en el código de muestra como ejemplo.

A modo de referencia, a continuación se muestra cómo detectar PublicKeyCredential agregado en WebAuthn:

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

Cronograma

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

Finalmente

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