L’importanza della sicurezza nelle applicazioni web non può essere sottovalutata. Anche la migliore interfaccia utente potrebbe essere compromessa da vulnerabilità di sicurezza, specialmente se l’applicazione gestisce dati sensibili o informazioni finanziarie. Per garantire la sicurezza delle applicazioni web, è essenziale integrare la sicurezza fin dalla fase di sviluppo. In questo articolo, esploreremo le regole d’oro per combinare la sicurezza front-end e l’interfaccia utente in modo da fornire un’esperienza utente fluida e al contempo proteggere l’applicazione dalle minacce esterne.
La gestione della sicurezza delle applicazioni coinvolge molte operazioni, dai controlli back-end alla protezione del percorso, diversi processi di autenticazione e autorizzazione e la costruzione di query sicure al database. Tuttavia, il primo livello di protezione in un’applicazione prevede la convalida degli input dell’utente. Questo compito fondamentale è gestito dal back end, ma è coinvolto anche il front end, con l’obiettivo di aumentare la qualità di usabilità dell’applicazione.
In un mondo in cui le applicazioni web sono sempre più presenti, la convalida front-end è diventata una parte essenziale del processo di sviluppo. Ma come possiamo applicare la convalida front-end in modo efficace per garantire un’esperienza utente migliore? In questo articolo, esploreremo cinque semplici regole che possono aiutare gli sviluppatori web a migliorare la sicurezza e l’esperienza dell’utente attraverso la convalida front-end. Scopriremo come la questa può prevenire gli errori dell’utente, impedire attacchi di hacker e migliorare la qualità globale dell’applicazione web.
Sicurezza: front-end vs back-end
La convalida è una parte fondamentale del processo di sicurezza. Questa consente all’app di determinare se gli input digitati dall’utente e le operazioni che stanno eseguendo sono corretti e cosa si aspetta l’applicazione. La regola d’oro è che la vera convalida avviene solo nel back-end, quindi perché discutere della convalida front-end? Perché la validazione front-end è immensamente utile per aumentare la qualità della user experience, che è un fattore determinante per mantenere gli utenti sull’app offrendo loro un’esperienza soddisfacente.
Immagina di dover compilare un form molto lungo, composto da input, radio button, menu a tendina, checkbox, per poi mandare tutto al back end, ricevere un messaggio di errore relativo ad uno o due campi, e dover ricompilare il tutto. È un’esperienza piuttosto fastidiosa per l’utente. In effetti, è possibile tamponare il problema con operazioni di ripopolamento dell’input da parte del back-end, ma non sarebbe meglio evitare l’invio di dati errati fin dall’inizio? La convalida front-end è la soluzione perfetta per prevenire questi problemi.
È importante ricordare che tutto sul front-end può essere facilmente disattivato o aggirato, quindi la sua funzione risiede principalmente nell’esperienza utente e nel risparmio di risorse. Tuttavia, la verifica dei dati in ingresso e altre attività di sicurezza rimangono compiti fondamentali del back-end.
Per quanto riguarda il front-end, gli obiettivi sono:
- aumento delle percentuali di successo
- aumento del grado di soddisfazione
- diminuzione degli errori commessi
- diminuzione dei tempi di completamento
- diminuzione del numero di fissazioni oculari
La produzione di convalida front-end passa principalmente attraverso JavaScript (in combinazione con HTML e CSS); indipendentemente dall’utilizzo di un framework o di una libreria come React o Vue, o dalla scrittura di codice Vanilla, questo processo rimane invariato.
Le regole d’oro dell’interfaccia utente front-end e della sicurezza
Regola n. 1: l’input dovrebbe corrispondere alle aspettative del back-end
Come affermato in precedenza, l’obiettivo della convalida front-end è quello di “ripulire” i dati inviati al back-end, assicurandosi che siano nel formato, nella forma e nell’intervallo corretti. Il back end eseguirà tutti i controlli necessari, ma la produzione di messaggi di errore sul front end sarà drasticamente ridotta. Ad esempio, se un campo di selezione imposta una scelta tra i colori blu, rosso e verde, ma l’utente seleziona o digita il valore giallo, l’algoritmo front-end deve verificare che il valore selezionato sia fuori intervallo e segnalarlo a l’utente prima di inviare inutilmente al back end i dati inseriti.
Questa procedura deve avvenire per tutti i campi, prestando attenzione a:
- input vuoti o che contengono valori non idonei (caratteri speciali, ecc.);
- stringa e valori numerici al di fuori dell’intervallo desiderato;
- schemi errati (data, ora, password, e-mail, ecc.);
- dati obbligatori mancanti.
Questo “filtro” è utile sia per la sicurezza che per l’esperienza dell’utente.
Esiste anche un’altra procedura molto utile per l’invio di dati corretti al back end: il controllo (solitamente tramite richiesta AJAX) di dati che non dovrebbero essere già presenti, come nickname e indirizzi e-mail. Quando l’utente inserisce un nome utente o una e-mail, l’algoritmo di front-end deve sia verificare che questi non siano già stati selezionati da un altro utente, sia mostrare in modo asincrono l’errore in modo che l’utente possa selezionare altri valori prima di inviare il tutto al server.
Tuttavia, poiché l’utente ha la possibilità di disabilitare JavaScript o manipolare l’invio dei dati al server, questi controlli potrebbero non essere sufficienti per garantire la sicurezza dei dati. Come regola generale, questo può essere riassunto come: mai fidarsi dei dati di input dell’utente – un cliché che qualsiasi autore di codice ha probabilmente sentito una o due volte!
Regola n. 2: rendi le espressioni regolari un buon alleato
Le espressioni regolari sono essenziali per la convalida e la sicurezza delle applicazioni web. Anche se possono sembrare complesse, padroneggiare le espressioni regolari è fondamentale. Ci sono molte espressioni regolari “preconfezionate” per la convalida di formati di date, password e nomi utente, ma poiché ogni applicazione è unica, potrebbe essere necessario personalizzarle per soddisfare le esigenze specifiche dell’applicazione.
La nota positiva è che sebbene la sintassi vari da lingua a lingua, la base centrale delle espressioni regolari è universale. Anche qui le espressioni regolari utilizzate sul front end hanno lo scopo di migliorare la UX alleviando la produzione di errori, quindi gli stessi controlli devono essere applicati anche lato server.
La padronanza e l’utilizzo delle espressioni regolari consente l’esecuzione di convalide avanzate, aiutando così a mettere in pratica la regola n. 1 anche in situazioni che richiedono maggiore complessità.
Regola n. 3: reporting dinamico degli errori, ma anche messaggi di successo
Come già discusso, la segnalazione degli errori in tempo reale è di grande importanza per consentire all’utente di correggere gli errori prima di inviare i dati al back-end . Tuttavia, anche la presenza di messaggi di successo è molto importante; questi permettono all’utente di capire senza ombra di dubbio che quello che stanno compilando è corretto.
Sapere che il nome utente digitato è corretto è importante tanto quanto sapere che non lo è. Allo stesso modo, sapere perché la password che l’utente sta inserendo non è corretta è utile per correggerla; qui la presenza di espressioni regolari è utile per segnalare errori precisi (mancanza di un numero, di una lettera maiuscola, ecc.) consentendo agli utenti di verificare che il valore inserito rispecchi tutti i criteri impostati dall’applicazione.
Dove mostrare tali errori e in quale formato è un’attività specifica del front-end. Le pratiche più comunemente accettate richiedono la presenza di messaggi di errore o di successo accanto o sotto gli input, utilizzando una tavolozza di colori allineata con l’interfaccia utente dell’applicazione.
Come regola universale, non fare mai affidamento solo sui colori per comunicare dati di errore o di successo. Per le persone con daltonismo rosso-verde, il verde e il rosso sembrano quasi uguali, quindi è probabile che sia difficile per loro sapere se si è verificato un errore o un successo. Un approccio migliore sarebbe aggiungere un’icona per renderlo inequivocabilmente chiaro.
Regola n. 4: se l’input non è corretto, impedire l’invio del modulo
Supportando ulteriormente la regola n. 1, il problema dell’invio di dati errati al server può essere sradicato semplicemente impedendo l’invio dei dati se un campo non supera la convalida. Utilizzando JavaScript per tenere traccia dinamica dei campi che superano la relativa convalida e di quelli che non la superano, è possibile attivare o disattivare l’invio del modulo.
Questo processo rende anche evidente quando il modulo presenta problemi: è possibile utilizzare il CSS per impedire l’apparizione del modulo di invio o disabilitarlo funzionalmente e graficamente.
Scrivere codice coerente e di buona qualità semplifica l’aggiunta o la rimozione di nuovi campi di input con diversi tipi nella struttura della pagina, così come l’integrazione senza problemi di controlli aggiuntivi nell’algoritmo/componente JavaScript.
Regola bonus: cosa succede se Javascript è disabilitato?
Tutte le regole elencate in precedenza hanno un’esigenza comune: JavaScript deve essere abilitato nel browser. Tuttavia, va tenuto in considerazione che questa funzionalità può essere disattivata dall’utente, sia per motivi di sicurezza che per tentare di eludere le misure di sicurezza imposte.
Pertanto, tieni presente che la regola n. 1 deve rimanere il più attiva possibile anche quando JavaScript è disabilitato. In tal caso, HTML5 e CSS possono essere utilizzati per prevenire l’immissione di input non validi, grazie alla possibilità di impostare intervalli o prevenire la digitazione di certi caratteri. Ad esempio, gli input semantici SEO-friendly, come l’attributo “email”, possono essere utilizzati per verificare la validità di un indirizzo email, mentre l’attributo “required” può essere usato per indicare un campo obbligatorio. Inoltre, l’attributo “pattern”, meno conosciuto, può essere utilizzato per verificare la corrispondenza con un modello di espressione regolare:
<label for="color">Qual è il tuo colore preferito? (obbligatorio)</label>
<input required pattern="[a-zA-Z]{3,20}" type="text" id="color" name="color">Code language: HTML, XML (xml)I CSS facilitano anche la creazione di animazioni dinamiche e reattive che vengono attivate quando si verificano determinati eventi e utilizzano pseudo-classi come “:required”, “:valid” e “:invalid” per impostare stili appropriati.
Sebbene non sia ovviamente possibile sostituire completamente la presenza di un Javascript abilitato, è possibile impedire l’inserimento di dati errati, in accordo con gli obiettivi della regola n.1.
