Hinweis: Dies ist mein privater Blog.
Für Software-Entwicklung und Refactoring siehe weigandtlabs.de.

Schutzmethoden für Email-Adressen

Vor einiger Zeit bin ich über drweb.de auf einen interessanten Artikel auf techblog.tilllate.com gestoßen. Darin wird das Ergebnis eines Versuches beschrieben, bei dem 9 verschiedene extra dafür angelegte E-Mail-Adressen auf verschiedene Weisen geschützt wurden und nach 1,5 Jahren auf die Anzahl der Spam-Mails ausgewertet wurden.
Dadurch kann man sehr schön sehen, wie effektiv welche Methode war.

Außerdem wurde im Versuchs-Artikel auf einen weiteren (etwas in die Jahre gekommenen) Artikel auf csarven.ca verlinkt, in dem die verschiedensten Schutzmethoden beschrieben sind.

In diesem Artikel möchte ich die einzelnen Methoden aufarbeiten, die Vor- und Nachteile abwägen und überlegen, welche Methoden noch in mein WordPress-Plugin wL Email Encrypter aufgenommen werden können.

1. Klartext

//Quelltext
<a href="mailto:mail@example.com">mail@example.com</a>
//Ausgabe auf dem Bildschirm:
mail@example.com

Das ist eigentlich keine Schutzmaßnahme, sondern der normale Weg, eine E-Mail-Adresse anzuzeigen und zu verlinken. Ich schreibe sie nur deshalb auf, um die Vor- und Nachteile der anderen Schutzmaßnahmen besser vergleichen zu können.

Vorteile:

  • Barrierefrei
  • Verlinkung funktioniert in jedem Browser
  • keine weiter Technologie (wie JavaScript) notwendig
  • Wird von mobilen Geräten unterstützt (wenn der Browser das E-Mail-Programm öffnen kann)

Nachteile:

  • Bots und Harvester können die E-Mail-Adresse einfach auslesen

2. Zeichen durch Lautschrift ersetzen

//Quelltext
<a href="mailto:mail AT example DOT com">mail AT example DOT com</a>
//Ausgabe auf dem Bildschirm:
mail AT example DOT com

Das ist die einfachste Weise, die E-Mail-Adresse zu schützen. Die Zeichen @ und . werden einfach durch die Lautschrift ersetzt (zB. AT und DOT). Weil Bots und Harvester leicht an die gebräuchlichsten Schreibweisen angepasst werden können, variieren die Schreibweisen. (zB. [AT], *ÄT* usw.)
Außerdem muss hier an die Vernunft des Users appelliert werden, der die Laufschrift erkennen und wieder mit den richtigen Zeichen ersetzen muss, bevor eine Mail geschrieben werden kann.

Vorteile:

  • Verlinkung funktioniert in jedem Browser
  • keine weiter Technologie (wie JavaScript) notwendig
  • Wird von mobilen Geräten unterstützt (wenn der Browser das E-Mail-Programm öffnen kann)
  • Bots und Harvester können die E-Mail-Adresse nicht mehr einfach auslesen. (Können aber an die gebräuchlichste Lautschrift angepasst werden)

Nachteile:

  • User muss die Lautschrift erst wieder mit Zeichen ersetzen
  • Bots und Harvester können leicht angepasst werden

3. Unicode-Zeichen

//Quelltext
<a href="mailto:mail@example.com">mail@example.com</a>
//Ausgabe auf dem Bildschirm:
mail@example.com

Auch eine sehr einfache Weise, die E-Mail-Adresse zu schützen. Die Zeichen @ und . werden durch die Unicode-Zeichen &#64; und &#46; ersetzt.
Leider können Bots und Harvester leicht angepasst werden.
Doch mit dieser Methode funktioniert auch die Verlinkung mit dem E-Mail-Programm und der User muss nichts mehr per Hand verändern.

Vorteile:

  • Verlinkung funktioniert in jedem Browser
  • keine weiter Technologie (wie JavaScript) notwendig
  • Wird von mobilen Geräten unterstützt (wenn der Browser das E-Mail-Programm öffnen kann)

