Spring naar de content

Op deze pagina:

Hoe e-mailadressen onzichtbaar te maken voor e-mail-harvesters, zonder de normale bezoeker ermee lastig te vallen.

Pagina-navigatie:

Gereedschappen


E-mailadressen op website: het probleem

Ondernemingen en personen met een eigen website zullen vaak een e-mailadres op hun site willen zetten, zodat bezoekers eenvoudig contact kunnen opnemen. Het meest logische gaat dat met <a ANTISPAM-href="voorbeeld@moc.elpmaxe">mail mij!</a>. Bezoekers kunnen dan simpelweg op het linkje klikken en hun mailclient wordt automatisch geopend met het juiste e-mailadres ingevuld. Simpel, doeltreffend, elegant.

Helaas is het ook simpel, doeltreffend en elegent voor software van schorem dat uit is op de e-mailadressen, met als doel commercieel gewin. Hetzij door miljoenen adressen te verkopen, of door de gevonden adressen te bestoken met ongewenste en irritantreclame. Oftewel: SPAM.

Deze hufters hebben speciale software (e-mail harvesters, e-mail spiders) welke automatisch het internet afstruint op zoek naar e-mailadressen. Onze <a>-linkjes die zo handig zijn voor bezoekers en klanten zijn ook heel handig voor deze harvesters.

Het doel

We willen het voor bezoekers (en potentiele klanten) zo eenvoudig mogelijk maken om een e-mailtje te sturen en/of ons e-mailadres te vinden. En we willen precies dat voor e-mail harvesters onmogelijk maken.

Dat klinkt behoorlijk tegenstrijdig...

Het probleem: de technische kant.

Ik ben absoluut geen kenner van dergelijke e-mail harvesters, maar ik ga ervan uit dat ze bijzonder gerafinieerd zijn. Webbrowsers zijn in perfect staat om websites helemaal te ontrafelen. Alle zichtbare tekst en alle linkjes op een pagina zijn in de DOM van de webbrowser bekend. Dus ook alle e-mailadressen. Met Javascript is het dan ook zeer eenvoudig om alle e-mailadressen op te sporen; simpelweg de zichtbare tekst met wat reguliere expressies doorzoeken op e-mailadressen en met een getElementByTagName even alle anchors opvragen om vervolgens daar ook even de href-attributen te doorlopen.

Internet Explorer en Mozilla/Firefox bieden voor lokaal gebruik extra features in Javascript, waarmee het allemaal nog makkelijker en beter gaat.

Dus een e-mail harvester geprogrammeed in Javascript, draaiende onder Internet Explorer of Firefox/Mozilla lijkt me dan nog redelijk reëel, maar biedt tevens (hopelijk) en worst-case-senario waartegen we onze e-mailadressen moeten beschermen.

Een oplossing

Bij een normale e-maillink komt het e-mailadres op 1 of 2 plaatsen voor:

  1. sowieso in het href-attribuut van een anchor-tag.
  2. vaak ook de tekst-node.

Dus op beide plaatsen moeten we de adressen onherkenbaar maken. Hierbij dienen we helaas wel rekening te houden met enkele verouderde browsers, zoals Internet Explorer. Dit maakt enkele CSS2-oplossingen onmogelijk.

Concept oplossingen

  1. We coderen van te voren het e-mailadres in het href-attribuut. E-mail harvesters zullen waarschijnlijk niet met een muis werken, dus zorgen we ervoor dat het href-attribuut wordt gedecodeerd pas op het moment dat de bezoeker met zijn muis over de anchor-tag beweegt.
  2. We zorgen ervoor dat de tekst-node dingen wegvallen of juist extra troep wordt toegevoegd, maar welke middels CSS worden gecompenseerd.

Uitwerkingen

Het href-attribuut

Coderen gaat eenvoudig met ROT13. Als je deze "encryptie" 2x loslaat op tekst, heb je weer de originele tekst. Zorg ervoor dat de e-mailadressen die je in de HTML code zet standaard dus al 1x door de ROT13-encodering zijn gehaald. M.a.w., we zetten i.p.v.
<a ANTISPAM-href="mailto:voorbeeld@moc.elpmaxe">
dit in de HTML-code:
<a ANTISPAM-href="znvygb:ibbeorryq@zbp.rycznkr">
Voor o.a. PHP is er een standaard PHP-functie voor ROT13 encoding. Zet je een e-mailadres vast in een template of pagina, dan kun je van deze handige online encoder/decoder ↑ gebruik maken. Vergeet het "mailto:" gedeelte niet!

