Der permanente Zuwachs von Spam-Mails hat Webmaster dazu gebracht, die E-Mail Adressen auf Webseiten zu verstümmeln. Wo früher ein schöner [code lang=“javascript“]<a href="mailto:[EMAIL]"…>[/code] verwendet wurde, liest man heute Sachen wie service {ät} unseredomain {punkt} com – das schützt vielleicht vor Spam Bots (wobei gute Systeme auch eine solche Syntax knacken können), ist aber Usability-technisch ein Graus – sowohl für Heavy-User, die die E-Mail Adresse rauskopieren und im Mail Programm korrigieren müsen, also auch für die DAUs – die gar nicht erst kapieren, dass es sich dabei um eine E-Mail Adresse handeln soll.

Kleine Anekdote am Rande – die Fakultät der BWL der Uni Marburg hatte auf ihren Seiten die oben beschriebene „Anti-Spam-Syntax“ verwendet, gleichzeitig aber einen Hyperlink mit mailto: verwendet (wo natürlich die E-Mail als Klartext drinstand) – der Nutzen der Anti-Spam-Syntax wurde also ad absurdum geführt, weil die Bots natürlich im Source-Code der Page schauen, wo sie dann die Mail im Klartext fanden. Ich habe sie damals auf diese Problematik hingewiesen und gerade habe ich noch mal geschaut, was daraus geworden ist: Personal der Uni Marburg (BWL) – das ist dann Usability-technisch der Supergau.

Wie macht man es richtig?

Im wesentlichen kenne ich fünf Varianten die E-Mail Adressen auf Webseiten halbwegs vor Spambots zu schützen, wovon allerdings nur 2 halbwegs sicher sind. Hier eine Übersicht inkl. meiner Einschätzung zu Sicherheit und Usability nach Schulnoten.

Unterm Strich ist also die Lösung via Javascript die beste. Also folgt nun eine Anleitung wie man diese umsetzt.

Mit Javascript E-Mail Adressen verschlüsseln

Das Prinzip ist sehr simpel: Man hat eine Javascript-Funktion, die an den gewünschten Stellen die E-Mail Adresse einfügt. Dabei wird die Adresse natürlich nicht als Klartext übergeben, sondern nur die Bestandteile. Das ganze sieht dann so aus:
[code type=“javascript“]
<script type="text/javascript" charset="utf-8">
//<![CDATA[
function email(ending, domain, name) {
document.writeln(‚<a href="mailto:’+name+’@’+domain+‘.’+ending+’">’+name+’@’+domain+‘.’+ending+'</a>‘);
}
//]]>
</script>
[/code]
Diesen Code packt man dann am Besten in eine separate Javascript Datei, die man dann in alle Unterseiten lädt.

An der Stelle, an der man eine E-Mail ausgeben möchte, ruft man dann einfach folgenden Code auf:
[code type=“javascript“]
<script type="text/javascript" charset="utf-8">
//<![CDATA[
email("com", "hjacob", "kontakt");
//]]>
</script>
[/code]
Und schon erscheint die E-Mail Adresse inklusive passenden mailto-Hyperlink. Clean, secure und easy.

PS: Am Besten die Javascript-Funktion noch etwas verändern – umso unterschiedlicher, desto sicherer. So kann man ja zum Beispiel den Domain-Namen nicht als Variable verwenden, sondern hardcoded in die Funktion schreiben (macht natürlich nur Sinn, wenn man wirklich nur E-Mail Adressen von dieser einen Domain anzeigen will).