11 06 2010
Nerd!

Verberg je e-mail adres voor spambots met jQuery

Tijdens het bouwen van een website zul je altijd de overweging maken of je een e-mail adres zomaar open en bloot op je pagina wilt zetten. Niemand houdt er van om dagelijks een uur bezig te zijn met het verwijderen van spam uit de inbox. Er zijn in dit geval een aantal opties om dit tegen te gaan.

Je kunt bijvoorbeeld het e-mail adres niet tonen, en het vervangen voor een formulier. Wat je ook kunt doen is het adres in de HTML verbergen om het vervolgens met een kleine truc te tonen. Dat is wat we in dit geval gaan doen. Dat doen we met behulp van onze aller beste vriend jQuery.

Er zwerven een hoop van dit soort oplossingen rond op het grote boze interweb, maar ik vond het leuk om mijn eigen te schrijven. En dit is het geworden.

Hoe werkt het.

Op je website staat het volgende:

For more info, e-mail me at:
someone$example$com

Niets nieuws onder de zon, maar dat is juist de truc. De bezoeker zal niets merken van deze techniek, tenzij ze javascript uit hebben staan. Maar in dat geval hoef ik niet eens een email van ze ;-)
Wat er namelijk gebeurd is dit; In de broncode staat niet de standaard e-mail code, waardoor spambots het adres niet meer zullen herkennen.
Normaal zouden we het volgende schrijven:

<a href=“mailto:someone@example.com”>someone@example.com</a>

Maar wij schrijven dit:

<a class=“linkhider” href=“#”>someone§example§com</a>

Als je kijkt naar de 2 grootste verschillen, valt je op dat het doel in de link er niet staat -van een “mailto:” naar “#”- en is een class -“linkhider”- aan toegevoegd. De class is de Hans Klok in het hele verhaal. Hij roept namelijk de volgende code aan.

$(document).ready(function(){
// als links niet in markup mogen ivm worst-in-blik.
$(‘a.linkhider’).each(function(){
var hiddenLink = $(this).text(),
splitLink = hiddenLink.split(‘§’),
emailLink = splitLink[0]+‘@’+splitLink[1]+‘.’+splitLink[2];
$(this).attr(‘href’, ‘mailto:’+emailLink);
$(this).text(emailLink);
});
});

Laten we de code even opbreken zodat iedereen begrijpt wat er gebeurd.

Nerd-alert paragraaf

Eerst zorgen we ervoor dat de code pas werkt als de volledige pagina geladen is.

$(document).ready(function(){
});

Daarna zeggen we dat elke link met de class “linkhider” iets moet gaan doen.

$(document).ready(function(){
$(‘a.linkhider’).each(function(){
});
});

Vervolgens doen we de mise en place voor de actie van de link middels wat variabelen.
De variabele “hiddenLink” pakt de tekst die in de link staat. Vanuit het voorbeeld is dat “someone§example§com”. De variabele “splitLink” gaat “someone§example§com” in stukken opbreken. We hebben een waarde aangegeven die fungeren als breekpunt. Ik vond “§” wel een goede waarde, deze komt namelijk zelden voor in e-mail adressen. Het resultaat is dat we een aantal stukjes tekst krijgen die we in de variabele “emailLink” weer opvragen. Binnen deze variabele gaan we alle stukjes tekst weer lijmen en voegen de benodigde tekens er aan toe zodat we weer een correct adres krijgen.

$(document).ready(function(){
$(‘a.linkhider’).each(function(){
var hiddenLink = $(this).text(),
splitLink = hiddenLink.split(‘§’),
emailLink = splitLink[0]+‘@’+splitLink[1]+‘.’+splitLink[2];
});
});

De volgende stap is dat we de linktekst -de “href”- neerzetten. Wat we zeggen is “Dit href-attribuut is ‘mailto:someone@example.com’.

$(document).ready(function(){
$(‘a.linkhider’).each(function(){
var hiddenLink = $(this).text(),
splitLink = hiddenLink.split(‘§’),
emailLink = splitLink[0]+‘@’+splitLink[1]+‘.’+splitLink[2];
$(this).attr(‘href’, ‘mailto:’+emailLink);
});
});

En als finishing touch maken we de tekst in de link ook leesbaar.

$(document).ready(function(){
$(‘a.linkhider’).each(function(){
var hiddenLink = $(this).text(),
splitLink = hiddenLink.split(‘§’),
emailLink = splitLink[0]+‘@’+splitLink[1]+‘.’+splitLink[2];
$(this).attr(‘href’, ‘mailto:’+emailLink);
$(this).text(emailLink);
});
});

Installatie

Voordat dit alles werkt zul je een tweetal bestandjes moeten aanroepen vanaf je webpagina.
Om te beginnen de jQuery bibliotheek, en het javascript bestand waarin het bovenstaande linkhider script staat.

<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript” src=“jquery.linkhider.js”></script>

Sommige onder ons zullen denken “waarom zet je het script niet gewoon in je webpagina?”. Dat doe ik niet, omdat de webpagina zelf dan zo schoon mogelijk blijft en dus overzichtelijk buy cialis generic.

Kanttekening

Dit script is gebaseerd op de situatie dat het e-mail adres zelf leesbaar is voor de bezoeker. Je kunt dus niet een afwijkende tekst in de link zetten ten opzichte van je href. Wil je dit wel, dat zul je de laatste regel van het script moeten aanpassen.

$(this).text(emailLink);

Zou dan bijvoorbeeld worden:

$(this).text(‘Stuur mij een email’);

En nu jij

Download de bestanden(.zip)

Heb je misschien opmerkingen of suggesties dan hoor ik dat graag in de commentaren!