Cum să partajați în siguranță adresa dvs. de e-mail pe un site web

Spammerii sunt o afacere uriașă în zilele noastre. Dacă doriți să împărtășiți informațiile dvs. de contact fără a fi copleșit de e-mailul spam, aveți nevoie de o soluție. Am intampinat aceasta problema acum cateva luni. În timp ce cercetam cum să o rezolv, am găsit diferite soluții interesante. Doar unul dintre ele a fost perfect pentru nevoile mele.

În acest articol, vă voi arăta cum să vă protejați cu ușurință adresa de e-mail de roboții de spam cu mai multe soluții. Depinde de tine să decizi ce tehnică se potrivește nevoilor tale.

Cazul tradițional

Să presupunem că aveți un site web. Doriți să împărtășiți datele dvs. de contact și nu doriți să partajați doar linkurile dvs. sociale. Adresa de e-mail trebuie să fie acolo. Ușor, nu? Tastați ceva de genul:

<a href="mailto:[email protected]">Send me an Email

Și apoi îl stilizezi după gusturile tale.

Ei bine, chiar dacă această soluție funcționează, are o problemă. Vă face adresa de e-mail disponibilă literalmente pentru toată lumea, inclusiv pentru crawlerele site-urilor web și tot felul de roboți de spam. Aceasta înseamnă că căsuța dvs. de e-mail poate fi inundată cu tone de deșeuri nedorite, cum ar fi oferte promoționale sau chiar campanii de phishing.

Căutăm un compromis. Vrem să facem greu pentru roboți să obțină adresele noastre de e-mail, dar cât mai simplu posibil pentru utilizatorii obișnuiți.

Soluția este înfundarea.

Confuzie este practica de a face ceva greu de înțeles. Această strategie este utilizată cu codul sursă din mai multe motive. Una dintre ele este ascunderea scopului codului sursă pentru a face mai dificilă manipularea sau inginerie inversă. Mai întâi ne vom uita la diferite soluții care se bazează toate pe ideea de ofuscare.

Abordarea HTML

Ne putem gândi la roboți ca la un software care navighează pe web și se accesează cu crawlere prin pagini web. Odată ce un bot obține un document HTML, interpretează conținutul din acesta și extrage informații. Acest proces de extracție se numește razuire web. Dacă un bot caută un model care se potrivește cu formatul de e-mail, putem încerca să-l ascundem folosind un alt format. De exemplu, am putea folosi comentarii HTML:

If you want to get in touch, please drop me an email at [email protected]address.com

Pare dezordonat, dar utilizatorul va vedea adresa de e-mail astfel:

If you want to get in touch, please drop me an email at [email protected]

Pro-uri:

• Ușor de configurat.
• Funcționează cu JavaScript dezactivat.
• Poate fi citit prin tehnologie de asistență.

Contra:

• Boții de spam pot sări peste secvențele cunoscute, cum ar fi comentariile.
• Nu merge cu a mailto: link-ul.

Abordarea HTML și CSS

Ce se întâmplă dacă folosim puterea de stilare a CSS pentru a elimina o parte din conținut plasat doar pentru a păcăli roboții de spam? Să zicem că avem același conținut ca înainte, dar de data aceasta plasăm a span element din interior:

If you want to get in touch, please drop me an email at PLEASE GO AWAY! [email protected]address.com
.

Apoi, folosim următoarea regulă de stil CSS:

span.blockspam {
  display: none;
}

Utilizatorul final va vedea doar asta:

If you want to get in touch, please drop me an email at [email protected]

…care este conținutul la care ne pasă cu adevărat.

Pro-uri:

• Funcționează cu JavaScript dezactivat.
• Este mai dificil pentru roboți să obțină adresa de e-mail.
• Poate fi citit prin tehnologie de asistență.

Con:

• Nu merge cu a mailto: link-ul.

Abordarea JavaScript

În acest exemplu, folosim JavaScript pentru a face ca adresa noastră de e-mail să nu fie citită. Apoi, când pagina este încărcată, JavaScript face ca adresa de e-mail să fie din nou citită. În acest fel, utilizatorii noștri pot obține adresa de e-mail.

