WEBDESIGN

E-Mail-Adresse gegen Spambots auf Webseite schützen

Wer seine E-Mail-Adresse ohne darüber nachzudenken im Internet veröffentlicht, kann sehr schnell mit Spam überhäuft werden. Oftmals muss oder möchte man seine E-Mail aber öffentlich zur Verfügung stellen. Sei es in einem Impressum, oder einfach als Kontaktmöglichkeit für andere. Dabei geht die größte Spamgefahr nicht von menschlichen Besuchern aus, sondern von Bots die gezielt nach E-Mail-Adressen suchen. In diesem Artikel stelle ich ein paar Methoden vor, mit denen man in der Praxis effektiv verhindern kann, dass Bots die E-Mail-Adresse auslesen können.

Um E-Mail-Adressen zu verschleiern gibt es auf allen Ebenen Möglichkeiten, CSS, Javascript und serverseitig per PHP. Theoretisch könnten Bots entwickelt werden, die mit allen Verschleierungen zurechtkommen, dennoch ist die Entwicklung eines solchen Bots weitaus komplexerer verglichen mit dem Standard. Wenn man seine E-Mail-Adresse gegen Standardbots sichert, hat man in der Regel keine Probleme mit Spam.

Die CSS Methode

Eine der besten Methoden eine E-Mail-Adresse zu verschleiern, ist das Rückwärtsschreiben der Adresse. CSS bietet hier einige Eigenschaften die genau dies ermöglichen. Angenommen wir möchten folgende E-Mail verschleiern:

test@example.com

Zunächst drehen wir den Text um, was folgenden String ergibt.

moc.elpmaxe@tset

Damit dieser umgedrehte E-Mail-String dem Benutzer im Browser wieder richtig angezeigt wird, packen wir das Ganze in ein span Element.

<span class="reverse">moc.elpmaxe@tset</span>

Mit der Klasse reverse

.reverse {unicode-bidi: bidi-override; direction: rtl; }

Diese Methode funktioniert effektiv gegen Bots, hat aber auch ein paar Nachteile

  • Mailto Links können auf dieses Weise nicht geschützt werden.
  • Benutzer die CSS deaktiviert haben (dieser Fall tritt zu 99.99% nicht ein), sehen nur den umgedrehten Text.
  • Bots könnten theoretisch leicht die richtige E-Mail-Adresse herausfinden – wenn sie so programmiert sind.

Eine weitere Methode per CSS ist das Hinzufügen von dummy Elementen, dies sind Elemente, welche zwar im Quelltext der Webseite auftauchen, aber nicht gerendert im Browser angezeigt werden. Dieses Ausblenden von zusätzlichen Informationen wird üblicherweise mit der CSS Eigenschaft display:none umgesetzt.

te<span style=“display:none“>dummy</span>st@examp<span style=“display:none“>dummy</span>le.com

Auf den ersten Blick kann man aus diesem Konstrukt unmöglich eine E-Mail-Adresse ableiten und vermutlich wird das auch kein Bot jemals erkennen. Dem Benutzer wird im Browser aber eine ganz normale E-Mail-Adresse dargestellt und bekommt von den zusätzlichen dummy Elementen nichts mit.

Jedoch hat auch diese Methode wieder ein paar kleine Nachteile:

  • Genau wie bei der Reverse Methode sind auch hier keine mailto Links möglich.
  • Bots die darauf programmiert sind, könnten auch diese Konstrukte identifizieren, und dies ist sogar relativ einfach möglich. (In PHP strip_tags() -> preg_match($email_pattern) -> fertig).

Javascript

E-Mail-Adresse können natürlich auch mit Javascript verschleiert werden, dies hat Vorteile aber auch Nachteile. Eine Methode ist der Einsatz des sogenannten ROT13 oder Caesar-Chiffre Algorithmus, bei diesem werden alle Buchstaben um 13 Stellen rotiert.

ROT13 table with example.svg  E Mail Adresse gegen Spambots auf Webseite schützen

Dabei muss die E-Mail-Adresse mit ROT13 encodiert im Quelltext der Seite stehen und dann on-the-fly mit Javascript wieder decodiert werden. Zum Encodieren kann man entweder die PHP Funktion str_rot13() verwenden, oder man nimmt ein Online Tool.

Um den ROT13 encodierten Text wieder mit Javascript dekodieren zu können, hilft uns folgendes Snippet:

