Avete un sito web e volete mettere il vostro indirizzo email sul sito in modo che le persone possono contattarvi facilmente, ma siete anche preoccupati per lo spam che potete incontrare sulla vostra casella di posta una volta che il vostro indirizzo e-mail comincia ad apparire su una pagina web pubblica. La vostra preoccupazione è valida.

I bot di raccolta-mail, utilizzando semplici espressioni regolari, che non fanno altro che trovare il vostro indirizzo e-mail se viene pubblicato in testo normale. Si possono ingannare i bot meno intelligenti nascondendo il vostro indirizzo e-mail attraverso un semplice CSS e tecniche basate JavaScript.

Nascondere l’email utilizzando il CSS

Pseudo-classi di CSS

È possibile utilizzare il :: before e :: after pseudo-elementi nei CSS per inserire il nome utente e-mail e nome di dominio su entrambi i lati del simbolo @. I bot, che sono generalmente ciechi al CSS, vedranno solo il simbolo @ mentre i browser renderanno l’indirizzo email completo che, in questo caso, è john@gmail.com.

Aggiornamento: Ecco un’altra versione suggerito da @orlie che rende la voce più oscuro poiché il simbolo “@” è inserito in questo caso attraverso un elemento pseudo.

Il rovescio della medaglia con l’approccio di cui abbiamo appena parlato nel paragrafo sopra è che gli utenti non saranno in grado di selezionare e copiare l’indirizzo email sulla pagina web, ma andranno a scriverlo manualmente.

Se si preferisce a utilizzare gli pseudo-elementi, ma con uno stile più user-friendly che permette la selezione, si può provare un approccio alternativo con tutti i caratteri di posta elettronica, ma il simbolo “@” è selezionabile.

Invertire la direzione

È possibile scrivere il vostro indirizzo email in senso inverso (john@abc.com come moc.cba @ nhoj) e quindi usare i unicode-bidi e la direzione delle proprietà di CSS per indicare al browser di visualizzare il testo nella direzione inversa(o corretto) . Il testo è selezionabile, ma l’indirizzo sarà copiato in senso inverso.

Spegnere il ‘display’

È possibile aggiungere caratteri extra per il tuo indirizzo email per confondere lo spam dei bots e quindi utilizzare la proprietà ‘display’ del CSS  per rendere il vostro indirizzo email reale sullo schermo, nascondendo tutti i bit supplementari.

Offuscare l’email tramite JavaScript

Utilizzando l’evento ‘onclick’

È possibile creare un normale collegamento ipertestuale mailto per il vostro indirizzo e-mail, ma dovete sostituire alcuni dei caratteri – come il punto e il segno @ – con il testo. Poi aggiungere un evento onclick a questo collegamento ipertestuale che andrà a sostituire il testo con i simboli reali.

Random Array

Dividete il vostro indirizzo e-mail in più parti e create un array in JavaScript di queste parti. Più avanti unire queste parti nell’ordine corretto utilizzando la proprietà  .innerHTML per aggiungere l’indirizzo di posta elettronica alla pagina web.

WordPress + PHP

Se siete su WordPress, si può anche considerare usando la funzione built-in antispambot () per codificare il tuo indirizzo email. La funzione codifica i caratteri del vostro indirizzo per la loro entità di carattere HTML (la lettera a diventa il simbolo @ diviene @) anche se renderanno correttamente nel browser.

È anche possibile codificare indirizzi e-mail nel browser.

Infine, se proprio non volete bots spam per vedere il vostro indirizzo e-mail, o non mettete sulla vostra pagina web oppure usate reCAPTCHA service di Google. Questo servizio nasconde il proprio indirizzo di posta elettronica dietro un CAPTCHA – vedi esempio – e la gente lo dovrà risolvere correttamente per vedere il vostro indirizzo email.