L'API Web Authentication, nota anche come WebAuthn, consente ai server di registrare e autenticare gli utenti mediante crittografia a chiave pubblica, anziché password. Per farlo, consente l'integrazione tra questi server e sistemi di autenticazione efficaci. Questi autenticatori possono essere dispositivi fisici dedicati (ad es. token di sicurezza) o integrati con piattaforme (ad es. lettori di impronte digitali). Puoi trovare ulteriori informazioni su WebAuthn qui all'indirizzo webauthn.guide.
Punti critici dello sviluppatore
Prima di questo progetto, WebAuthn non supportava il debug nativo su Chrome. Uno sviluppatore che creava un'app che utilizzava WebAuth ha richiesto l'accesso ad autoutenti fisici. Ciò era particolarmente difficile per due motivi:
Esistono molti tipi diversi di autentici. Per eseguire il debug dell'ampia gamma di configurazioni e funzionalità, lo sviluppatore aveva accesso a diversi sistemi di autenticazione, a volte costosi.
Gli autentici fisici sono, per definizione, sicuri. Pertanto, ispezionare il loro stato di solito è impossibile.
Volevamo semplificare questa operazione aggiungendo il supporto del debug direttamente in Chrome DevTools.
Soluzione: una nuova scheda WebAuthn
La scheda WebAuthn DevTools semplifica notevolmente il debug di WebAuthn consentendo agli sviluppatori di emulare questi autenticazione, personalizzarne le funzionalità e ispezionarne gli stati.
Implementazione
L'aggiunta del supporto del debug a WebAuthn era un processo in due parti.
Parte 1: aggiunta del dominio WebAuthn al protocollo Chrome DevTools
Innanzitutto, abbiamo implementato un nuovo dominio nel Protocollo Chrome DevTools (CDP) che si aggancia a un gestore che comunica con il backend WebAuthn.
Il CDP collega il front-end di DevTools a Chromium. Nel nostro caso, abbiamo utilizzato gli atti del dominio WebAuthn per collegare la scheda WebAuthn DevTools e l'implementazione di WebAuthn di Chromium.
Il dominio WebAuthn consente di attivare e disattivare l'ambiente di autenticazione virtuale, che disconnette il browser dal rilevamento effettivo di Authenticator e collega invece un rilevamento virtuale.
Nel dominio vengono inoltre esposti metodi che fungono da livello sottile rispetto alle interfacce Virtual Authenticator e Virtual Discovery esistenti, che fanno parte dell'implementazione WebAuthn di Chromium. Questi metodi includono l'aggiunta e la rimozione degli autenticati, nonché la creazione, il recupero e la cancellazione delle credenziali registrate.
(Leggi il codice)
Parte 2: creazione della scheda rivolta agli utenti
In secondo luogo, abbiamo creato una scheda rivolta agli utenti nel frontend di DevTools. La scheda è composta da una vista e un modello. Un agente generato automaticamente connette il dominio alla scheda.
Sebbene siano necessari tre componenti necessari, dovevamo preoccuparci solo di due: il model e la model. Il terzo componente, l'agente, viene generato automaticamente dopo l'aggiunta del dominio. In breve, l'agente è il livello che trasporta le chiamate tra il front-end e il CDP.
Il modello
Il modello è il livello JavaScript che connette l'agente e la vista. Nel nostro caso, il modello è piuttosto semplice. Prende i comandi dalla vista, crea le richieste in modo che siano utilizzabili da CDP e le invia tramite l'agente. Queste richieste di solito sono unidirezionale e non vengono rinviate informazioni alla visualizzazione.
Tuttavia, a volte passiamo indietro una risposta del modello per fornire un ID per un autenticatore appena creato o per restituire le credenziali archiviate in un autenticatore esistente.
(Leggi il codice)
La vista
Utilizziamo questa visualizzazione per fornire l'interfaccia utente che uno sviluppatore può trovare quando accede a DevTools. Contiene:
- Una barra degli strumenti per abilitare l'ambiente di autenticazione virtuale.
- Una sezione per aggiungere gli autenticazione.
- Una sezione per gli amministratori creati.
(Leggi il codice)
Barra degli strumenti per attivare l'ambiente di autenticazione virtuale
Poiché la maggior parte delle interazioni utente avviene con un autenticatore alla volta anziché con l'intera scheda, l'unica funzionalità che forniamo nella barra degli strumenti è l'attivazione e la disattivazione dell'ambiente virtuale.
Perché è necessario? È importante che l'utente debba attivare/disattivare esplicitamente l'ambiente perché in questo modo il browser viene scollegato dal vero Authenticator Discovery. Di conseguenza, mentre l'opzione è attiva, gli autenticatori fisici connessi, come il lettore di impronte digitali, non verranno riconosciuti.
Abbiamo deciso che un pulsante di attivazione/disattivazione esplicito significa un'esperienza utente migliore, in particolare per gli utenti che accedono alla scheda WebAuthn senza aspettarsi che il rilevamento effettivo venga disattivato.
Aggiunta della sezione Authenticator
Dopo aver abilitato l'ambiente dell'autenticatore virtuale, presentiamo allo sviluppatore un modulo incorporato che gli consente di aggiungere un autenticatore virtuale. All'interno di questo modulo forniamo opzioni di personalizzazione che consentono all'utente di decidere il protocollo e i metodi di trasporto dell'autenticatore, nonché se l'autenticatore supporta le chiavi residenti e la verifica utente.
Quando l'utente fa clic su Aggiungi, queste opzioni vengono raggruppate e inviate al modello che effettua la chiamata per creare un autenticatore. Al termine dell'operazione, il front-end riceverà una risposta e modificherà l'interfaccia utente per includere l'autenticatore appena creato.
Visualizzazione di Authenticator
Ogni volta che un autenticatore viene emulato, aggiungiamo una sezione alla visualizzazione dell'autenticatore per rappresentarlo. Ogni sezione dell'autenticatore include un nome, un ID, opzioni di configurazione, pulsanti per rimuovere l'autenticatore o impostarlo come attivo e una tabella delle credenziali.
Il nome di Authenticator
Il nome dell'autenticatore è personalizzabile e per impostazione predefinita è "Authenticator" concatenato con gli ultimi 5 caratteri del suo ID. In origine, il nome dell'autenticatore era il suo ID completo ed era immutabile. Abbiamo implementato nomi personalizzabili in modo che l'utente possa etichettare l'autenticatore in base alle sue funzionalità, l'autenticatore fisico che deve emulare o qualsiasi nickname un po' più facile da assimilare rispetto a un ID di 36 caratteri.
Tabella delle credenziali
Abbiamo aggiunto una tabella a ogni sezione dell'autenticatore che mostra tutte le credenziali registrate da un autenticatore. All'interno di ogni riga, forniamo informazioni su una credenziale, nonché pulsanti per rimuovere o esportare la credenziale.
Al momento, raccogliamo le informazioni per compilare queste tabelle eseguendo il polling al CDP per ottenere le credenziali registrate per ogni autenticatore. In futuro, abbiamo in programma di aggiungere un evento per la creazione di credenziali.
Pulsante Attivo
Inoltre, abbiamo aggiunto un pulsante di opzione Attivo a ogni sezione dell'autenticatore. L'autenticatore attualmente impostato come attivo sarà l'unico che ascolta e registra le credenziali. Senza questo, la registrazione delle credenziali dati più autentici non è deterministica, il che costituirebbe un errore irreversibile se si prova a testare WebAuthn utilizzandole.
Abbiamo implementato lo stato attivo utilizzando il metodo SetUserPresence sugli autenticatori virtuali. Il metodo SetUserPresence consente di stabilire se i test della presenza dell'utente hanno esito positivo per un determinato autenticatore. Se la disattiviamo, un autenticatore non potrà ascoltare le credenziali. Pertanto, assicurando che sia attiva al massimo per un autenticatore (quello impostato come attivo) e disattivando la presenza utente per tutti gli altri, possiamo forzare un comportamento deterministico.
Una sfida interessante che abbiamo affrontato nell'aggiunta del pulsante "active" è stata quella di evitare una condizione di gara. Considera il seguente scenario:
L'utente fa clic sul pulsante di opzione Attivo per Authenticator X e invia una richiesta al CDP per impostare X come attivo. Il pulsante di opzione Attivo per X è selezionato, mentre tutti gli altri sono deselezionati.
Subito dopo, l'utente fa clic sul pulsante di opzione Attivo per Authenticator Y, inviando una richiesta al CDP per impostare Y come attivo. Il pulsante di opzione Attivo per Y è selezionato e tutti gli altri, incluso per X, vengono deselezionati.
Nel backend, la chiamata per impostare Y come attivo è stata completata e risolta. Ora Y è attivo e tutti gli altri autenticati non lo sono.
Nel backend, la chiamata per impostare X come attivo è stata completata e risolta. Ora X è attivo e tutti gli altri autenticati, inclusa Y, non lo sono.
Ora, la situazione risultante è la seguente: X è l'autenticatore attivo. Tuttavia, il pulsante di opzione Attivo per X non è selezionato. Non è l'autenticatore attivo. Tuttavia, il pulsante di opzione Attivo per Y è selezionato. C'è un disaccordo tra il front-end e lo stato effettivo degli autori. Ovviamente è un problema.
La nostra soluzione: stabilisci una pseudo comunicazione bidirezionale tra i pulsanti di opzione e l'autenticatore attivo. Innanzitutto, manteniamo una variabile activeId nella visualizzazione per tenere traccia dell'ID dell'autenticatore attualmente attivo. Quindi, attendiamo che la chiamata imposti come attivo l'autenticatore, quindi impostiamo activeId sull'ID di quell'autenticatore. Infine, esaminiamo in loop ogni sezione dell'autenticatore. Se l'ID di quella sezione è activeId, impostiamo il pulsante su selected. In caso contrario, impostiamo il pulsante su deselezionato.
Ecco come si presenta:
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;
}
Metriche di utilizzo
Volevamo monitorare l'utilizzo di questa funzionalità. All'inizio, abbiamo proposto due opzioni.
Conteggia ogni volta che la scheda WebAuthn in DevTools è stata aperta. Questa opzione potrebbe causare una sovrastima, in quanto qualcuno potrebbe aprire la scheda senza utilizzarla effettivamente.
Monitora il numero di volte in cui la casella di controllo "Abilita ambiente di autenticazione virtuale" nella barra degli strumenti è stata attivata/disattivata. Questa opzione presentava anche un potenziale problema di sovrastima, in quanto alcuni potrebbero attivare e disattivare l'ambiente più volte nella stessa sessione.
Alla fine, abbiamo deciso di optare per la seconda opzione, ma limitare il conteggio controllando se l'ambiente era già stato abilitato nella sessione. Di conseguenza, aumenteremo il conteggio di 1 solo indipendentemente da quante volte lo sviluppatore ha attivato/disattivato l'ambiente. Questo funziona perché viene creata una nuova sessione ogni volta che la scheda viene riaperta, reimpostando così il controllo e consentendo un nuovo incremento della metrica.
Riepilogo
Grazie per l'attenzione. Se hai suggerimenti per migliorare la scheda WebAuthn, faccelo sapere inviando un bug.
Ecco alcune risorse per saperne di più su WebAuthn:
- Documento di progettazione front-end di WebAuthn DevTools
- Documento di progettazione dell'API per il test dell'autenticazione web
- Specifiche dell'API Web Authentication (WebAuthn)
- Spiegazione e guida di WebAuthn
Scaricare i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle ultime funzionalità DevTools, testare le API delle piattaforme web all'avanguardia e individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o qualsiasi altra informazione relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema di DevTools utilizzando Altre opzioni
> Guida > Segnala i problemi di DevTools in DevTools. - Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools sui video di YouTube di DevTools.