E-Mail Adresse auf Webseiten schützen

Die eigene Homepage ist mit wenigen Klicks schnell erstellt. Zu jeder Homepage gehört auch ein Impressum, das die Kontaktmöglichkeiten des Webseitenbetreibers enthält. Oftmals sind in diesen Informationen auch die private E-Mail Adresse enthalten. Website-Crawler können diese Informationen sehr schnell auslesen und auch die E-Mailadresse lässt sich über einen regulären Ausdruck herausfiltern. Somit bietet diese E-Mailadresse ein ideales Ziel für Spammer und Werbetreibende.

So schützen Sie Ihre E-Mail-Adresse vor Bots

Es gibt mittlerweile mehrere Möglichkeiten, wie man E-Mailadressen vor Crawlern verbergen kann. Im Folgenden werden verschiedene Techniken dazu vorgestellt:

Kontakt Form

Verzichten Sie auf die Anzeige Ihrer E-Mailadresse und bieten Sie Ihren Kunden ein Kontaktformular an. Das ausgefüllte Formular kann anschließend bequem über ein PHP-Script an Ihre E-Mail-Adresse versendet werden. Ihre E-Mail-Adresse bleibt dabei dem Sender verborgen. Die PHP-Mail-Funktion bietet sich zu diesem Zweck ideal an.

Image-Grafik

Wenn Ihre E-Mail-Adresse dem Besucher auf jeden Fall gezeigt werden soll, könnten Sie auf die Image-Grafik zurückgreifen. Die E-Mail-Adresse wird als Bilddatei in die Webseite eingebunden. Dies erschwert den Crawlern das Auslesen, allerdings ist diese Methode auch nicht mehr allzu sicher. Crawler die mit OCR (optical character recognition) arbeiten, können die Zeichen der E-Mail-Adresse aus der Grafik extrahieren. Die Einbettung der Adresse in ein Bild kann z.B. mit PHP wie folgt aussehen:

<?php
header("content-type:image/png");
$im = @ImageCreate (200, 20) or die ("Kann kein Bild erzeugen");
$background_color = ImageColorAllocate ($im, 255, 255, 255);
$text_color = ImageColorAllocate ($im, 0, 0, 0);
ImageString ($im, 10, 10, 2, "email@meinserver.com", $text_color);
ImagePNG ($im);
?>

Dieser PHP-Code erzeugt die folgende Ausgabe:

CSS Verschleierung

Die E-Mail-Adresse lässt sich auch sehr gut mit Style-Elementen verschleiern. Da Webcrawler lediglich den Inhalt der HTML-Seiten auslesen und kein CSS auf diese Seiten anwenden können, ist diese Methode sehr beliebt. CSS bietet selbst auch mehrere Möglichkeiten an dies umzusetzen:

Pseudo-Klassen

In der HTML-Datei und somit für den Webcrawler ist nur das Zeichen „@“ zu sehen. Der linke und rechte Teil davon wird über CSS gerendert. Dies geschieht über die Pseudo-Elemente ::before und ::after. Im Webbrowser wird zwar die E-Mail-Adresse korrekt angezeigt, allerdings lässt sich auch nur das „@“ – Zeichen markieren und auswählen.

<style>
    meine-email::after {
    content: attr(data-domain);
    }
    meine-email::before {
    content: attr(data-user);
    }
</style>
     
<meine-email data-user="ich" data-domain="meinserver.com">@</meine-email>

Spiegelverkehrte Darstellung

Eine weitere Möglichkeit ist die spiegelverkehrte Darstellung der E-Mail-Adresse. Durch die CSS-Anweisung wird diese dann erst in die lesbare, korrekte Form umgewandelt.

<style>
    .reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
    }
</style>
     
<span class="reverse">moc.revresniem@hci</span>

Display E-Mail-Adresse

Über CSS lassen sich auch bestimmte Bereiche aus- und einblenden. Ohne CSS sieht die E-Mail-Adresse zuerst folgendermaßen aus: ichjunk@meinserverjunk.com. Mit der folgenden CSS anweisung werden die beiden Wörter „junk“ ausgeblendet und es bleibt die korrekte E-Mail-Adresse, die im Browser angezeigt wird.

<style>
    #dummy {
    display: none;
    }
</style>

ich<span id="dummy">junk</span>@meinserver<span id="dummy">junk</span>.com

Javascript Verschleierung

Aber auch mit Javascript kann man effektiv E-Mail-Adressen oder andere Strings verschleichern.

Onclick Ersetzung

Mit dieser Javascript Methode werden Teile des Hyperlinks ersetzt. Dies geschieht wenn der Benutzer auf den Link klickt. Es muss also erst eine Benutzerinteraktion stattfinden, damit die E-Mail-Adresse korrekt dargestellt wird.

<a href = "mailto:ichATmeinserverDOTcom"
onclick = "this.href=this.href
.replace(/AT/,'&#64;')
.replace(/DOT/,'&#46;')"
>Contact Me</a>

E-Mail Puzzle

Eine weitere effektive Methode ist das Aufsplitten der E-Mail Adresse. Die Puzzlestücke des Arrays werden erst durch das Script in der richtigen Reihenfolge zusammengesetzt.

<span id="email"></span>
<script>
    var parts = ["ich", "meinserver", "com", "&#46;", "&#64;"];
    var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
    document.getElementById("email").innerHTML=email;
</script>

WordPress

WordPress bietet bereits eine integrierte Funktion an, um die E-Mail-Adresse zu verschleichern. Der Code dafür lautet wie folgt:

<?php echo antispambot("ich@meinserver.com"); ?>