Como criamos a guia WebAuthn do Chrome DevTools

Fawaz mohammad
Fawaz Mohammad
Nina satragno
Nina Satragno

A API Web Authentication, também conhecida como WebAuthn, permite que os servidores usem criptografia de chave pública, em vez de senhas, para registrar e autenticar usuários. Isso é feito ativando a integração entre esses servidores e autenticadores fortes. Esses autenticadores podem ser dispositivos físicos dedicados (por exemplo, chaves de segurança) ou integrados a plataformas (por exemplo, leitores de impressão digital). Leia mais sobre o WebAuthn em webauthn.guide.

Dificuldades dos desenvolvedores

Antes desse projeto, o WebAuthn não tinha suporte para depuração nativa no Chrome. Um desenvolvedor que criou um app que usava o WebAuth exigia acesso a autenticadores físicos. Isso foi especialmente difícil por dois motivos:

  1. Há muitas variações diferentes de autenticadores. A depuração da amplitude de configurações e recursos exigiu que o desenvolvedor tivesse acesso a muitos autenticadores diferentes, às vezes caros.

  2. Os autenticadores físicos são, por padrão, seguros. Portanto, inspecionar o estado geralmente é impossível.

Queríamos facilitar esse processo adicionando suporte à depuração diretamente no Chrome DevTools.

Solução: uma nova guia WebAuthn

A guia WebAuthn DevTools torna a depuração da WebAuthn muito mais fácil, permitindo que os desenvolvedores emulem esses autenticadores, personalizem seus recursos e inspecionem seus estados.

Nova guia WebAuthn

Implementação

Adicionar suporte para depuração ao WebAuthn foi um processo de duas partes.

Processo de duas etapas

Parte 1: como adicionar o domínio do WebAuthn ao protocolo do Chrome DevTools

Primeiro, implementamos um novo domínio no Chrome DevTools Protocol (CDP) que se conecta a um gerenciador que se comunica com o back-end do WebAuthn.

O CDP conecta o front-end do DevTools ao Chromium. No nosso caso, usamos as ações de domínio do WebAuthn para fazer a ponte entre a guia WebAuthn DevTools e a implementação da WebAuthn do Chromium.

O domínio WebAuthn permite ativar e desativar o ambiente de autenticação virtual, que desconecta o navegador da descoberta real do Authenticator e conecta uma descoberta virtual.

Também expomos métodos no domínio que atuam como uma camada fina para as interfaces do Virtual Authenticator e do Virtual Discovery, que fazem parte da implementação do WebAuthn do Chromium. Esses métodos incluem adicionar e remover autenticadores, bem como criar, receber e limpar as credenciais registradas.

Leia o código.

Parte 2: como criar uma guia voltada ao usuário

Depois, criamos uma guia voltada ao usuário no front-end do DevTools. A guia é composta por uma visualização e um modelo. Um agente gerado automaticamente conecta o domínio à guia.

Embora existam três componentes necessários, precisamos nos preocupar apenas com dois deles: o model e a model. O terceiro componente, o agente, é gerado automaticamente após a adição do domínio. Em resumo, o agente é a camada que transporta as chamadas entre o front-end e o CDP.

O modelo

O modelo é a camada JavaScript que conecta o agente e a visualização. Para o nosso caso, o modelo é bem simples. Ele recebe comandos da visualização, cria as solicitações para que possam ser consumidas pelo CDP e as envia pelo agente. Essas solicitações geralmente são unidirecionais, sem informações enviadas de volta à visualização.

No entanto, às vezes enviamos uma resposta do modelo para fornecer um ID a um autenticador recém-criado ou para retornar as credenciais armazenadas em um autenticador atual.

Leia o código.

A visualização

Nova guia WebAuthn

Usamos a visualização para fornecer a interface do usuário que o desenvolvedor pode encontrar ao acessar o DevTools. Ele contém:

  1. Uma barra de ferramentas para ativar o ambiente de autenticador virtual.
  2. Uma seção para adicionar autenticadores.
  3. Uma seção para autenticadores criados.

Leia o código.

Barra de ferramentas para ativar o ambiente do autenticador virtual

toolbar

Como a maioria das interações do usuário ocorre com um autenticador por vez, e não com a guia inteira, a única funcionalidade que fornecemos na barra de ferramentas é ativar e desativar o ambiente virtual.

Por que isso é necessário? É importante que o usuário precise alternar explicitamente o ambiente, porque isso desconecta o navegador da descoberta real do Authenticator. Enquanto ela estiver ativada, os autenticadores físicos conectados, como um leitor de impressão digital, não serão reconhecidos.

Decidimos que um botão explícito significava uma melhor experiência do usuário, especialmente para quem acessa a guia WebAuthn sem esperar que a descoberta real seja desativada.

Como adicionar a seção "Autenticadores"

Como adicionar a seção "Autenticadores"

Ao ativar o ambiente do autenticador virtual, apresentamos ao desenvolvedor um formulário in-line que permite que ele adicione um autenticador virtual. Nesse formulário, oferecemos opções de personalização que permitem ao usuário decidir o protocolo e os métodos de transporte do autenticador, além de definir se o autenticador oferece suporte a chaves residentes e à verificação do usuário.

Quando o usuário clica em Adicionar, essas opções são agrupadas e enviadas ao modelo que faz a chamada para criar um autenticador. Depois disso, o front-end recebe uma resposta e modifica a interface para incluir o autenticador recém-criado.

Visualização do Authenticator

Visualização do Authenticator

Sempre que um autenticador é emulado, adicionamos uma seção à visualização para representá-lo. Cada seção de autenticador inclui um nome, ID, opções de configuração, botões para remover o autenticador ou ativá-lo e uma tabela de credenciais.

