Come nascondere l'indirizzo email ai robot di spam.

Come rendere più difficile rilevare gli indirizzi email dalle pagine web usando dei meccanismi basati su CSS e javascript.

Tutti o quasi i possessori di un sito web debbono rendere visibile il proprio indirizzo email in modo che le persone possano contattarli liberamente. È sempre preferibile creare un account specifico per ciascun sito e non usare quello personale. Purtroppo acquistando un dominio personalizzato con Blogger non si ha più anche un account gratuito di Google Apps che permetteva di creare un indirizzo di posta personalizzato.  In futuro vedrò se sarà possibile pubblicare un post su come si possa creare un account di questo genere senza Google Apps ma solo sfruttando soltanto le funzioni del dominio che si è acquistato.

Inserire in una pagina o in un widget il proprio indirizzo presenta però delle forti controindicazioni perché gli spammatori usano dei bot per rilevare gli indirizzi di posta dalle pagine in modo automatico. Si può ovviare a questo inconveniente per esempio creando una immagine dell'indirizzo che può essere rilevata solo da robot molto sofisticati. È chiaro che in questo caso gli utenti non potranno selezionare e copiare l'indirizzo ma saranno costretti a digitarlo.

Per ingannare i bot meno evoluti e per mostrare in modo esplicito l'indirizzo email agli utenti si possono usare degli escamotage particolari basati sul CSS, sul javascript o su altri meccanismi. Gli esempi seguenti mostrano delle email del tipo ernesto@gmail.com che non sono le mie email.

NASCONDERE LA EMAIL CON GLI PSEUDO-ELEMENTI

Si possono usare i tag after e before già utilizzati nel post precedente sulla numerazione dei commenti in Blogger. Invece di postare l'indirizzo si può andare in Modalità HTML e incollare questo codice

<style>
  email::after {
    content: attr(dominio);
  }
  email::before {
    content: attr(utente)"\0040";
  }
</style>
<email utente="ernesto" dominio="gmail.com"></email>

Provate a incollarlo in un Editor HTML tipo Real Time e verificherete che il risultato è quello voluto. Ovviamente basta sostituire il nome utente e quello del dominio per avere qualsiasi indirizzo. L'espressione in viola \0040 rappresenta il carattere Unicode del simbolo @.

Una alternativa più semplice è data dal codice seguente

<style>
  .dominio::before {
    content: "\0040"; 
  }
</style>
francesco<span class="dominio">gmail.com</span>

che permette ai lettori di selezionare l'indirizzo email per copiarlo più facilmente.

SCRIVERE L'INDIRIZZO IN SENSO INVERSO

Utilizzando questo codice

<style>
  .inverso {
    unicode-bidi: bidi-override;
    direction: rtl;
  }
</style>
<span class="inverso">moc.liamg@olrac</span>

il nostro indirizzo carlo@gmail.com può essere scritto al contrario. C'è però il problema che anche quando gli utenti lo copieranno lo visualizzeranno al contrario.

INSERIRE DEI CARATTERI AGGIUNTIVI

Si possono aggiungere altri caratteri o altre parole all'indirizzo per poi nasconderli alla vista con il tag display:none; in questo modo

<style>
  #nascosto {
    display: none;
  }
</style>
enrico<span id="nascosto">AGGIUNTA1</span>@gmail<span id="nascosto">AGGIUNTA2</span>.com

che mostrerà agli utenti solo l'indirizzo colorato di rosso mentre i caratteri aggiunti saranno nascosti.

NASCONDERE L'INDIRIZZO EMAIL CON IL JAVASCRIPT

Per creare un collegamento ipertestuale a un indirizzo email che apra il client di posta predefinito bisogna andare in Modalità HTML e incollare il codice

<a href="mailto:ernesto@gmail.com">Contattami</a>

Si può fare in modo di sostituire @ con AT e il punto con DOT in questo modo

<a href = "mailto:ernestinaATgmailDOTcom"
   onclick = "this.href=this.href
              .replace(/AT/,'&#64;')
              .replace(/DOT/,'&#46;')"
>Contattami</a>

DIVIDERE L'INDIRIZZO IN PIU' PARTI

Si può dividere l'indirizzo email in più parti e usare la proprietà .innerHTML per poi riunirle

<span id="email"></span>
<script>
  var parte = ["mario", "gmail", "com", "&#46;", "&#64;"];
  var email = parte[0] + parte[4] + parte[1] + parte[3] + parte[2];
  document.getElementById("email").innerHTML=email;
</script>

Questo forse è il sistema da preferire visto che gli utenti potranno selezionarlo e copiarlo come fanno di solito. I simboli "&#46;", "&#64;" rappresentano il punto e la chiocciola @ e il punto.

La dimostrazione del funzionamento di tutti questi codici la potete visualizzare su CodePen in cui i codici HTML, CSS e javascript sono stati inseriti nei rispettivi riquadri.  Ho inserito dei salti di riga <br/>e se non visualizzate subito gli indirizzi cliccate su F5 per rinfrescare la pagina.