Sådan deler du din e-mail-adresse sikkert på et websted

Spammere er et stort tilbud i dag. Hvis du vil dele dine kontaktoplysninger uden at blive overvældet af spam-e-mail, har du brug for en løsning. Jeg støder på dette problem for et par måneder siden. Mens jeg undersøgte, hvordan man løser det, fandt jeg forskellige interessante løsninger. Kun en af ​​dem var perfekt til mine behov.

I denne artikel vil jeg vise dig, hvordan du nemt beskytter din e-mailadresse mod spambots med flere løsninger. Det er op til dig at beslutte, hvilken teknik der passer til dine behov.

Den traditionelle sag

Lad os sige, at du har en hjemmeside. Du vil dele dine kontaktoplysninger, og du vil ikke kun dele dine sociale links. E-mailadressen skal være der. Nemt, ikke? Du skriver noget som dette:

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

Og så styler du den efter din smag.

Tja, selvom denne løsning virker, har den et problem. Det gør din e-mail-adresse tilgængelig for bogstaveligt talt alle, inklusive webstedscrawlere og alle mulige spambots. Det betyder, at din indbakke kan blive oversvømmet med tonsvis af uønsket affald som kampagnetilbud eller endda en phishing-kampagne.

Vi leder efter et kompromis. Vi ønsker at gøre det svært for bots at få vores e-mailadresser, men så enkelt som muligt for normale brugere.

Løsningen er sløring.

formørkelse er øvelsen i at gøre noget svært at forstå. Denne strategi bruges sammen med kildekoden af ​​flere årsager. En af dem er at skjule formålet med kildekoden for at gøre manipulation eller reverse-engineering vanskeligere. Vi vil først se på forskellige løsninger, der alle er baseret på ideen om sløring.

HTML-tilgangen

Vi kan tænke på bots som software, der surfer på nettet og gennemsøger websider. Når en bot har fået et HTML-dokument, fortolker den indholdet i det og udtrækker information. Denne ekstraktionsproces kaldes webskrabning. Hvis en bot leder efter et mønster, der matcher e-mail-formatet, kan vi forsøge at skjule det ved at bruge et andet format. For eksempel kunne vi bruge HTML-kommentarer:

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

Det ser rodet ud, men brugeren vil se e-mailadressen sådan her:

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

Fordele:

• Let at oprette.
• Det virker med JavaScript deaktiveret.
• Den kan læses af hjælpemidler.

Ulemper:

• Spambots kan springe over kendte sekvenser som kommentarer.
• Det virker ikke med en mailto: .

HTML & CSS tilgangen

Hvad hvis vi bruger stylingkraften i CSS til at fjerne noget indhold, der kun er placeret for at narre spambots? Lad os sige, at vi har det samme indhold som før, men denne gang placerer vi en span element indeni:

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

Derefter bruger vi følgende CSS-stilregel:

span.blockspam {
  display: none;
}

Den endelige bruger vil kun se dette:

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

…hvilket er det indhold, vi virkelig holder af.

Fordele:

• Det virker med JavaScript deaktiveret.
• Det er sværere for bots at få e-mailadressen.
• Den kan læses af hjælpemidler.

Med:

• Det virker ikke med en mailto: .

JavaScript-tilgangen

I dette eksempel bruger vi JavaScript til at gøre vores e-mailadresse ulæselig. Så, når siden er indlæst, gør JavaScript e-mailadressen læsbar igen. På denne måde kan vores brugere få e-mailadressen.

Den nemmeste løsning bruger Base64-kodningsalgoritmen til at afkode e-mail-adressen. Først skal vi kode e-mailadressen i Base64. Vi kan bruge nogle hjemmesider som f.eks Base64Encode.org at gøre dette. Indtast din e-mailadresse sådan her:

Klik derefter på knappen for at kode. Med disse få linjer JavaScript afkoder vi e-mailadressen og indstiller href attribut i HTML-linket:

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

Så skal vi sørge for, at e-mail-linket indeholder id="contact" i opmærkningen, sådan her:

Send me an Email

Vi bruger atob metode til at afkode en streng af Base64-kodede data. Et alternativ er at bruge en grundlæggende krypteringsalgoritme som f.eks Cæsar ciffer, som er ret ligetil at implementere i JavaScript.

Fordele:

• Det er mere kompliceret for bots at få e-mailadressen, især hvis du bruger en krypteringsalgoritme.
• Det fungerer med en mailto: .
• Den kan læses af hjælpemidler.

Med:

• JavaScript skal være aktiveret i browseren, ellers vil linket være tomt.

Den indlejrede form tilgang

Kontaktformularer er overalt. Du har helt sikkert brugt en af ​​dem mindst én gang. Hvis du vil have en måde, hvorpå folk kan kontakte dig direkte, er en af ​​de mulige løsninger at implementere en kontaktformulartjeneste på din hjemmeside.

Formspree er et eksempel på service, som giver dig alle fordelene ved en kontaktformular uden at bekymre dig om server-side kode. Wufoo er også. Faktisk, her er en flok du kan overveje til håndtering af indsendelser af kontaktformularer for dig.

Det første trin til at bruge enhver formtjeneste er at tilmelde dig og oprette en konto. Priserne varierer selvfølgelig, ligesom de funktioner, der tilbydes mellem tjenesterne. Men én ting, de fleste af dem gør, er at give dig et HTML-kodestykke til at indlejre en formular, du opretter, på ethvert websted eller en app. Her er et eksempel, jeg hentede direkte fra en formular, jeg oprettede på min Formspring-konto

   Your email:
    
  
   Your message:
    
  
  
  
  Send

I den første linje skal du tilpasse action baseret på dit slutpunkt. Denne form er ret grundlæggende, men du kan tilføje så mange felter, som du ønsker.

Læg mærke til det skjulte input-tag på linje 9. Dette input-tag hjælper dig med at filtrere indsendelser fra almindelige brugere og bots. Faktisk, hvis Formsprees back-end ser en indsendelse med det pågældende input udfyldt, vil det kassere det. En almindelig bruger ville ikke gøre det, så det må være en bot.

Fordele:

• Din e-mailadresse er sikker, da den ikke er offentlig.
• Det virker med Javascript deaktiveret.

Med:

• Afhænger af en tredjepartstjeneste (som kan være en professionel, afhængigt af dine behov)

Der er en anden ulempe ved denne løsning, men jeg har udeladt den fra listen, da den er ret subjektiv, og den afhænger af din anvendelse. Med denne løsning deler du ikke din e-mailadresse. Du giver folk en måde at kontakte dig på. Hvad hvis mennesker ønsker at e-maile dig? Hvad hvis folk leder efter din e-mailadresse, og de ikke vil have en kontaktformular? En kontaktformular kan være en hårdhændet løsning i den slags situationer.

Konklusion

Vi nåede slutningen! I denne tutorial talte vi om forskellige løsninger på problemet med online-deling af e-mail. Vi gik gennem forskellige ideer, der involverede HTML-kode, JavaScript og endda nogle onlinetjenester som Formspree til at bygge kontaktformularer. I slutningen af ​​denne tutorial skal du være opmærksom på alle fordele og ulemper ved de viste strategier. Nu er det op til dig at finde den bedst egnede til din specifikke brugssag.