WordPress-Plugin: CSS Email Obfuscator

Wer kennt das nicht: Das Impressum oder die Kontaktseite erfordern die Angabe eurer E-Mail-Adresse, doch ihr drückt euch davor sie im korrekten Format oder überhaupt niederzuschreiben. Zu groß ist die Gefahr künftig mit Spam überhäuft zu werden. Viele behelfen sich deswegen obskurer E-Mail-Formate, bei dem etwa das @-Zeichen durch „at“ oder der Punkt durch „dot“ ausgetauscht wird. Andere setzen stattdessen lieber auf JavaScript um ihre E-Mail-Adresse zu verschleiern. Doch es geht auch eleganter: Mit dem WordPress-Plugin CSS Email Obfuscator.

Warum „at“ und „dot“ nicht helfen

E-Mail-Adressen werden von Bots eingesammelt, die sehr ähnlich funktionieren wie z.B. der Google Bot. Dabei besucht ein solcher Bot diverse Webseiten und hält nach allem Ausschau, was wie eine E-Mail-Adresse aussieht. Da E-Mail-Adressen immer einem bestimmten Format folgen, wird mit Hilfe von regulären Ausdrücken nach ihnen gesucht. Vereinfacht läßt sich sagen: Der Bot sucht nach allem was in der Mitte ein @ und am Ende einen Punkt, gefolgt von einer begrenzten Anzahl von Zeichen, hat.

Nun sind auch die Entwickler solcher Bots nicht auf den Kopf gefallen und wissen natürlich, dass viele ihre E-Mail-Adresse eben mit „at“ statt @ und „dot“ statt Punkt angeben. Also wird der reguläre Ausdruck kurzerhand um diese beiden Möglichkeiten erweitert. Ergebnis: Der Bot findet eure „verschleierte“ E-Mail-Adresse dennoch.

JavaScript zu Hilfe?

An dieser Stelle gibt es von mir ein ganz klares Nein. Wer JavaScript dafür missbraucht seine E-Mail-Adresse zu verschleiern, der isst auch kleiner Kinder. Zum einen ist es einfach nicht sonderlich elegant und zum anderen können Screenreader kein JavaScript interpretieren. Menschen mit Handicap bleiben also bei solch einer Lösung außen vor.

Auftritt: CSS (und PHP)

Bei der von mir bereitgestellten Lösung verwende ich PHP um die E-Mail-Adresse bereits serverseitig zu verschleiern. Dabei wird die Zeichenkette per strrev() umgekehrt und anschließend im Browser mit Hilfe der CSS-Anweisung direction wieder korrekt herum angezeigt. Ganz ohne JavaScript!

Verwendung des WordPress-Plugin

Das Plugin kann ab sofort über das offizielle Plugin-Repository heruntergeladen werden. Nach erfolgter Installation aktiviert ihr es im Backend unter PluginsInstallierte Plugins. Danach könnt ihr, mit Hilfe einer der folgenden drei Shortcodes, E-Mail-Adressen in Beiträgen, Seiten und Custom Post Types vor Bots verschleiern:

Nur E-Mail-Adresse

[css-email-obfuscator]you@example.com[/css-email-obfuscator]

E-Mail-Adresse mit Link (klickbar)

E-Mail-Adresse mit Link und eigenem Text

[css-email-obfuscator mailto="yes" email="you@example.com"]Contact me[/css-email-obfuscator]