Hur du säkert delar din e-postadress på en webbplats

Spammare är en stor affär nuförtiden. Om du vill dela din kontaktinformation utan att bli överväldigad av skräppost behöver du en lösning. Jag stötte på det här problemet för några månader sedan. Medan jag undersökte hur jag skulle lösa det hittade jag olika intressanta lösningar. Endast en av dem var perfekt för mina behov.

I den här artikeln kommer jag att visa dig hur du enkelt skyddar din e-postadress från spam bots med flera lösningar. Det är upp till dig att bestämma vilken teknik som passar dina behov.

Det traditionella fallet

Låt oss säga att du har en hemsida. Du vill dela dina kontaktuppgifter, och du vill inte bara dela dina sociala länkar. E-postadressen måste finnas där. Lätt, eller hur? Du skriver något sånt här:

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

Och sedan stylar du den efter din smak.

Tja, även om den här lösningen fungerar har den ett problem. Det gör din e-postadress tillgänglig för bokstavligen alla, inklusive sökrobotar och alla typer av spambots. Det betyder att din inkorg kan översvämmas av massor av oönskat skräp som kampanjerbjudanden eller till och med någon nätfiskekampanj.

Vi letar efter en kompromiss. Vi vill göra det svårt för bots att få våra e-postadresser, men så enkelt som möjligt för vanliga användare.

Lösningen är förvirring.

Obfuscation är övningen att göra något svårt att förstå. Denna strategi används med källkod av flera skäl. En av dem är att dölja syftet med källkoden för att göra manipulering eller omvänd konstruktion svårare. Vi ska först titta på olika lösningar som alla är baserade på idén om obfuskation.

HTML-metoden

Vi kan tänka oss bots som programvara som surfar på webben och kryper igenom webbsidor. När en bot får ett HTML-dokument tolkar den innehållet i det och extraherar information. Denna extraktionsprocess kallas webbskrapning. Om en bot letar efter ett mönster som matchar e-postformatet kan vi försöka dölja det genom att använda ett annat format. Till exempel kan vi använda HTML-kommentarer:

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

Det ser rörigt ut, men användaren kommer att se e-postadressen så här:

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

Alla tillgångar på ett och samma ställe

• Lätt att ställa in.
• Det fungerar med JavaScript inaktiverat.
• Den kan läsas av hjälpmedel.

Nackdelar:

• Spambots kan hoppa över kända sekvenser som kommentarer.
• Det fungerar inte med en mailto: länken.

HTML & CSS-metoden

Vad händer om vi använder stylingkraften hos CSS för att ta bort visst innehåll som endast är placerat för att lura spambots? Låt oss säga att vi har samma innehåll som tidigare, men den här gången placerar vi en span element inuti:

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

Sedan använder vi följande CSS-stilregel:

span.blockspam {
  display: none;
}

Den slutliga användaren kommer bara att se detta:

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

...vilket är innehållet vi verkligen bryr oss om.

Alla tillgångar på ett och samma ställe

• Det fungerar med JavaScript inaktiverat.
• Det är svårare för bots att få e-postadressen.
• Den kan läsas av hjälpmedel.

con:

• Det fungerar inte med en mailto: länken.

JavaScript-metoden

I det här exemplet använder vi JavaScript för att göra vår e-postadress oläslig. Sedan, när sidan är laddad, gör JavaScript e-postadressen läsbar igen. På så sätt kan våra användare få e-postadressen.

Den enklaste lösningen använder Base64-kodningsalgoritmen för att avkoda e-postadressen. Först måste vi koda e-postadressen i Base64. Vi kan använda vissa webbplatser som Base64Encode.org att göra detta. Skriv in din e-postadress så här:

Klicka sedan på knappen för att koda. Med dessa få rader JavaScript avkodar vi e-postadressen och ställer in href attribut i HTML-länken:

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

Sedan måste vi se till att e-postlänken innehåller id="contact" i markeringen, så här:

Send me an Email

Vi använder atob metod för att avkoda en sträng med Base64-kodad data. Ett alternativ är att använda någon grundläggande krypteringsalgoritm som Caesar chiffer, vilket är ganska enkelt att implementera i JavaScript.

Alla tillgångar på ett och samma ställe

• Det är mer komplicerat för bots att få e-postadressen, speciellt om du använder en krypteringsalgoritm.
• Det fungerar med en mailto: länken.
• Den kan läsas av hjälpmedel.

con:

• JavaScript måste vara aktiverat i webbläsaren, annars kommer länken att vara tom.

Den inbäddade formmetoden

Kontaktformulär finns överallt. Du har säkert använt en av dem minst en gång. Om du vill ha ett sätt för människor att direkt kontakta dig, är en av de möjliga lösningarna att implementera en kontaktformulärtjänst på din webbplats.

Formspree är ett exempel på tjänst som ger dig alla fördelar med ett kontaktformulär utan att behöva oroa dig för kod på serversidan. Wufoo Är också. Faktiskt, här är ett gäng du kan överväga för att hantera inlämningar av kontaktformulär åt dig.

Det första steget för att använda någon formtjänst är att registrera dig och skapa ett konto. Priserna varierar naturligtvis, liksom funktionerna som erbjuds mellan tjänsterna. Men en sak de flesta av dem gör är att förse dig med ett HTML-kodavsnitt för att bädda in ett formulär som du skapar på vilken webbplats eller app som helst. Här är ett exempel som jag hämtade direkt från ett formulär som jag skapade i mitt Formspring-konto

   Your email:
    
  
   Your message:
    
  
  
  
  Send

I den första raden bör du anpassa action baserat på din slutpunkt. Denna form är ganska grundläggande, men du kan lägga till så många fält du vill.

Lägg märke till den dolda inmatningstaggen på rad 9. Denna inmatningstagg hjälper dig att filtrera inlägg som görs av vanliga användare och botar. Faktum är att om Formsprees back-end ser en inlämning med den inmatningen ifylld, kommer den att kassera den. En vanlig användare skulle inte göra det, så det måste vara en bot.

Alla tillgångar på ett och samma ställe

• Din e-postadress är säker eftersom den inte är offentlig.
• Det fungerar med Javascript inaktiverat.

con:

• Förlitar sig på en tredjepartstjänst (som kan vara ett proffs, beroende på dina behov)

Det finns en annan nackdel med den här lösningen men jag lämnade den utanför listan eftersom den är ganska subjektiv och det beror på ditt användningsfall. Med den här lösningen delar du inte din e-postadress. Du ger människor ett sätt att kontakta dig. Tänk om människor vill att mejla dig? Vad händer om folk letar efter din e-postadress och de inte vill ha ett kontaktformulär? Ett kontaktformulär kan vara en tung lösning i den sortens situation.

Slutsats

Vi nådde slutet! I den här handledningen pratade vi om olika lösningar på problemet med e-postdelning online. Vi gick igenom olika idéer, som involverade HTML-kod, JavaScript och till och med några onlinetjänster som Formspree för att skapa kontaktformulär. I slutet av denna handledning bör du vara medveten om alla fördelar och nackdelar med de visade strategierna. Nu är det upp till dig att välja den mest lämpliga för ditt specifika användningsfall.