O nome do Authenticator

O nome do autenticador é personalizável e o padrão é "Authenticator" concatenado com os últimos 5 caracteres do seu ID. Originalmente, o nome do autenticador era seu documento de identificação completo e imutável. Implementamos nomes personalizáveis para que o usuário possa rotular o autenticador com base nos recursos dele, o autenticador físico que ele pretende emular ou qualquer apelido que seja um pouco mais fácil de entender do que um ID de 36 caracteres.

Tabela de credenciais

Adicionamos uma tabela a cada seção de autenticador que mostra todas as credenciais registradas por um autenticador. Em cada linha, apresentamos informações sobre uma credencial, além de botões para remover ou exportar a credencial.

Atualmente, coletamos as informações para preencher essas tabelas pesquisando o CDP para conseguir as credenciais registradas para cada autenticador. No futuro, planejamos adicionar um evento para a criação de credenciais.

O botão "Ativo"

Também adicionamos um botão de opção Ativo a cada seção do autenticador. O autenticador que estiver ativo no momento será o único que detectará e registrará as credenciais. Sem isso, o registro de credenciais com vários autenticadores não é determinístico, o que seria uma falha fatal ao tentar testar o WebAuthn usando essas credenciais.

Implementamos o status ativo usando o método SetUserPresence em autenticadores virtuais. O método SetUserPresence define se os testes de presença do usuário foram bem-sucedidos para um determinado autenticador. Se ela for desativada, o autenticador não poderá detectar credenciais. Portanto, ao garantir que ela esteja ativada no máximo para um autenticador (aquele definido como ativo) e desativar a presença do usuário para todos os outros, podemos forçar um comportamento determinístico.

Um desafio interessante que enfrentamos ao adicionar o botão ativo foi evitar uma disputa. Pense no seguinte cenário:

  1. O usuário clica no botão de opção Ativo do Authenticator e envia uma solicitação ao CDP para defini-lo como ativo. O botão de opção Ativo de X é selecionado, e todos os outros são desmarcados.

  2. Imediatamente depois, o usuário clica no botão de opção Active para o Authenticator Y, enviando uma solicitação ao CDP para definir Y como ativo. O botão de opção Ativo para Y é selecionado, e todos os outros, inclusive para X, são desmarcados.

  3. No back-end, a chamada para definir Y como ativo é concluída e resolvida. Y agora está ativo e todos os outros autenticadores não estão.

  4. No back-end, a chamada para definir X como ativo é concluída e resolvida. X está ativo e todos os outros autenticadores, incluindo Y, não estão.

Agora, a situação resultante é a seguinte: X é o autenticador ativo. No entanto, o botão de opção Ativo para X não está selecionado. Y não é o autenticador ativo. No entanto, o botão de opção Ativo para Y está selecionado. Há uma discordância entre o front-end e o status real dos autenticadores. Obviamente, isso é um problema.

Nossa solução é estabelecer uma comunicação pseudobidirecional entre os botões de opção e o autenticador ativo. Primeiro, mantemos uma variável activeId na visualização para acompanhar o ID do autenticador ativo no momento. Em seguida, aguardamos a chamada para retornar um autenticador ativo e definir activeId como o ID desse autenticador. Por fim, vamos percorrer cada seção do autenticador. Se o ID dessa seção for igual a activeId, definiremos o botão como selecionado. Caso contrário, o botão será definido como não selecionado.

Esta é a aparência:


 async _setActiveAuthenticator(authenticatorId) {
   await this._clearActiveAuthenticator();
   await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
   this._activeId = authenticatorId;
   this._updateActiveButtons();
 }
 
 _updateActiveButtons() {
   const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
   Array.from(authenticators).forEach(authenticator => {
     authenticator.querySelector('input.dt-radio-button').checked =
         authenticator.getAttribute('data-authenticator-id') === this._activeId;
   });
 }
 
 async _clearActiveAuthenticator() {
   if (this._activeId) {
     await this._model.setAutomaticPresenceSimulation(this._activeId, false);
   }
   this._activeId = null;
 }

Métricas de uso

Queremos acompanhar o uso desse recurso. Inicialmente, tivemos duas opções.

  1. Contabilize cada vez que a guia WebAuthn no DevTools for aberta. Essa opção pode levar a uma contagem excessiva, já que alguém pode abrir a guia sem realmente usá-la.

  2. Monitore o número de vezes que a caixa de seleção "Ativar ambiente de autenticador virtual" na barra de ferramentas foi ativada. Essa opção também apresentou um problema de contagem excessiva, já que algumas pessoas podem ativar e desativar o ambiente várias vezes na mesma sessão.

Por fim, decidimos ficar com a segunda opção, mas restringimos a contagem verificando se o ambiente já havia sido ativado na sessão. Portanto, só aumentaríamos a contagem em 1, independentemente de quantas vezes o desenvolvedor alternou o ambiente. Isso funciona porque uma nova sessão é criada sempre que a guia é reaberta, redefinindo a verificação e permitindo que a métrica seja incrementada novamente.

Resumo

Agradecemos sua atenção. Se você tiver alguma sugestão para melhorar a guia WebAuthn, registre um bug para nos avisar.

Aqui estão alguns recursos caso você queira saber mais sobre o WebAuthn:

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de pré-visualização dão acesso aos recursos mais recentes do DevTools, testam as APIs de plataforma da Web modernas e encontram problemas no seu site antes que os usuários o encontrem.

Entrar em contato com a equipe do Chrome DevTools

Use as opções abaixo para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Publique no Twitter em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre o que há de novo ou nos vídeos do YouTube de dicas sobre o DevTools.