Cea mai simplă soluție folosește algoritmul de codificare Base64 pentru a decoda adresa de e-mail. În primul rând, trebuie să codificăm adresa de e-mail în Base64. Putem folosi unele site-uri precum Base64Encode.org pentru a face acest lucru. Introdu adresa ta de e-mail astfel:

Apoi, faceți clic pe butonul pentru a codifica. Cu aceste câteva linii de JavaScript decodăm adresa de e-mail și setăm href atribut în linkul HTML:

var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));

Apoi trebuie să ne asigurăm că linkul de e-mail include id="contact" în marcaj, așa:

Send me an Email

Folosim atob metodă de a decoda un șir de date codificate în Base64. O alternativă este să utilizați un algoritm de criptare de bază, cum ar fi Cifrul Caesar, care este destul de simplu de implementat în JavaScript.

Pro-uri:

• Este mai complicat pentru roboți să obțină adresa de e-mail, mai ales dacă utilizați un algoritm de criptare.
• Funcționează cu un mailto: link-ul.
• Poate fi citit prin tehnologie de asistență.

Con:

• JavaScript trebuie să fie activat în browser, în caz contrar, linkul va fi gol.

Abordarea formularului încorporat

Formularele de contact sunt peste tot. Cu siguranță ai folosit unul dintre ele cel puțin o dată. Dacă doriți o modalitate prin care oamenii să vă contacteze direct, una dintre soluțiile posibile este implementarea unui serviciu de formular de contact pe site-ul dvs.

Formspree este un exemplu de serviciu care vă oferă toate beneficiile unui formular de contact fără să vă faceți griji cu privire la codul serverului. Wufoo este de asemenea. De fapt, iată o grămadă pe care o poți lua în considerare pentru gestionarea trimiterilor formularelor de contact pentru dvs.

Primul pas pentru utilizarea oricărui serviciu de formular este să vă înregistrați și să creați un cont. Prețurile variază, desigur, la fel ca și caracteristicile oferite între servicii. Dar un lucru pe care majoritatea dintre ei îl fac este să vă ofere un fragment HTML pentru a încorpora un formular pe care îl creați în orice site web sau aplicație. Iată un exemplu pe care l-am extras direct dintr-un formular creat în contul meu Formspring

   Your email:
    
  
   Your message:
    
  
  
  
  Send

În prima linie, ar trebui să personalizați action pe baza punctului final. Acest formular este destul de simplu, dar puteți adăuga câte câmpuri doriți.

Observați eticheta de intrare ascunsă pe linia 9. Această etichetă de introducere vă ajută să filtrați trimiterile făcute de utilizatorii obișnuiți și de roboții. De fapt, dacă back-end-ul Formspree vede o trimitere cu acea intrare completată, o va renunța. Un utilizator obișnuit nu ar face asta, așa că trebuie să fie un bot.

Pro-uri:

• Adresa ta de e-mail este sigură, deoarece nu este publică.
• Funcționează cu Javascript dezactivat.

Con:

• Se bazează pe un serviciu terță parte (care poate fi un profesionist, în funcție de nevoile dvs.)

Există un alt dezavantaj al acestei soluții, dar am lăsat-o afară din listă, deoarece este destul de subiectivă și depinde de cazul dvs. de utilizare. Cu această soluție, nu vă partajați adresa de e-mail. Oferiți oamenilor o modalitate de a vă contacta. Dacă oamenii vrea sa iti e-mail? Ce se întâmplă dacă oamenii caută adresa ta de e-mail și nu vor un formular de contact? Un formular de contact poate fi o soluție grea în astfel de situații.

Concluzie

Am ajuns la final! În acest tutorial, am vorbit despre diferite soluții la problema partajării online a e-mailurilor. Am trecut prin diferite idei, implicând cod HTML, JavaScript și chiar unele servicii online precum Formspree pentru a construi formulare de contact. La sfârșitul acestui tutorial, ar trebui să fiți conștienți de toate avantajele și dezavantajele strategiilor prezentate. Acum, depinde de dvs. să alegeți cel mai potrivit pentru cazul dvs. de utilizare specific.