Einfacher Schutz vor E-Mail-Spam mit CSS

Wer eine Webseite oder einen Blog betreibt, weiß sicherlich, dass er in den meisten Fällen ein Impressum führen sollte. Das Gesetz schreibt genau vor, was darin alles enthalten sein muss. Fehlt etwas, kann man sehr schnell Gefahr laufen, eine Abmahnung zu kassieren. Impressumspflichtig sind neben dem Namen, der Anschrift, einer Telefonnummer unter anderem auch eine gültige E-Mail-Adresse. Es genügt keinesfalls, auf ein Kontaktformular zu verweisen. Die elektronische Postanschrift muss im Klartext dastehen. Dabei hat man gewisse Freiheiten, wie beispielsweise das @-Zeichen ausschreiben oder Ähnliches. Es gilt: Ein Mensch muss die Mail-Adresse jederzeit und unmittelbar erkennen können. Wo liegt da jetzt das Problem? Tja, im Internet tummeln sich viele nette Menschen, aber genauso dubiose Gestallten.

Hackers (Quelle: Surian Soosay, Liz. CC BY 2.0)
Hackers (Quelle: Surian Soosay, Liz. CC BY 2.0)

Für sie sind solche Angaben ein gefundenes Fressen, um euch mit Spam zu überhäufen oder eure Mail-Adresse für ihre zwielichtigen Machenschaften zu verwenden. Deshalb ist es oft keine gute Idee, seine E-Mail-Adresse zu veröffentlichen. Ich möchte euch eine sehr simple Lösung mit CSS zeigen, um unnötigen Spam zu vermindern. Eine hundertprozentige Sicherheit gibt es hierbei nicht. Aber jede zusätzliche Hürde schafft einen besseren Schutz. Da Angreifer möglicherweise das Interesse verlieren oder der Bot die Adresse nicht erkennt.

So schützt du deine Mail-Adresse besser vor Spam

.at-sign:after{content:"\0040"} /* CSS-Wert für @ */
.dot-sign:after{content:"\002E"} /* CSS-Wert für . */
eat<span class="at-sign"></span>little-babys-ice<span class="dot-sign"></span>cream

Ausgabe im Vergleich

Normal: eat@little-babys-ice.cream
mit content after: eatlittle-babys-icecream

Wie ihr seht, sieht die E-Mail-Adresse auf den ersten Blick ganz normal aus. Markiert man allerdings die Adresse, fällt einem auf, dass das @-Zeichen und der Punkt nicht markiert werden. Beim Kopieren entfallen die Sonderzeichen, da die Darstellung über das CSS-Attribut Content und das Pseudoelement After erfolgt. Diese Methode bietet gegenüber anderen Ansätzen, wie Icon-Fonts, Bild, [at] etc., entscheidende Vorteile. Das Schriftbild bleibt erhalten, da die festgelegte Schriftart verwendet wird. Es ist für Bots und Menschen schwieriger den Inhalt komplett zu kopieren. Im Gegensatz zu einer eingebundenen Grafik kann jeder Besucher die E-Mail-Adresse problemlos sehen. Auf eine Mailto-Verlinkung sollte man verzichten. Denn sonst ist der Aufwand für die Katz. Aus Usability-Sicht ist es vertretbar, dass ein Seitenbesucher in einem solchen Fall auch zwei Zeichen nachträglich einfügen kann.

Um dem Ganzen noch ein Krönchen aufzusetzen, könnte zusätzlich ein Verbot über die robots.txt für alle Crawler auf die Impressum-Seite erfolgen. Zwar halten sich nicht alle Bots an diese Vorgabe, aber es hilft trotzdem. In meinen Augen ist ein brauchbarer Spamschutz an dieser Stelle sehr wichtig. Leider schreibt §5 TMG vor, eine Mail-Adresse unverschleiert darzustellen. Aus Sicherheitsgründen sollte die Gesetzesgrundlage geändert werden. Solange sich daran nichts ändert, bleiben nur solche Optionen offen, um der täglichen Spamflut entgegenzuwirken. Ich hoffe dieser kleine Trick hilft dem einen oder anderen von euch weiter.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.