Nachteile:

  • Bots und Harvester können an die Unicode-Zeichen angepasst werden

4. Hexadezimal-Zeichen

//Quelltext
<a href="mailto:%6d%61%69%6c%40%65%78%61%6d%70%6c%65%2e%63%6f%6d">Meine E-Mail-Adresse</a>
//Ausgabe auf dem Bildschirm:
Meine E-Mail-Adresse

Bei diese Schutzmethode wird die gesamte E-Mail-Adresse die hexadezimalen Zeichen geschrieben.
Doch mit dieser Methode funktioniert auch die Verlinkung mit dem E-Mail-Programm und der User muss nichts mehr per Hand verändern.
Jedoch können immer mehr Bots und Harvester die hexadezimale Schreibweise erkennen.

Vorteile:

  • Verlinkung funktioniert in jedem Browser
  • keine weiter Technologie (wie JavaScript) notwendig
  • Wird von mobilen Geräten unterstützt (wenn der Browser das E-Mail-Programm öffnen kann)

Nachteile:

  • Bots und Harvester können immer öfter Hexadezimal-Zeichen erkennen

5. HTML-Kommentare

//Quelltext
mail<!-- @. -->@<!-- @. -->example<!-- @. -->.<!-- @. -->com
//Ausgabe auf dem Bildschirm:
mail@example.com

Hierbei werden HTML-Kommentare so in die E-Mail-Adresse eingebaut, dass Bots und Harvester die E-Mail-Adresse nicht mehr erkennen können.
Leider lassen sich anscheinend nicht viele Bots und Harvester davon stören und erkennen die Adresse trotzdem.
Außerdem funktioniert die Verlinkung auch nur, wenn die User die Kommentare später manuell entfernen. Wegen dem erhöhten Aufwand würde man hier lieber die Zeichen durch Lautschrift ersetzen.

Vorteile:

  • keine weiter Technologie (wie JavaScript) notwendig

Nachteile:

  • Verlinkung funktioniert nicht mehr
  • Manche Bots und Harvester lassen sich davon nicht stören

6. Fake-Email

// Quelltext
mail@ENTFERNEMICHexample.com
//Ausgabe auf dem Bildschirm:
mail@ENTFERNEMICHexample.com

Bei dieser Methode wird an beliebiger Stelle in der E-Mail-Adresse ein Zusatz eingebaut, den ein Mensch auf Anhieb erkennen und entfernen sollte.
Diese Methode scheint gut zu funktionieren, da ein Bot oder Harvester eine valide (aber gefälschte) E-Mail-Adresse vorfindet und nicht weiter suchen wird.
Sie setzt aber auch voraus, dass der Zusatztext so geschrieben ist, dass ein Mensch erkennen kann, dass die Adresse bearbeitet werden muss.

Vorteile:

  • keine weiter Technologie (wie JavaScript) notwendig
  • Bots und Harvester lassen sich durch die falsche Adresse täuschen
  • Verlinkung zum E-Mail-Programm funktioniert

Nachteile:

  • User muss den Zusatz erkennen und per Hand entfernen

7. HTTP Redirect

// Quelltext
<a href="http://www.csarven.ca/scripts/articles/email_foo.php">Meine Email-Adresse</a>
// Quellcode der email_foo.php
<?php
header ("Location: mailto:mail@example.com");
exit();
?>
//Ausgabe auf dem Bildschirm:
Meine Email-Adresse

Benötigt wird hier ein server-seitiges Script, dass „mailto:mail@example.com“ als HTTP Redirect zurück gibt. Browser erkennen den Redirect und öffnen das E-Mail-Programm, aber Bot und Harvester hoffentlich nicht.
Allerdings muss hier ein erhöhter Aufwand aufgebracht werden. Soll auf der Webseite mehr als 1 Adresse angegeben werden, so muss das Script so angepasst werden, dass damit (gesteuert zB. durch GET-Angaben) jede E-Mail-Adresse erzeugt werden kann.

Vorteile:

  • Bots und Harvester erkennen hoffentlich kein HTTP Redirect
  • Verlinkung zum E-Mail-Programm funktioniert
  • keine weiter Technologie (wie JavaScript) notwendig

