Kuinka jakaa sähköpostiosoitteesi turvallisesti verkkosivustolla

Roskapostittajat ovat nykyään valtava määrä. Tarvitset ratkaisun, jos haluat jakaa yhteystietosi joutumatta roskapostin hukkumiseen. Törmäsin tähän ongelmaan muutama kuukausi sitten. Tutkiessani sen ratkaisemista löysin erilaisia ​​mielenkiintoisia ratkaisuja. Vain yksi niistä oli täydellinen minun tarpeisiini.

Tässä artikkelissa aion näyttää sinulle, kuinka helposti suojata sähköpostiosoitteesi roskapostirobotilta useilla ratkaisuilla. On sinun päätettävissäsi, mikä tekniikka sopii tarpeisiisi.

Perinteinen tapaus

Oletetaan, että sinulla on verkkosivusto. Haluat jakaa yhteystietosi etkä vain sosiaalisia linkkejäsi. Sähköpostiosoitteen tulee olla siellä. Helppoa, eikö? Kirjoitat jotain näin:

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

Ja sitten muotoilet sen makusi mukaan.

No, vaikka tämä ratkaisu toimisi, siinä on ongelma. Se antaa sähköpostiosoitteesi kirjaimellisesti kaikkien saataville, mukaan lukien verkkosivustojen indeksointirobotit ja kaikenlaiset roskapostirobotit. Tämä tarkoittaa, että postilaatikkoosi voi tulla tonnia ei-toivottua roskaa, kuten kampanjatarjouksia tai jopa tietojenkalastelukampanjaa.

Etsimme kompromissia. Haluamme tehdä bottien vaikeaksi saada sähköpostiosoitteitamme, mutta mahdollisimman yksinkertaiseksi tavallisille käyttäjille.

Ratkaisu on hämärtäminen.

obfuscation on käytäntö tehdä jostain vaikeasti ymmärrettävä. Tätä strategiaa käytetään lähdekoodin kanssa useista syistä. Yksi niistä on piilottaa lähdekoodin tarkoitus peukaloinnin tai käänteisen suunnittelun vaikeuttamiseksi. Tarkastelemme ensin erilaisia ​​ratkaisuja, jotka kaikki perustuvat hämärtämisen ajatukseen.

HTML-lähestymistapa

Voimme ajatella, että botit ovat ohjelmistoja, jotka selaavat verkkoa ja indeksoivat verkkosivuja. Kun robotti saa HTML-dokumentin, se tulkitsee sen sisällön ja poimii tiedot. Tätä uuttoprosessia kutsutaan web-kaavinta. Jos robotti etsii kuviota, joka vastaa sähköpostin muotoa, voimme yrittää peittää sen käyttämällä eri muotoa. Voisimme käyttää esimerkiksi HTML-kommentteja:

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

Se näyttää sotkuiselta, mutta käyttäjä näkee sähköpostiosoitteen seuraavasti:

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

Plussat:

• Helppo asentaa.
• Se toimii JavaScriptin ollessa pois käytöstä.
• Se voidaan lukea avustavalla tekniikalla.

Miinukset:

• Roskapostibotit voivat ohittaa tunnettuja sarjoja, kuten kommentteja.
• Se ei toimi a mailto: linkki.

HTML- ja CSS-lähestymistapa

Entä jos käytämme CSS:n tyylivoimaa poistaaksemme sisältöä, joka on sijoitettu vain roskapostirobottien huijaamiseen? Oletetaan, että meillä on sama sisältö kuin ennen, mutta tällä kertaa sijoitamme a span elementti sisällä:

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

Sitten käytämme seuraavaa CSS-tyylisääntöä:

span.blockspam {
  display: none;
}

Loppukäyttäjä näkee vain tämän:

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

…mikä on sisältö, josta todella välitämme.

Plussat:

• Se toimii JavaScriptin ollessa pois käytöstä.
• Botien on vaikeampi saada sähköpostiosoite.
• Se voidaan lukea avustavalla tekniikalla.

con:

• Se ei toimi a mailto: linkki.

JavaScript lähestymistapa

Tässä esimerkissä käytämme JavaScriptiä tehdäksemme sähköpostiosoitteestamme lukukelvottoman. Sitten, kun sivu on ladattu, JavaScript tekee sähköpostiosoitteen uudelleen luettavissa. Näin käyttäjämme voivat saada sähköpostiosoitteen.