Pas als de bezoeker er met zijn muis overheen gaat, gaan we het href-attribuut decoderen door het simpelweg nog eens door de ROT13 versleuteling te halen. Voor dat laatste heb ik even een "ontRot"-functie gemaakt, welke dan bij onmouseover wordt aangeroepen. De volledige anchor-tag is nu als volgt:
<a ANTISPAM-href="znvygb:ibbeorryq@zbp.rycznkr" onmouseover="ontRot(this);">...</a>
Het bijbehoorde ROT13 scriptje:
<script type="text/javascript">
//<![CDATA[
function rot13(input) {
var coding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMabcdefghijklmnopqrstuvwxyzabcdefghijklm';

for (var text = '',i=0;i<input.length;i++) {
character = input.charAt(i);
position = coding.indexOf(character);
if (position > -1) {
character = coding.charAt(position + 13);
}
text += character;
}

return text;
}

function ontRot(linkje) {
if (linkje.href.indexOf('mailto:')!=0) {
linkje.href=rot13(linkje.href);
}
}
//]]>
</script>
Dit script zet je eenvoudigweg in de <head>, of je include het in je HTML pagina.

De tekst-node

De tekst-node moet ook zonder muisacties zichtbaar zijn, dus de onmouseover-truuk werkt hier niet. Je zou het onload kunnen doen, maar dat geeft weer een springerig karakter van de pagina, en wellicht dat harvesters ook een "onload" uitvoeren. Met CSS valt echter ook het één en ander te regelen. Daarvoor gaan we de tekst-node splitsen. ANTISPAM-voorbeeld@moc.elpmaxe kunnen we splitsen in ANTISPAM-<span>voorbeeld</span><span>@moc.elpmaxe</span> maar het wordt identiek gerenderd. Nu kunnen we ook extra tekst toevoegen, en deze tekst met CSS weer verbergen.
voorbeeld@<span style="display: none">ONZIN</span>example.com
We zien gewoon ANTISPAM-"voorbeeld@moc.elpmaxe" op het scherm, maar in de DOM staat (achter elkaar) ANTISPAM-"voorbeeld@moc.elpmaxeNIZNO"!

Nou schuilt er helaas nog een gevaar: zou een harvester alle gerenderde tekst middels copy/paste van een webpagina kunnen achterhalen, dan heeft hij alsnog keurige e-mailadressen zonder "ONZIN". Het is vergezocht, maar we willen het liever toch voorkomen. We doen dit met BiDi support. Normaal gesproken is dit speciaal voor schriften die van rechts naar links worden geschreven, maar we kunnen het prima misbruiken:
<span style="unicode-bidi: bidi-override; direction:rtl">dleebroov</span>@<span 
style="display: none">ONZIN</span>example.com
Merk op dat we voorbeeld achterstevoren hebben geschreven. Het staat dus ook nog eens achterstevoren in de DOM! De eerste truuk, met "display: none" is nu daardoor niet meer echt nodig, maar kwaad kan het zeker niet. Het resultaat: dleebroov@ONZINexample.com. Copy/paste dit maar eens!
Het nadeel van deze truuk is ook precies dat: normale bezoekers kunnen het e-mailadres ook niet meer copy/pasten.

Het totaalplaatje

De complete anchor-tag met e-mailadresbescherming luidt nu dus als volgt:
<a ANTISPAM-href="znvygb:ibbeorryq@zbp.rycznkr" onmouseover="ontRot(this);">
<span style="unicode-bidi: bidi-override; direction:rtl">dleebroov</span>@<span
style="display: none">ONZIN</span>example.com
</a>
Uiteraard werkt dit enkel i.c.m. het ROT13-script zoals hierboven is beschreven. Het resultaat hiervan: dleebroov@ONZINexample.com . Zweef met de muis eroverheen en kijk naar de status bar van de browser. En klik er maar eens op! Als alles goed is, opent je mail-client gewoon en kun je direct een  mailtje naar ANTISPAM-voorbeeld@moc.elpmaxe sturen!

Nadelen

Helaas zijn er ook nadelen: zonder Javascript kan de bezoeker niet op de link klikken. Het gevolg zal dan een foutmelding van de browser zijn. Door BiDi-truuk kan de bezoeker ook geen copy/paste meer uitvoeren. Zonder CSS blijkt er opeens allemaal onzin in de adressen te staan en staat een gedeelte van het adres ook nog eens achterstevoren!

M.a.w., deze truuk vereist eigenlijk een normale, hedendaagse webbrowser. Mobiele apparaten en browsers ingesteld voor mensen met een handicap zullen waarschijnlijk een onbruikbaar e-mailadres opleveren. 

Persoonlijk ben ik de spam echter goed zat en wil niet elke maand een ander e-mailadres gaan gebruiken en het vorige blokkeren. De beste oplossing zou zijn als spam uitgeroeid zou worden. Maar dat duurt nog wel even :(
Site-informatie