Nachteile:

  • Aufwand durch Programmierung eines speziellen Scripts

8. JavaScript

// Quelltext
<script type="text/javascript">
<!--
	var string1 = "mail";
	var string2 = "@";
	var string3 = "example.com";
	var string4 = string1 + string2 + string3;
	document.write("<a href=" + "mail" + "to:" + string1 + string2 + string3 + ">" + string4 + "</a>");
//-->
</script>
//Ausgabe auf dem Bildschirm:

Es gibt viele Wege, die E-Mail-Adresse mit Javascript zu schützen, wobei die Idee immer die gleiche bleibt: Die E-Mail-Adresse wird in mehrere Teile aufgeteilt und dann beim Client per JavaScipt wieder zusammengesetzt. Jedoch wird bei diesem Verfahren vorraus gesetzt, dass Javascript vorhanden und/oder aktiviert ist. Und leider ist dieser Weg auch nicht barrierefrei.
Außerdem ist der oben genannte Code nicht mehr sicher, da sich bereits viele Bots daran angepasst haben. Eine gute Idee wäre zB. die Verschlüsselung der E-Mail-Adresse. Es ist also ein wenig Kreativität gefragt.

Vorteile:

  • Bots und Harvester erkennen die Adresse im Javascript nicht
  • Verlinkung zum E-Mail-Programm funktioniert

Nachteile:

  • nicht barrierefrei
  • JavaScript wird benötigt

9. Bilder

// Quelltext
<img src="http://plugins.wlabs.de/files/email.png"/>
//Ausgabe auf dem Bildschirm:

Eine ähnliche Möglichkeit wäre auch, nur das @-Zeichen entsprechend durch ein Bild zu ersetzen. Das sieht dann so aus:

// Quelltext
mail<img src="http://plugins.wlabs.de/files/at.png"/>example.com
//Ausgabe auf dem Bildschirm:
mailexample.com

Bei dieser Methode wird die Emailadresse (oder nur das @-Zeichen) in einem Bild abgespeichert. Man könnte sich auch einen Generator in PHP programmieren, der verschiedene E-Mail-Adressen generieren kann. So einen Generator kann man zB. hier finden
Diese Methode klappt bisher ganz gut, da sich Bots und Harvester (noch) nicht die Mühe machen, die Bilder nach Texten abzusuchen.
Leider ist diese Methode auch nicht barrierefrei, da eine Software die E-Mail-Adresse nicht mehr vorlesen kann.

Vorteile:

  • Bots und Harvester erkennen Text in Bildern (noch) nicht
  • keine weiter Technologie (wie JavaScript) notwendig

Nachteile:

  • nicht barrierefrei
  • Verlinkung zum E-Mail-Programm funktioniert nicht

10. CSS: Pseudo-Element :after

// Quelltext
//\40 ist das Unicode-Zeichen für @
<style type="text/css">
.email-protect:after{ content: "mail\40 example.com"; }
</style>
<span class="email-protect">Meine E-Mail-Adresse: </span>
//Ausgabe auf dem Bildschirm:

Diese Methode benutzt das :after Element von CSS. Sie ist genaus so sicher wie die Methoden 3 und 4 mit der Zeichendarstellung in Unicode oder Hex-Zeichen. Denn sobald ein Bot diese Zeichen richtig interpretiert, ist der Schutz dahin. Die Style-Angaben sollten deshalb in einer seperaten CSS-Datei definiert werden, in der Hoffnung, dass Bots diese nicht durchsuchen.
Diese Methode ist eigentlich relativ gut, es sei denn, der Browser unterstützt das :after-Element nicht, was aber heutzutage aber seltener der Fall sein sollte.
Leider ist es bei mehreren E-Mail-Adressen etwas aufwendiger, ein Script zu programmieren, dass eindeutige Klassennamen und die dazugehörige CSS-Datei generiert. Und eine Verlinkung zum Email-Programm ist damit leider auch nicht möglich.

Vorteile:

  • keine weiter Technologie (wie JavaScript) notwendig, CSS vorausgesetzt