Helpoin ratkaisu käyttää Base64-koodausalgoritmia sähköpostiosoitteen purkamiseen. Ensin meidän on koodattava sähköpostiosoite Base64:ään. Voimme käyttää joitain verkkosivustoja, kuten Base64Encode.org tehdä tämä. Kirjoita sähköpostiosoitteesi näin:

Napsauta sitten painiketta koodataksesi. Näillä muutamalla JavaScript-rivillä puramme sähköpostiosoitteen ja asetamme sen href attribuutti HTML-linkissä:

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

Sitten meidän on varmistettava, että sähköpostilinkki sisältää id="contact" merkinnöissä näin:

Send me an Email

Käytämme atob menetelmä Base64-koodatun datan merkkijonon purkamiseen. Vaihtoehtona on käyttää jotain perussalausalgoritmia, kuten Caesar-salaus, joka on melko yksinkertaista toteuttaa JavaScriptissä.

Plussat:

• Botien on monimutkaisempaa saada sähköpostiosoite, varsinkin jos käytät salausalgoritmia.
• Se toimii a mailto: linkki.
• Se voidaan lukea avustavalla tekniikalla.

con:

• JavaScript on oltava käytössä selaimessa, muuten linkki on tyhjä.

Sulautetun lomakkeen lähestymistapa

Yhteydenottolomakkeita on kaikkialla. Olet varmasti käyttänyt yhtä niistä ainakin kerran. Jos haluat, että ihmiset voivat ottaa sinuun suoraan yhteyttä, yksi mahdollisista ratkaisuista on ottaa yhteydenottolomakepalvelu käyttöön verkkosivustollasi.

Formspree on yksi esimerkki palvelusta, joka tarjoaa kaikki yhteydenottolomakkeen edut huolehtimatta palvelinpuolen koodista. Wufoo on myös. Itse asiassa, tässä on joukko, joita voit harkita yhteydenottolomakelähetysten käsittelemiseen puolestasi.

Ensimmäinen askel minkä tahansa lomakepalvelun käyttämiseen on rekisteröityminen ja tilin luominen. Hinnoittelu vaihtelee tietysti, samoin kuin palvelujen välillä tarjottavat ominaisuudet. Mutta yksi asia useimmat heistä tarjoavat sinulle HTML-koodinpätkän, jolla voit upottaa luomasi lomakkeen mihin tahansa verkkosivustoon tai sovellukseen. Tässä on esimerkki, jonka hain suoraan Formspring-tililläni luomastani lomakkeesta

   Your email:
    
  
   Your message:
    
  
  
  
  Send

Ensimmäisellä rivillä sinun tulee mukauttaa action päätepisteesi perusteella. Tämä lomake on melko yksinkertainen, mutta voit lisätä niin monta kenttää kuin haluat.

Huomaa piilotettu syöttötunniste rivillä 9. Tämä syötetunniste auttaa sinua suodattamaan tavallisten käyttäjien ja robottien lähettämät tiedot. Itse asiassa, jos Formspreen taustaohjelma näkee lähetyksen, jonka syöte on täytetty, se hylkää sen. Tavallinen käyttäjä ei tekisi niin, joten sen täytyy olla botti.

Plussat:

• Sähköpostiosoitteesi on turvassa, koska se ei ole julkinen.
• Se toimii Javascriptin ollessa pois käytöstä.

con:

• Luottaa kolmannen osapuolen palveluun (joka voi olla ammattilainen tarpeidesi mukaan)

Tällä ratkaisulla on toinenkin haitta, mutta jätin sen pois luettelosta, koska se on melko subjektiivinen ja riippuu käyttötapauksestasi. Tällä ratkaisulla et jaa sähköpostiosoitettasi. Annat ihmisille tavan ottaa sinuun yhteyttä. Entä jos ihmiset haluta lähettää sinulle sähköpostia? Entä jos ihmiset etsivät sähköpostiosoitettasi eivätkä halua yhteydenottolomaketta? Yhteydenottolomake voi olla raskas ratkaisu tällaisessa tilanteessa.

Yhteenveto

Pääsimme loppuun! Tässä opetusohjelmassa puhuimme erilaisista ratkaisuista online-sähköpostin jakamisen ongelmaan. Kävimme läpi erilaisia ​​ideoita, joihin käytettiin HTML-koodia, JavaScriptiä ja jopa joitain verkkopalveluita, kuten Formspree, yhteydenottolomakkeiden luomiseen. Tämän opetusohjelman lopussa sinun tulee olla tietoinen kaikista esitettyjen strategioiden eduista ja haitoista. Nyt on sinun tehtäväsi valita käyttötarkoitukseesi sopivin.