Gli spammer sono un grosso problema al giorno d'oggi. Se vuoi condividere le tue informazioni di contatto senza essere sopraffatto da e-mail di spam, hai bisogno di una soluzione. Mi sono imbattuto in questo problema qualche mese fa. Mentre stavo cercando come risolverlo, ho trovato diverse soluzioni interessanti. Solo uno di loro era perfetto per le mie esigenze.
In questo articolo, ti mostrerò come proteggere facilmente il tuo indirizzo email dai bot spam con più soluzioni. Sta a te decidere quale tecnica si adatta alle tue esigenze.
Sommario
Il caso tradizionale
Diciamo che hai un sito web. Vuoi condividere i tuoi dettagli di contatto e non vuoi condividere solo i tuoi collegamenti social. L'indirizzo email deve essere presente. Facile, vero? Scrivi qualcosa del genere:
<a href="mailto:[email protected]">Send me an EmailE poi lo modelli secondo i tuoi gusti.
Bene, anche se questa soluzione funziona, ha un problema. Rende il tuo indirizzo e-mail disponibile letteralmente a tutti, inclusi i crawler di siti Web e tutti i tipi di bot spam. Ciò significa che la tua casella di posta può essere inondata da tonnellate di spazzatura indesiderata come offerte promozionali o persino qualche campagna di phishing.
Cerchiamo un compromesso. Vogliamo rendere difficile per i bot ottenere i nostri indirizzi e-mail, ma il più semplice possibile per gli utenti normali.
La soluzione è l'offuscamento.
Offuscazione è la pratica di fare qualcosa di difficile da capire. Questa strategia viene utilizzata con il codice sorgente per diversi motivi. Uno di questi è nascondere lo scopo del codice sorgente per rendere più difficili le manomissioni o il reverse engineering. Per prima cosa esamineremo diverse soluzioni che sono tutte basate sull'idea di offuscamento.
L'approccio HTML
Possiamo pensare ai bot come a un software che naviga sul Web ed esegue la scansione delle pagine Web. Una volta che un bot ottiene un documento HTML, ne interpreta il contenuto ed estrae le informazioni. Questo processo di estrazione è chiamato raschiatura del web. Se un bot sta cercando un modello che corrisponda al formato dell'e-mail, possiamo provare a mascherarlo utilizzando un formato diverso. Ad esempio, potremmo usare i commenti HTML:
If you want to get in touch, please drop me an email at [email protected]address.com
Sembra disordinato, ma l'utente vedrà l'indirizzo email in questo modo:
If you want to get in touch, please drop me an email at [email protected]PRO:
- Facile da configurare.
- Funziona con JavaScript disabilitato.
- Può essere letto dalla tecnologia assistiva.
Contro:
- I bot spam possono saltare sequenze note come i commenti.
- Non funziona con a
mailto:collegamento.
L'approccio HTML e CSS
E se usiamo il potere di stile dei CSS per rimuovere alcuni contenuti inseriti solo per ingannare i bot spam? Diciamo che abbiamo lo stesso contenuto di prima, ma questa volta posizioniamo a span elemento all'interno:
If you want to get in touch, please drop me an email at [email protected]address.com
.Quindi, utilizziamo la seguente regola di stile CSS:
span.blockspam {
display: none;
}L'utente finale vedrà solo questo:
If you want to get in touch, please drop me an email at [email protected]...che è il contenuto a cui teniamo veramente.
PRO:
- Funziona con JavaScript disabilitato.
- È più difficile per i bot ottenere l'indirizzo email.
- Può essere letto dalla tecnologia assistiva.
Con:
- Non funziona con a
mailto:collegamento.
L'approccio JavaScript
In questo esempio, utilizziamo JavaScript per rendere illeggibile il nostro indirizzo email. Quindi, quando la pagina viene caricata, JavaScript rende nuovamente leggibile l'indirizzo email. In questo modo, i nostri utenti possono ottenere l'indirizzo e-mail.
La soluzione più semplice utilizza l'algoritmo di codifica Base64 per decodificare l'indirizzo e-mail. Innanzitutto, dobbiamo codificare l'indirizzo e-mail in Base64. Possiamo usare alcuni siti web come Base64Encode.org per farlo. Digita il tuo indirizzo email in questo modo:
Quindi, fare clic sul pulsante per codificare. Con queste poche righe di JavaScript decodifichiamo l'indirizzo email e impostiamo il href attributo nel collegamento HTML:
var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));Quindi dobbiamo assicurarci che il link e-mail includa id="contact" nel markup, in questo modo:
Send me an EmailStiamo usando il atob metodo per decodificare una stringa di dati con codifica Base64. Un'alternativa è utilizzare un algoritmo di crittografia di base come il Cifrario di Cesare, che è abbastanza semplice da implementare in JavaScript.
PRO:
- È più complicato per i bot ottenere l'indirizzo e-mail, soprattutto se si utilizza un algoritmo di crittografia.
- Funziona con un file
mailto:collegamento. - Può essere letto dalla tecnologia assistiva.
Con:
- JavaScript deve essere abilitato sul browser, altrimenti il link sarà vuoto.
L'approccio della forma incorporata
I moduli di contatto sono ovunque. Sicuramente ne hai usato uno almeno una volta. Se desideri che le persone ti contattino direttamente, una delle possibili soluzioni è implementare un servizio di modulo di contatto sul tuo sito web.
Formpree è un esempio di servizio che ti offre tutti i vantaggi di un modulo di contatto senza preoccuparti del codice lato server. Wufoo è anche. Infatti, ecco un mucchio che puoi prendere in considerazione per la gestione degli invii dei moduli di contatto per te.
Il primo passo per utilizzare qualsiasi servizio di modulo è registrarsi e creare un account. Il prezzo varia, ovviamente, così come le funzionalità offerte tra i servizi. Ma una cosa che la maggior parte di loro fa è fornirti uno snippet HTML per incorporare un modulo che crei in qualsiasi sito Web o app. Ecco un esempio che ho estratto direttamente da un modulo che ho creato nel mio account Formspring
Nella prima riga, dovresti personalizzare action in base al tuo endpoint. Questo modulo è abbastanza semplice, ma puoi aggiungere tutti i campi che desideri.
Nota il tag di input nascosto alla riga 9. Questo tag di input ti aiuta a filtrare gli invii effettuati da utenti regolari e bot. In effetti, se il back-end di Formspree vede un invio con quell'input riempito, lo scarterà. Un utente normale non lo farebbe, quindi deve essere un bot.
PRO:
- Il tuo indirizzo email è sicuro poiché non è pubblico.
- Funziona con Javascript disabilitato.
Con:
- Si affida a un servizio di terze parti (che può essere un professionista, a seconda delle tue esigenze)
C'è un altro svantaggio in questa soluzione, ma l'ho lasciato fuori dall'elenco poiché è piuttosto soggettivo e dipende dal tuo caso d'uso. Con questa soluzione, non stai condividendo il tuo indirizzo email. Stai dando alle persone un modo per contattarti. E se le persone volere per e-mail? Cosa succede se le persone cercano il tuo indirizzo email e non vogliono un modulo di contatto? Un modulo di contatto può essere una soluzione pesante in quel tipo di situazione.
Conclusione
Siamo arrivati alla fine! In questo tutorial abbiamo parlato di diverse soluzioni al problema della condivisione delle email online. Abbiamo esaminato diverse idee, coinvolgendo codice HTML, JavaScript e persino alcuni servizi online come Formspree per creare moduli di contatto. Alla fine di questo tutorial, dovresti essere a conoscenza di tutti i pro e i contro delle strategie mostrate. Ora sta a te scegliere quello più adatto al tuo caso d'uso specifico.
