Email-Adressen per CSS vor Spam schützen

Wer seine E-Mail-Adresse öffentlich ins Internet setzt, muss nicht lange auf ersten Werbemüll im Postfach warten. Manchmal ist man jedoch gezwungen, es trotzdem zu tun.

Ein simples, aber recht effektives Mittel ist es dann, die Adresse zu verfremden: meinname{bei}andwil{punkt}de dürfte bereits von den meisten Adress-Crawlern nicht mehr als Email-Adresse erkannt werden.

Weil’s doof aussieht, kann man {bei} und {punkt} per CSS durch ihre normalen Zeichen ersetzen. Dies wird dann nur im Browser gerendert; Bots kriegen lediglich die verfremdete Adresse zu Gesicht.

Hier der HTML-Schnipsel:

<span class="email">meinname<span class="at">{bei}</span><span class="domain">andwil</span><span class="dot">{punkt}</span>de</span>

Sieht etwas wuchtig aus, ist aber keine große Sache. Hinzu kommt dann CSS:

.email .at, .email .dot {
  display: none}

.email .domain:before {
  content: "@"}

.email .domain:after {
  content: "."}

Damit werden {bei} und {punkt} ausgeblendet; vor und hinter den Domain-Abschnitt (hier: „andwil“) werden @ und Punkt gesetzt.

Zur Verdeutlichung habe ich mal eine kleine Demo-Seite gebaut. Dort dürfte man erkennen, wie simpel das Ganze ist.

Kleines Problem: Der InternetExplorer unterstützt erst seit Version 8 die Pseudo-Elemente :before und :after. Per Conditional Comments sorgen wir dafür, dass {bei} und {punkt} einfach normal dargestellt werden:

<!--[if lt IE 8]>
  <style type="text/css">
    .at, .dot { display: inline }
  </style>
<![endif]-->

Kryptische Email-Adressen findet man überall im Netz, deshalb dürfte der Workaround kein Problem darstellen.

Der einzige Nachteil, der mir neben der <span>-Suppe bisher aufgefallen ist: Bei Copy&Paste werden {bei} und {punkt} in die Zwischenablage übernommen. Das kann möglicherweise für Verwirrungen sorgen.

Wem diese Anleitung nicht präzise genug ist, mag vielleicht einfach einen Blick in den Quellcode der genannten Demo-Seite werfen.

Andwils Avatar

~andwil

Geek aus Kiel. Tobt sich hier vor allem über den Open-Source-Kosmos im Allgemeinen (und Linux im Speziellen) sowie Heavy Metal aus.