Bij een normale e-maillink komt het e-mailadres op 1 of 2 plaatsen voor:
- sowieso in het href-attribuut van een anchor-tag.
- 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
- 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.
- 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!
Gehele website