<script type="text/javascript">
	document.write("<n uers=\"znvygb:grfg@rknzcyr.pbz\">R-Znvy</n>".replace(/[a-zA-Z]/g, 
	function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
</script>

Dieses kleine Javascript würde diesen Link erzeugen:

<a href="mailto:test@example.com">E-Mail</a>

Diese Methode erweist sich in der Praxis als sehr effektive Maßnahme. Hat jedoch den Nachteil, dass Benutzer ohne Javascript überhaupt keine E-Mail-Adresse angezeigt bekommen. Wie bei den CSS Methoden gilt auch hier, dass Bots theoretisch so programmiert werden können um dieses Konstrukt zu erkennen.

Alternativ könnte man auch nur den Teil innerhalb der E-Mail-Adresse, der vor der Domainendung steht codieren. Dies würde dem Bot seine Arbeit noch einmal enorm erschweren. Da dadurch bereits im Quelltext eine völlig valide E-Mail steht und der Bot erst prüfen müsste, ob diese Domain überhaupt existiert.

HTML

Eine uralte und sehr effektive Methode ist, die E-Mail-Adresse in keinster Weise im Quelltext zu erwähnen, sondern stattdessen ein Bild zu verwenden das die E-Mail-Adresse zeigt. Diese Methode hat aber auch einige Nachteile, so funktioniert zum Beispiel kein Copy&Paste, außerdem werden mailto Links auch nicht möglich sein.

PHP

Auch mit PHP kann eine E-Mail-Adresse so verschleiert werden, dass sie für die allermeisten Bots nichtmehr lesbar ist. Die Funktion unpack überträgt Daten eines Binärstrings in einen Array, damit ist es möglich wiederrum einen String zu erzeugen, der vom Aussehen her nichts mehr mit einer E-Mail-Adresse zu tun hat. Von einem Browser jedoch ohne weiteres als solche interpretiert werden kann.

function obfus_email($mail) 
   {
   $email = '';
   $binary_array = unpack("C*", $mail);
   foreach ($binary_array as $data) {
	$email .= sprintf("%%%X", $data);
   }
   return $email;
   }
echo '<a href="mailto:'.obfus_email('test@example.com').'"> E-Mail </a>';

Diese Funktion würde statt test@example.com folgendes ausgeben:

<a href="mailto:%74%65%73%74%40%65%78%61%6D%70%6C%65%2E%63%6F%6D"> E-Mail </a> 

Der Browser erkennt dies jedoch problemlos als E-Mail-Adresse.
Diese Methode hat fast keine der Nachteile der oberen Methoden, jedoch könnten Bots die darauf programmiert sind, ohne weiteres an die E-Mail-Adresse kommen. Denn wie bei allen Methoden gilt auch hier, die E-Mail-Adresse ist in irgendeiner Weise vorhanden.

Fazit

Die hier vorgestellten Methoden sollten gegen die allermeisten Bots helfen, eine Kombination aus verschiedenen Techniken (z.B. die Reverse Klasse erst beim Laden der Seite mit Javascript hinzufügen) kann man die Sicherheit zudem noch weiter erhöhen.



Kommentare ( 5 Kommentare )

  • Dot Antworten ↓

    Hallo

    Coole Sache.

    Bin eher PHP ungeübt und vielleicht ist die Frage auch völlig bescheuert. Trotzdem folgendes:
    Hab die PHP-Variante eingebaut. Funktioniert eigentlich alles soweit, ausser das mir vor den ganzen String noch eine 1 gehängt wird. Die Mailadresse ergibt dann: 1test@example.com anstelle test@example.

    Kann mir da jemand weiterhelfen, jemand eine Ahnung woran das liegen könnte?

    <a href="mailto:">E-Mail

    Vielen Dank schon mal...
    dot

    • m0d Antworten ↓

      Hi,

      das hört sich so an, als ob du irgendwo noch ein echo true oder sowas in deinem Code hast.

      • Dot Antworten ↓

        hey, vielen dank! Du hast mich auf die Schliche gebracht, hab da ein echo zuviel gesetzt gehabt.

        Danke Dir!

  • Huskynarr Antworten ↓

    Das Tool ist leider nicht erreichbar. :(

    • m0d Antworten ↓

      Danke für den Hinweis, der Link wurde durch einen funktionierenden ersetzt.

Schreib einen Kommentar