Hogyan oszthatja meg biztonságosan e-mail címét egy webhelyen

A spammerek manapság nagy számban jelennek meg. Ha meg szeretné osztani kapcsolatfelvételi adatait anélkül, hogy elárasztaná a spam e-mail, megoldásra van szüksége. Néhány hónapja belefutottam ebbe a problémába. Amíg kutattam a megoldást, különböző érdekes megoldásokat találtam. Csak az egyik volt tökéletes az igényeimnek.

Ebben a cikkben bemutatom, hogyan védheti meg e-mail címét a spamrobotok ellen többféle megoldással. Rajtad múlik, hogy melyik technika felel meg az igényeidnek.

A hagyományos eset

Tegyük fel, hogy van egy webhelye. Meg akarja osztani az elérhetőségeit, és nem csak a közösségi linkjeit szeretné megosztani. Az email címnek ott kell lennie. Könnyű, igaz? Valami ilyesmit írsz be:

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

Aztán ízlésed szerint formázod.

Nos, még ha ez a megoldás működik is, van egy probléma. Szó szerint mindenki számára elérhetővé teszi e-mail címét, beleértve a webhelyek feltérképezőit és mindenféle spamrobotot is. Ez azt jelenti, hogy a postaládáját eláraszthatja rengeteg nem kívánt szemét, például promóciós ajánlatok vagy akár valamilyen adathalász kampány.

Kompromisszumot keresünk. Szeretnénk megnehezíteni a robotok számára az e-mail címeink megszerzését, de a lehető legegyszerűbbé tenni a normál felhasználók számára.

A megoldás a homályosítás.

ködösítés az a gyakorlat, hogy valamit nehéz megérteni. Ezt a stratégiát több okból is használják a forráskóddal. Az egyik a forráskód céljának elrejtése, hogy megnehezítse a manipulációt vagy a visszafejtést. Először megvizsgáljuk a különböző megoldásokat, amelyek mind az elhomályosítás gondolatán alapulnak.

A HTML megközelítés

A botokra úgy tekinthetünk, mint olyan szoftverekre, amelyek böngésznek az interneten, és weboldalakat másznak be. Miután egy bot megszerez egy HTML-dokumentumot, értelmezi a benne lévő tartalmat, és kivonja az információkat. Ezt az extrakciós folyamatot ún webes kaparás. Ha egy bot az e-mail formátumnak megfelelő mintát keres, megpróbálhatjuk más formátum használatával álcázni. Például használhatunk HTML megjegyzéseket:

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

Rendetlennek tűnik, de a felhasználó a következőképpen fogja látni az e-mail címet:

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

Előnyök:

• Könnyen beállítható.
• Kikapcsolt JavaScripttel működik.
• Segítő technológiával kiolvasható.

Hátrányok:

• A spamrobotok kihagyhatják az ismert sorozatokat, például a megjegyzéseket.
• Nem működik a mailto: link.

A HTML és CSS megközelítés

Mi van akkor, ha a CSS stílus erejét használjuk arra, hogy eltávolítsunk bizonyos tartalmakat, amelyek csak a spamrobotok megtévesztésére szolgálnak? Tegyük fel, hogy ugyanaz a tartalom, mint korábban, de ezúttal a span belső elem:

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

Ezután a következő CSS-stílusszabályt használjuk:

span.blockspam {
  display: none;
}

A végső felhasználó csak ezt fogja látni:

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

…ami az a tartalom, ami igazán érdekel bennünket.

Előnyök:

• Kikapcsolt JavaScripttel működik.
• A robotok számára nehezebb megszerezni az e-mail címet.
• Segítő technológiával kiolvasható.

With:

• Nem működik a mailto: link.

A JavaScript megközelítés

Ebben a példában JavaScriptet használunk az e-mail címünk olvashatatlanná tételére. Ezután az oldal betöltésekor a JavaScript újra olvashatóvá teszi az e-mail címet. Így felhasználóink ​​megkaphatják az e-mail címet.

A legegyszerűbb megoldás a Base64 kódolási algoritmust használja az e-mail cím dekódolására. Először is kódolnunk kell az e-mail címet a Base64-ben. Használhatunk néhány weboldalt, mint pl Base64Encode.org ezt csináld meg. Írja be e-mail címét így:

Ezután kattintson a gombra a kódoláshoz. Ezzel a néhány soros JavaScripttel dekódoljuk az e-mail címet, és beállítjuk a href attribútum a HTML linkben:

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

Ezután meg kell győződnünk arról, hogy az e-mail link tartalmazza id="contact" a jelölésben, így:

Send me an Email

Mi használjuk a atob módszer a Base64 kódolású adatok karakterláncának dekódolására. Alternatív megoldás egy alapvető titkosítási algoritmus használata, mint például a Caesar rejtjel, amelyet meglehetősen egyszerű megvalósítani JavaScriptben.

Előnyök:

• A robotok számára bonyolultabb az e-mail cím megszerzése, különösen, ha titkosítási algoritmust használ.
• Működik a mailto: link.
• Segítő technológiával kiolvasható.

With:

• A JavaScriptet engedélyezni kell a böngészőben, különben a hivatkozás üres lesz.

A beágyazott forma megközelítés

A kapcsolatfelvételi űrlapok mindenhol megtalálhatók. Minden bizonnyal már használta valamelyiket legalább egyszer. Ha azt szeretné, hogy az emberek közvetlenül kapcsolatba léphessenek Önnel, az egyik lehetséges megoldás egy kapcsolatfelvételi űrlap szolgáltatás megvalósítása a webhelyén.

Formspree egy példa arra a szolgáltatásra, amely a kapcsolatfelvételi űrlap minden előnyét biztosítja anélkül, hogy aggódnia kellene a szerveroldali kód miatt. Wufoo is. Valójában, itt van egy csomó, amit megfontolhat a kapcsolatfelvételi űrlapok kezeléséhez.

Az űrlapszolgáltatás használatának első lépése a regisztráció és a fiók létrehozása. Az árak természetesen eltérőek, csakúgy, mint a szolgáltatások között kínált szolgáltatások. A legtöbben azonban egy HTML-kódrészletet biztosítanak Önnek, amellyel beágyazhat egy űrlapot bármely webhelybe vagy alkalmazásba. Íme egy példa, amelyet közvetlenül a Formspring-fiókomban létrehozott űrlapról húztam le

   Your email:
    
  
   Your message:
    
  
  
  
  Send

Az első sorban testre kell szabni action a végpontja alapján. Ez az űrlap meglehetősen egyszerű, de tetszőleges számú mezőt hozzáadhat.

Figyelje meg a rejtett bemeneti címkét a 9. sorban. Ez a bemeneti címke segít a normál felhasználók és botok által beküldött anyagok szűrésében. Valójában, ha a Formspree háttérrendszere egy olyan beadványt lát, amely kitöltve van ezzel a bemenettel, akkor elveti azt. Egy normál felhasználó nem tenné ezt, tehát egy botnak kell lennie.

Előnyök:

• E-mail címe biztonságban van, mivel nem nyilvános.
• Javascript letiltásával működik.

With:

• Harmadik fél szolgáltatására támaszkodik (amely az Ön igényeitől függően profi lehet)

Van még egy hátránya ennek a megoldásnak, de kihagytam a listából, mivel meglehetősen szubjektív, és a használati esettől függ. Ezzel a megoldással nem osztja meg az e-mail címét. Módot adsz az embereknek, hogy kapcsolatba léphessenek veled. Mi van, ha az emberek akar e-mailt küldeni neked? Mi van, ha az emberek az Ön e-mail címét keresik, és nem akarnak kapcsolatfelvételi űrlapot? A kapcsolatfelvételi űrlap nehézkezes megoldás lehet ilyen helyzetben.

Következtetés

A végére értünk! Ebben az oktatóanyagban az online e-mail megosztás problémájának különböző megoldásairól beszéltünk. Különböző ötleteket dolgoztunk ki, beleértve a HTML-kódot, a JavaScriptet és még néhány online szolgáltatást is, például a Formspree-t a kapcsolatfelvételi űrlapok létrehozásához. Ennek az oktatóanyagnak a végén tisztában kell lennie a bemutatott stratégiák előnyeivel és hátrányaival. Most már Önön múlik, hogy kiválasztja az adott használati esetnek leginkább megfelelőt.