Pubblicato il 12/01/14e aggiornato il

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.

indirizzi-email-nascosti

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.




6 commenti :

  1. ciao ernesto ti contatto per chiederti un'informazione:io ho un blog su google ma non ho comprato il dominio e mi sono accorta che un sito pubblica i miei articoli senza mia autorizzazione e senza citarne la fonte ma cliccando sulla scritta read more rimanda nel mio blog...come mi devo comportare?devo seganalare e a chi? grazie mille

    RispondiElimina
  2. @ladybella
    Sono gli aggregatori non autorizzati. Anche i miei post vengono ripubblicati senza autorizzazione. Se è presente il link verso il tuo sito non mi preoccuperei perché in fondo ottieni dei backlink che possono migliorare il tuo rank e le visite non le perdi visto che se vogliono leggere i tuoi contenuti debbono comunque venire sul tuo blog
    @#

    RispondiElimina
  3. infatti è così...quindi non devo fare nulla?

    RispondiElimina
  4. il link nn è presente ma cliccando sul read more rimanda a me

    RispondiElimina
  5. @ladybella
    lascerei perdere però puoi sempre contattarlo o scrivere un commento sul sito se la cosa ti dà fastidio
    @#

    RispondiElimina
  6. contatti non ho trovati..ho lasciato messaggio

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.