Nachteile:

  • Manche Bots und Harvester interpretieren die Unicode-Zeichen bereits
  • Verlinkung zum E-Mail-Programm funktioniert nicht

11. CSS: Bidirektionalität

// Quelltext
<style type="text/css">.change-direction{ unicode-bidi: bidi-override; direction: rtl; }</style>
<span class="change-direction">moc.elpmaxe@liam</span>
//Ausgabe auf dem Bildschirm:
moc.elpmaxe@liam

Diese Methode benutzt die Bidirektionalität von CSS. Dabei wird die E-Mail-Adresse im Klartext spiegelverkehrt geschrieben und von CSS wieder richtigherum dargestellt. Sie lässt sich sehr einfach mit einer einzigen Klasse integrieren. Die spiegelverkehrte E-Mail-Adresse muss dann nur noch in den <span>-Tag gepackt werden.
Diese Methode scheint sehr sicher zu sein. Beim Versuch auf techblog.tilllate.com haben Bots die E-Mail-Adresse nicht erkannt. Auch wird kein JavaScript benötigt.
Leider kann man die Verlinkung zum E-Mail-Programm so nicht schützen, sodass dabei auf eine andere Methode zurückgegriffen werden muss. Auch ist diese Methode nicht barrierefrei.

Vorteile:

  • keine weiter Technologie (wie JavaScript) notwendig, CSS vorausgesetzt
  • Bots und Harvester erkennen die E-Mail-Adresse nicht

Nachteile:

  • nicht barrierefrei
  • Verlinkung zum E-Mail-Programm funktioniert nicht

12. CSS: display:none

// Quelltext
<style type="text/css">.hide-this{ display: none; }</style>
mail@exa<span class="hide-this">NULL</span>mple.com
//Ausgabe auf dem Bildschirm:
mail@exaNULLmple.com

Diese Methode benutzt das element display:none von CSS. Dabei wird in die E-Mail-Adresse ein Text (hier: NULL) eingebaut, der dann mit CSS nicht angezeit wird. Auch das lässt sich sehr einfach mit einer einzigen Klasse realisieren.
Diese Methode scheint sehr sicher zu sein. Beim Versuch auf techblog.tilllate.com haben Bots die E-Mail-Adresse nicht erkannt. Auch wird kein JavaScript benötigt.
Leider kann man auch hier die Verlinkung zum E-Mail-Programm so nicht schützen, sodass auch hier auf eine andere Methode zurückgegriffen werden muss. Auch ist diese Methode leider nicht barrierefrei.

Vorteile:

  • keine weiter Technologie (wie JavaScript) notwendig, CSS vorausgesetzt
  • Bots und Harvester erkennen die E-Mail-Adresse nicht bzw. nicht richtig

Nachteile:

  • nicht barrierefrei
  • Verlinkung zum E-Mail-Programm funktioniert nicht

Fazit

Der Schutz der E-Mail-Adresse ist immer ein Spagat zwischen Usability, Schutzwirksamkeit und Barrierefreiheit. Welche (oder ob man überhaupt eine Methode) man letzen Endes einsetzt, hängt stark von der angepeilten Zielgruppe und vom Aufwand ab.

Es gibt noch zahlreiche weitere Methoden, die ich hier jedoch nicht aufgeführt habe. So kann man zB. AJAX einsetzen. Dabei wird die E-Mail-Adresse nach dem Laden der Seite vom Server abgefragt und eingesetzt. Trotz des erhöhten Einsatzes erreicht man aber keinen besseren Schutz wie bei einer direkten Verschlüsselung per JavaScript.

Eine weitere Möglichkeit wäre das Einbinden von Flash, wie es auch hier genauer beschrieben ist.

Auch sollte man externe Dienste zu Verschleierung erwähnen, wie zB. Mail Protection von reCAPTCHA.

Und zu guter Letzt bleibt die Möglichkeit, ein Formular anzuzeigen, mit dem ein Besucher direkt eine Email im Browser verfassen kann. Dadurch verlagert sich das Problem auf einen SPAM-Schutz für das Formular. Aber das ist schon wieder eine andere Geschichte. 🙂


Beitrag veröffentlicht

in

von

Schlagwörter: