Introdução de dicas, solicitações de origem relacionadas e serialização JSON para WebAuthn no Chrome

As versões 128 e 129 do Chrome apresentam novos recursos incríveis para a WebAuthn, a para criar sistemas de autenticação baseados em chaves de acesso.

Eiji Kitamura

  • Dicas: com as dicas, as partes confiáveis (RPs) têm mais controle sobre a WebAuthn. no navegador. Eles são especialmente úteis para usuários corporativos que querem para usar chaves de segurança.
  • Solicitações de origem relacionadas: com origem relacionada solicitações, as RPs podem tornar as chaves de acesso válidas em vários domínios. Se você tem vários agora é possível permitir que os usuários reutilizem as chaves de acesso nos seus sites o que elimina o atrito no login.
  • Serialização JSON: as APIs de serialização JSON permitem simplificar o código de front-end de uma RP codificando e decodificando opções e passadas de e para a API WebAuthn.

Dicas

Com hints, as partes confiáveis (RP) agora podem especificar preferências de interface para criar um chave de acesso ou autenticação com uma chave de acesso.

Anteriormente, quando uma RP queria restringir o autenticador que o usuário poderia usar para criar uma chave de acesso ou para autenticação, eles podem usar authenticatorSelection.authenticatorAttachment para especificar "platform" ou "cross-platform" Cada um deles limita o autenticador a uma plataforma autenticador ou de roaming autenticador. Com hints, essa especificação pode ser mais flexível.

O RP pode usar hints opcionais no PublicKeyCredentialCreationOptions ou PublicKeyCredentialRequestOptions para especificar "security-key"; "client-device" e "hybrid" em uma ordem de preferência em uma matriz.

Confira a seguir um exemplo de solicitação de criação de credencial que prefere Autenticadores "cross-platform" com "security-key" como uma dica. Isso diz O Chrome vai mostrar uma interface focada em chaves de segurança para usuários corporativos.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});
Especificando "security-key" Como dica, o navegador mostra uma caixa de diálogo com foco na chave de segurança.
Especificar "chave de segurança" Dica: o navegador mostra uma caixa de diálogo com foco na chave de segurança.

Quando uma parte restrita quer priorizar um cenário de verificação entre dispositivos, ela pode enviar uma solicitação de autenticação que prefere autenticar "cross-platform" com "hybrid" como uma dica.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});
Especificando "híbrido" como dica, o navegador mostra uma caixa de diálogo focada em login em dispositivos diferentes.
Especificação de "híbrido" como dica, o navegador mostra uma caixa de diálogo focada em login em dispositivos diferentes.
.

Com origem relacionada solicitações, os RPs podem tornar as chaves de acesso de vários domínios utilizáveis. Como criar um login centralizado e o uso de protocolos de federação continua sendo a solução recomendada para para a maioria dos sites. Mas, se você tiver múltiplos domínios e a federação não for possível, origens relacionadas pode ser uma solução.

Todas as solicitações da WebAuthn precisam especificar um ID de parte confiável (ID da RP) e todas as chaves de acesso estão associados a um único ID da parte restrita. Tradicionalmente, uma origem só podia especificar um ID da RP com base no domínio. Nesse caso, www.example.co.uk poderia especificar um ID da RP de example.co.uk, mas não example.com. Com origem relacionada Solicitações, um ID da RP reivindicado pode ser validado buscando um arquivo JSON conhecido localizado em /.well-known/webauthn do domínio de destino. Então, example.co.uk (e example.in, example.de e assim por diante) poderiam usar um ID da RP de example.com, se example.com as especificar neste formato:

URL: https://example.com/.well-known/webauthn

{
  "origins": [
    "https://example.co.uk",
    "https://example.de",
    "https://example.sg",
    "https://example.net",
    "https://exampledelivery.com",
    "https://exampledelivery.co.uk",
    "https://exampledelivery.de",
    "https://exampledelivery.sg",
    "https://myexamplerewards.com",
    "https://examplecars.com"
  ]
}

Saiba como configurar solicitações de origem relacionadas em Permitir a reutilização de chaves de acesso no seu sites com origem relacionada Solicitações.

Serialização JSON

Os objetos de solicitação e resposta do WebAuthn têm vários campos que contêm dados dados binários em um ArrayBuffer, como o ID da credencial, o ID do usuário ou o desafio. Se um site quiser usar JSON para trocar esses dados com o servidor, o binário os dados devem ser codificados primeiro, por exemplo, com Base64URL. Isso agrega valor para desenvolvedores que querem começar a usar chaves de acesso nos sites.

O WebAuthn agora oferece APIs para analisar PublicKeyCredentialCreationOptions e PublicKeyCredentialRequestOptions objetos de solicitação do WebAuthn diretamente do JSON e serializam o PublicKeyCredential a resposta pode ser enviada diretamente para JSON. Todos os campos com valor de ArrayBuffer que carregam binário bruto os dados são automaticamente convertidos de ou para seus valores codificados Base64URL. Essas APIs estão disponíveis a partir do Chrome 129.

Antes de criar uma chave de acesso, busque uma chave de acesso codificada PublicKeyCredentialCreationOptions do servidor e decodifique-o usando PublicKeyCredential.parseCreationOptionsFromJSON().

Compatibilidade com navegadores

  • Chrome: 129
  • Borda: 129.
  • Firefox: 119
  • Safari: incompatível.

Origem

export async function registerCredential() {

  // Fetch encoded `PublicKeyCredentialCreationOptions`
  // and JSON decode it.
  const options = await fetch('/auth/registerRequest').json();

  // Decode `PublicKeyCredentialCreationOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);  

  // Invoke the WebAuthn create() function.
  const cred = await navigator.credentials.create({
    publicKey: decodedOptions,
  });
  ...

Depois de criar uma chave de acesso, codifique a credencial resultante usando toJSON() para que para que ele seja enviado ao servidor.

Compatibilidade com navegadores

  • Chrome: 129
  • Borda: 129.
  • Firefox: 119
  • Safari: incompatível.

Origem

  ...
  const cred = await navigator.credentials.create({
    publicKey: options,
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch('/auth/registerResponse', credential);
  ...

Antes de autenticar com uma chave de acesso, busque um JSON codificado PublicKeyRequestCreationOptions do servidor e decodifique-o usando PublicKeyCredential.parseRequestOptionsFromJSON().

Compatibilidade com navegadores

  • Chrome: 129
  • Borda: 129.
  • Firefox: 119
  • Safari: incompatível.

Origem

export async function authenticate() {

  // Fetch encoded `PublicKeyCredentialRequestOptions`
  // and JSON decode it.
  const options = await fetch('/auth/signinRequest').json();

  // Decode `PublicKeyCredentialRequestOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);

  // Invoke the WebAuthn get() function.
  const cred = await navigator.credentials.get({
    publicKey: options
  });
  ...

Depois de autenticar com uma chave de acesso, codifique a credencial resultante usando: toJSON() para que ele possa ser enviado ao servidor.

Compatibilidade com navegadores

  • Chrome: 129
  • Borda: 129.
  • Firefox: 119
  • Safari: incompatível.

Origem

  ...
  const cred = await navigator.credentials.get({
    publicKey: options
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch(`/auth/signinResponse`, credential);
  ...

Saiba mais

Para saber mais sobre a WebAuthn e as chaves de acesso, confira os seguintes recursos: