L'API Web Authentication, nota anche come WebAuthn, consente ai server di utilizzare la crittografia con chiave pubblica anziché le password per registrare e autenticare gli utenti. A tal fine, abilita l'integrazione tra questi server e gli autenticatori avanzati. Questi autenticatori possono essere dispositivi fisici dedicati (ad es. token di sicurezza) o integrati con le piattaforme (ad es. lettori di impronte digitali). Puoi scoprire di più su WebAuthn all'indirizzo webauthn.guide.
Problemi degli sviluppatori
Prima di questo progetto, WebAuthn non aveva il supporto di debug nativo su Chrome. Uno sviluppatore che creava un'app che utilizzava WebAuth richiedeva l'accesso ad autenticatori fisici. Questa operazione è stata particolarmente difficile per due motivi:
Esistono molti tipi di autenticatori. Il debug dell'ampia gamma di configurazioni e funzionalità richiedeva che lo sviluppatore avesse accesso a molti autenticatori diversi, a volte costosi.
Gli autenticatori fisici sono, per progettazione, sicuri. Pertanto, in genere è impossibile ispezionarne lo stato.
Volevamo semplificare questa operazione aggiungendo il supporto per il debug direttamente in Chrome DevTools.
Soluzione: una nuova scheda WebAuthn
La scheda DevTools di WebAuthn semplifica notevolmente il debug di WebAuthn consentendo agli sviluppatori di emulare questi autenticatori, personalizzarne le funzionalità e ispezionarne gli stati.
Implementazione
L'aggiunta del supporto di debug a WebAuthn è stata una procedura in due parti.
Parte 1: aggiunta del dominio WebAuthn al protocollo Chrome DevTools
Innanzitutto, abbiamo implementato un nuovo dominio nel Chrome DevTools Protocol (CDP) che si collega a un gestore che comunica con il backend WebAuthn.
Il CDP connette il front-end di DevTools a Chromium. Nel nostro caso, abbiamo utilizzato gli atti del dominio WebAuthn per creare un collegamento tra la scheda DevTools di WebAuthn e l'implementazione di WebAuthn di Chromium.
Il dominio WebAuthn consente di attivare e disattivare l'ambiente dell'autenticatore virtuale, che scollega il browser dalla ricerca dell'autenticatore reale e collega una ricerca virtuale.
Nel dominio vengono inoltre esposti metodi che fungono da livello sottile per le interfacce Virtual Authenticator e Virtual Discovery esistenti, che fanno parte dell'implementazione di WebAuthn di Chromium. Questi metodi includono l'aggiunta e la rimozione di autenticatori, nonché la creazione, l'ottenimento e l'eliminazione delle relative 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 collega il dominio alla scheda.
Sebbene siano necessari tre componenti, dovevamo preoccuparci solo di due: il modello e la visualizzazione. Il terzo componente, l'agente, viene generato automaticamente dopo l'aggiunta del dominio. In breve, l'agente è il livello che gestisce le chiamate tra il front-end e la CDP.
Il modello
Il modello è il livello JavaScript che connette l'agente e la visualizzazione. Nel nostro caso, il modello è abbastanza semplice. Riceve i comandi dalla visualizzazione, crea le richieste in modo che siano utilizzabili dalla CDP e le invia tramite l'agente. Queste richieste sono in genere unidirezionali e non vengono inviate informazioni alla visualizzazione.
Tuttavia, a volte restituiamo una risposta del modello per fornire un ID per un autenticatore appena creato o per restituire le credenziali memorizzate in un autenticatore esistente.
(Leggi il codice)
La visualizzazione
Utilizziamo la visualizzazione per fornire l'interfaccia utente che uno sviluppatore può trovare quando accede a DevTools. Contiene:
- Una barra degli strumenti per attivare l'ambiente dell'autenticatore virtuale.
- Una sezione per aggiungere gli autenticatori.
- Una sezione per gli autenticatori creati.
(Leggi il codice)
Barra degli strumenti per attivare l'ambiente dell'autenticatore virtuale
Poiché la maggior parte delle interazioni utente avviene con un autenticatore alla volta anziché con l'intera scheda, l'unica funzionalità fornita 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 disconnesso dalla vera Ricerca di autenticatori. Pertanto, quando è attivo, gli autenticatori fisici collegati come un lettore di impronte digitali non verranno riconosciuti.
Abbiamo deciso che un'opzione di attivazione/disattivazione esplicita offre un'esperienza utente migliore, in particolare per chi accede alla scheda WebAuthn senza aspettarsi che la ricerca reale venga disattivata.
Aggiunta della sezione Autenticatori
Dopo aver attivato l'ambiente dell'autenticatore virtuale, presentiamo allo sviluppatore un modulo in linea che gli consente di aggiungere un autenticatore virtuale. In questo modulo, offriamo 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 dell'utente.
Quando l'utente fa clic su Aggiungi, queste opzioni vengono raggruppate e inviate al modello che effettua la chiamata per creare un authenticator. Al termine, il front-end riceverà una risposta e modificherà l'interfaccia utente per includere l'autenticatore appena creato.
La visualizzazione di Authenticator
Ogni volta che viene emulato un authenticator, aggiungiamo una sezione alla visualizzazione dell'authenticator 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 è "Autenticatore" concatenato con gli ultimi 5 caratteri del relativo ID. In origine, il nome dell'autenticatore corrispondeva al suo ID completo e non era modificabile. Abbiamo implementato nomi personalizzabili in modo che l'utente possa etichettare l'autenticatore in base alle sue funzionalità, all'autenticatore fisico che deve emulare o a qualsiasi nickname più facile da ricordare di 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. In ogni riga vengono fornite informazioni su una credenziale, nonché pulsanti per rimuoverla o esportarla.
Al momento, raccogliamo le informazioni per compilare queste tabelle eseguendo un polling del CDP per ottenere le credenziali registrate per ogni autenticatore. In futuro, prevediamo di aggiungere un evento per la creazione delle credenziali.
Il pulsante Attivo
Abbiamo anche 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. In caso contrario, la registrazione delle credenziali con più autenticatori non è deterministica, il che rappresenterebbe un difetto fatale quando si tenta di testare WebAuthn utilizzandoli.
Abbiamo implementato lo stato attivo utilizzando il metodo SetUserPresence sugli autenticatori virtuali. Il metodo SetUserPresence imposta se i test della presenza dell'utente sono riusciti per un determinato autenticatore. Se la disattiviamo, un'app di autenticazione non potrà rilevare le credenziali. Pertanto, assicurandoci che sia attiva per al massimo un autenticatore (quello impostato come attivo) e disattivando la presenza dell'utente per tutti gli altri, possiamo forzare un comportamento deterministico.
Una sfida interessante che abbiamo dovuto affrontare durante l'aggiunta del pulsante attivo è stata evitare una condizione di gara. Tieni presente il seguente scenario:
L'utente fa clic sul pulsante di opzione Attivo per l'app di autenticazione X, inviando una richiesta al CDP per impostare X come attivo. Il pulsante di opzione Attivo per X è selezionato e tutti gli altri sono deselezionati.
Immediatamente dopo, l'utente fa clic sul pulsante di opzione Attivo per l'app di autenticazione Y, inviando una richiesta al CDP per impostare Y come attivo. Il pulsante di opzione Attivo per Y è selezionato e tutti gli altri, incluso quello per X, sono deselezionati.
Nel backend, la chiamata per impostare Y come attiva viene completata e risolta. Y è ora attivo e tutti gli altri autenticatori non lo sono.
Nel backend, la chiamata per impostare X come attiva è completata e risolta. X è ora attivo e tutti gli altri autenticatori, incluso Y, non lo sono.
La situazione risultante è la seguente: X è l'autenticatore attivo. Tuttavia, il pulsante di opzione Attivo per X non è selezionato. Y non è l'autenticatore attivo. Tuttavia, il pulsante di opzione Attivo per Y è selezionato. Esiste una discrepanza tra il front-end e lo stato effettivo degli autenticatori. Ovviamente, questo è un problema.
La nostra soluzione: stabilisci una comunicazione pseudo bidirezionale tra i pulsanti di opzione e l'autenticatore attivo. Innanzitutto, nella visualizzazione viene mantenuta una variabile activeId per tenere traccia dell'ID dell'autenticatore attualmente attivo. Quindi, attendiamo che venga restituita la chiamata per impostare un autenticatore attivo e impostiamo activeId sull'ID di quell'autenticatore. Infine, eseguiamo un ciclo per ogni sezione dell'autenticatore. Se l'ID della sezione è uguale a activeId, impostiamo il pulsante su selezionato. In caso contrario, il pulsante viene impostato come deselezionato.
Ecco come funziona:
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à. Inizialmente abbiamo trovato due opzioni.
Conta ogni volta che è stata aperta la scheda WebAuthn in DevTools. Questa opzione potrebbe portare a un conteggio eccessivo, in quanto un utente potrebbe aprire la scheda senza utilizzarla effettivamente.
Monitora il numero di volte in cui è stata attivata e disattivata la casella di controllo "Attiva l'ambiente dell'autenticatore virtuale" nella barra degli strumenti. Questa opzione presentava anche un potenziale problema di conteggio eccessivo, in quanto alcuni utenti potrebbero attivare e disattivare l'ambiente più volte nella stessa sessione.
Alla fine, abbiamo deciso di optare per la seconda opzione, ma limitando il conteggio mediante un controllo per verificare se l'ambiente era già stato attivato nella sessione. Di conseguenza, aumenteremo il conteggio solo di 1, indipendentemente dal numero di volte in cui lo sviluppatore ha attivato/disattivato l'ambiente. Questo funziona perché ogni volta che la scheda viene riaperta viene creata una nuova sessione, reimpostando il controllo e consentendo di incrementare nuovamente la metrica.
Riepilogo
Grazie per l'attenzione. Se hai suggerimenti per migliorare la scheda WebAuthn, comunicacelo inviando un bug.
Ecco alcune risorse per saperne di più su WebAuthn:
- Documento di progettazione del front-end di WebAuthn DevTools
- Documentazione di progettazione dell'API di test di autenticazione web
- Specifiche dell'API Web Authentication (WebAuthn)
- Spiegazione e guida di WebAuthn
Scaricare i canali di anteprima
Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.
Contatta il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.
- Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
- Invia un tweet all'account @ChromeDevTools.
- Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.