Come condividere l'indirizzo email in modo sicuro
Semplici potenziali soluzioni
Condividere l'indirizzo email in modo sicuro
Varie possibili soluzioni
Introduzione
Condividere la propria email nella pagina contatti, o in un componente del sito come la top bar o il footer è uno standard nell'ambiente dello sviluppo web. Tuttavia, proprio perché è una consuetudine, aggiungere l'email in forma testuale nel sito web, rende tale indirizzo vulnerabile ai website crawlers e bot di scraping, tecnica utilizzata per automatizzare l'ottenimento di dati testuali da un sito web. La conseguenza più comune è essere contattati da indirizzi sconosciuti con email di spam.
La soluzione generale è utilizzare la tecnica dell'offuscamento che si basa sul rendere qualcosa difficile da comprendere. Qui sotto ne vado ad illustrare alcune modalità.
Solo HTML
I bot di scraping da ingannare funzionano recuperando l'HTML delle pagine web e cercando un pattern testuale che corrisponde al formato di un indirizzo email. Una possibile tecnica di offuscamento è quella di spezzare il testo dell'indirizzo email con dei commenti HTML. I commenti infatti non vengono visualizzati nella pagina ma rimangono visibili nel codice sorgente (che è proprio quello che ottiene il bot). Trasformando il codice HTML da così:
Contattami all'indirizzo: email@domain.com
a così:
L'utente continuerà a visualizzare l'email come email@domain.com mentre il bot verrà confuso dai commenti e non troverà l'email.
Questo se prima del controllo dell'email pattern il bot non esegue la rimozione dei tag HTML (compresi i commenti) altrimenti il confronto verrà effettuato senza commenti e quindi l'email verrà scoperta comunque.
Questa tecnica è semplicissima da attuare, funziona senza la necessità di JavaScript attivo e risulta leggibile anche dalle tecnologie assistive (strumenti e software per l'accessibilità). Tuttavia non è possibile utilizzare la funzione mailto e, come detto prima, è un offuscamento facile da bypassare per un bot.
HTML e CSS
Un approccio più approfondito coinvolge anche l'utilizzo del CSS così da utilizzare, oltre ai commenti, anche dei tag HTML resi invisibili. Una cosa di questo tipo:
In questo modo è più difficile per un bot recuperare l'indirizzo email corretto perché rimuovendo commenti e tag, il testo risultante è blablablaemail@domain.com che non è l'email corretta.
Anche questo sistema non necessita di JavaScript e può essere letto dalle tecnologie assistive. Di contro, come il caso precedente non può essere utilizzato il mailto.
JavaScript
In questo caso l'utilizzo di JavaScript è essenziale per rendere illeggibile l'indirizzo email reso poi leggibile una volta caricata la pagina. In questo modo il bot otterrebbe la pagina grezza non ancora elaborata lato client e contenente l'indirizzo email illeggibile mentre l'utente vedrebbe la pagina processata con l'indirizzo reso leggibile.
Per oscurare l'indirizzo attraverso JavaScript in modo reversibile, il modo più semplice è utilizzare l'encoding Base64. L'indirizzo email dovrà quindi essere scritto nel codice già codificato (per farlo basta utilizzare un encoder online come ad esempio Base64Encode.org. Con poche righe di codice poi è possibile eseguire la decodifica e modificare il testo dell'elemento html:
window.onload = function () {
let email_codificata = "ZW1haWxAZG9tYWluLmNvbQ==";
const email_text = document.getElementById("email-text");
email_text.setAttribute("href", "mailto:".concat(atob(email_codificata)));
}
Il metodo atomb decodifica la stringa Base64, concat la concatena a mailto: e tutto ciò viene inserito come attributo href dell'elemento <a></a>.
Questo sistema è più "complicato" da implementare ma rende la vita più difficile ai bot soprattutto se si decide di utilizzare un algoritmo di codifica meno scontato. Inoltre funziona con il metodo mailto ed anche con le tecnologie assistive.
Di contro è necessario l'utilizzo del JavaScript altrimenti la funzione che decodifica l'email non verrà mai eseguita ed l'elemento <a></a> mai modificato.
Modulo di contatto
I moduli di contatto sono oramai assodati come strumento per creare un rapido collegamento tra l'utente ed il "proprietario" del sito. Sostituire la semplice email scritta in modo testuale con un modulo di contatto risolve completamente il problema descritto da questo articolo.
Esistono alcuni servizi che aiutano nell'implementazione di moduli di contatto senza la necessità di scrivere codice server side ma con un po' di impegno in più è possibile anche sviluppare il proprio modulo di contatto e gestire un server SMTP.
Utilizzando un servizio di terzi, il codice da scrivere è molto meno e tendenzialmente è fornito come funzionalità del servizio anche il controllo anti spam; problema piuttosto rilevante che entra in gioco con la sostituzione dell'indirizzo email testuale con un modulo di contatto.
Al contrario, sviluppare tutto per conto proprio pone difronte anche questa sfida che può essere risolta semplicemente sfruttando il servizio Google reCAPTCHA.
In ogni caso questo sistema mantiene l'indirizzo email completamente privato e può non necessitare di JavaScript abilitato. Si affida però a servizi terzi ed ha un costo di sviluppo decisamente più rilevante delle soluzioni precedentemente esposte. È da considerare anche che non sempre l'utente apprezza il modulo di contatto e preferirebbe avere l'indirizzo email.
Conclusioni
Ci sono quindi vari sistemi che si possono adottare con i loro pro e contro. Ora la scelta spetta a te!
Author: Fantantonio
Date: 30/10/2022
Categories: devtips