Tipps um eine E-Mail-Adresse auf Ihrer Webseite geschützt darzustellen

Das Bereitstellen einer E-Mail-Adresse auf einer Website ist nach dem Telemediengesetz (TMG) sowie den Vorgaben der BITV für Betreiberinnen und Betreiber Pflicht, bringt jedoch das Risiko von unerwünschten Spam-Angriffen mit sich. Doch wie kann man seine E-Mail-Adresse effektiv vor automatisierten Programmen, sogenannten Spambots, schützen, ohne gegen die DSGVO-konforme Informationspflicht zu verstoßen? Im Folgenden stellen wir Ihnen einige bewährte Techniken vor und bewerten ihre Vor- und Nachteile.

E-Mail-Harvesting: Die Jagd der Spambots nach Adressen

Der Begriff E-Mail-Harvesting beschreibt das automatisierte Sammeln von E-Mail-Adressen, um diese für unerwünschte Werbung, Phishing-Versuche oder zur Verbreitung von Malware zu nutzen. Zu diesem Zweck durchforsten spezielle Softwarelösungen, sogenannte E-Mail-Harvester, Webseiten, Foren, Mailinglisten und soziale Netzwerke nach Kontaktinformationen. Ein zentrales Erkennungsmerkmal für diese Programme ist die typische Struktur von E-Mail-Adressen, insbesondere das @-Symbol. Fortgeschrittene Spambots erkennen sogar alternative Schreibweisen wie [at], [AT], (at) oder (AT), um an die gesuchten Daten zu gelangen.

Besonders auffällig für Spambots ist der HTML-Code für E-Mail-Links im Format mailto:ihr_postfach@beispiel.de, der es Nutzerinnen und Nutzern erlaubt, mit einem Klick ihr E-Mail-Programm zu öffnen. Daher ist es ratsam, klassische Muster bei der Veröffentlichung von Kontaktinformationen zu umgehen und entsprechende Schutzmaßnahmen zu ergreifen.

Klassische Darstellung ohne Schutz

Um den besten Schutz vor dem automatisierten Auslesen durch E-Mail-Harvester zu gewährleisten, ist es wichtig zu verstehen, wie E-Mail-Adressen normalerweise auf Webseiten eingebunden werden. In der klassischen Darstellung wird die E-Mail-Adresse mit einem mailto:-Link im Quellcode der Webseite angegeben.

Darstellung im Browser:

Code:

Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: <a href="mailto:ihr_postfach@beispiel.de">ihr_postfach@beispiel.de</a>.

Vor- und Nachteile:

Bewertung:

E-Mail-Adresse ersetzen

Durch Bilder, Flash, SVG oder ähnliche Inhalte

Anstatt eine E-Mail-Adresse im Quelltext als reinen Text zu hinterlegen, gibt es die Möglichkeit, sie in alternativen Formaten darzustellen. Dies kann zum Beispiel über Bilddateien, wie in unserem nachfolgenden Beispiel, oder über Elemente wie Flash, SVG oder Silverlight erfolgen. Solche Ansätze verhindern das einfache Auslesen durch Spambots, da sie die E-Mail-Adresse visuell sichtbar machen, ohne sie im reinen Textformat im Quellcode abzulegen.

Darstellung im Browser:

Code:

Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: <img src="Pfad/grafikdatei.png" with="120" height="20" alt="Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: ihr_postfach@beispiel.de">

Vor-und Nachteile:

Bewertung:

Durch Datei-URLs und anschließender Weiterleitung ersetzen

Eine Alternative besteht darin, die E-Mail-Adresse mithilfe einer gezielten HTTP-Weiterleitung zu verbergen. Dies kann durch den Einsatz von Tools wie Apache mod_rewrite, JavaScript oder serverseitigen Skripten realisiert werden. Ein Beispiel hierfür ist die Umsetzung mit PHP. In diesem Fall verweist der angezeigte E-Mail-Link zunächst auf eine separate Datei, die die Weiterleitung verarbeitet.

Darstellung im Browser:

Code:

Bei Fragen und Anregungen <a href="email_redirect.php">kontaktieren</a> Sie uns bitte. Wir freuen uns auf Ihre Kontaktaufnahme!

In der serverseitig verarbeiteten Datei kann der Link über einen mailto:-Aufruf als Weiterleitung eingebunden werden. Dadurch öffnet sich das E-Mail-Programm des Nutzers wie gewohnt, und die Empfängeradresse ist bereits automatisch eingetragen.

<?php
    /* Inhalt der Datei "email_redirect.php"   */
    header ("Location: mailto:ihr_postfach@beispiel.de");
    exit ();
?>

Vor- und Nachteile:

Bewertung:

E-Mail-Adresse verschleiern

Sonderzeichen in der E-Mail-Adresse ersetzen

Eine Möglichkeit, E-Mail-Adressen als Text darzustellen, besteht darin, die Sonderzeichen „@“ und „.“ durch Begriffe wie „AT“ und „DOT“ oder „PUNKT“ zu ersetzen. Wird jedoch die mailto:-Anweisung im Link verwendet, erkennen viele Systeme den Link trotzdem als E-Mail-Verweis.

Des Weiteren muss der Benutzer in seinem E-Mail-Programm die Platzhalter manuell durch die richtigen Sonderzeichen („@“ und „.“) ersetzen. Fehlt die mailto:-Anweisung, muss der Nutzer die Adresse aus dem Text selbst interpretieren und diese manuell eintippen, bevor er seine E-Mail verfasst.

Darstellung im Browser:

Code:

Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: <a href="mailto:ihr_postfachATbeispielDOTde">ihr_postfach AT beispiel PUNKT de</a>.

Vor- und Nachteile:

Bewertung:

HTML-Entities verwenden

Eine elegantere Alternative zur Darstellung von E-Mail-Adressen besteht darin, die Sonderzeichen „@“ und „.“ durch HTML-Entitäten in nummerierter Form zu ersetzen. Diese Methode macht es für Spambots schwieriger, die Adresse auszulesen, während sie für menschliche Benutzer weiterhin gut lesbar bleibt.

Darstellung im Browser:

Code:

Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: <a href="mailto:ihr_postfach&#64;beispiel&#46;de">ihr_postfach&#64;beispiel&#46;de</a>.

Vor- und Nachteile:

Bewertung:

HEX- bzw. URL-Encoding verwenden

Alternativ zur Verwendung von HTML-Entities können Sie auch HEX- oder URL-Encoding zur Verschleierung der E-Mail-Adresse verwenden.

Darstellung im Browser:

Code:

HEX-Codierung:
Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: <a href='&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x69;&#x68;&#x72;&#x5F;&#x70;&#x6F;&#x73;&#x74;&#x66;&#x61;&#x63;&#x68;&#x40;&#x62;&#x65;&#x69;&#x73;&#x70;&#x69;&#x65;&#x6C;&#x2E;&#x64;&#x65;'>E-Mail-Adresse</a>

URL-Codierung (ASCII):
Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: <a href="mailto:%69%68%72%5f%70%6f%73%74%66%61%63%68%40%62%65%69%73%70%69%65%6c%2e%64%65">E-Mail-Adresse</a>

Vor- und Nachteile:

Bewertung:

HTML-Kommentare verwenden

Ein weiterer Ansatz, um eine E-Mail-Adresse vor Spambots zu schützen, besteht darin, sie HTML-Kommentaren aufzubrechen. Durch die Verwendung von HTML-Kommentaren und den darin enthaltenen Sonderzeichen wird es Spambots erheblich erschwert, ein konsistentes Muster zu erkennen und die Kommentarfragmente aus dem Text zu entfernen, um eine gültige E-Mail-Adresse zu rekonstruieren. Diese Kommentare enthalten sowohl spezielle Zeichen der Kommentarsyntax (wie „-“, „>“) als auch solche, die in E-Mail-Adressen üblich sind (wie „.“ und „@“), was die automatische Erkennung weiter verkompliziert. 

Darstellung im Browser:

Code:

 Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: ih<!-- @. -->r_post<!-- @. -->fach@bei<!-- @. -->spiel.de

Vor- und Nachteile:

Bewertung:

Zeichenketten hinzufügen

Ein weiterer effektiver Ansatz zur Verschleierung von E-Mail-Adressen ist das Einfügen zusätzlicher Zeichenfolgen wie „ENTFERNEN“, „DEL“ oder „REMOVE“, die den Benutzer darauf hinweisen, diese vor dem Senden der E-Mail manuell zu löschen. Zur besseren Sichtbarkeit der zu entfernenden Zeichen kann man entweder das HTML-Element „del“ mit einer angepassten CSS-Klasse oder einen entsprechend formatierten „span“-Tag verwenden.

Darstellung im Browser:

Code:

<style>del{ color:red;} .strike{color:red;text-decoration:line-through;}</style>

Bei Fragen und Anregungen kontaktieren Sie uns bitte unter:
<a href="mailto:ihr_postfachENTFERNEN@beispiel.de">ihr_postfachENTFERNEN@beispiel.de</a> oder
<a href="mailto:ihr_postfachDEL@beispiel.de">ihr_postfach<del>DEL</del>@beispiel.de</a> (del-Tag) oder
<a href="mailto:ihr_postfachREMOVE@beispiel.de">ihr_postfach<span class="strike">REMOVE</span>@beispiel.de</a> (span-Tag)

Vor- und Nachteile:

Bewertung:

Zeichen ausblenden

Unter Verwendung von CSS können zusätzliche Zeichen in der Darstellung wieder entfernt werden, so dass diese für den Benutzer nicht sichtbar sind.

Darstellung im Browser:

Code:

<style type="text/css">
    p span.entfernen {display:none;}
</style>
Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: ihr_postfach<span class="entfernen">DIESENTFERNEN</span>@beispiel.de

Vor- und Nachteile:

Bewertung:

Dynamische Komposition der Adresse verwenden

Eine weitere Methode besteht darin, die E-Mail-Adresse mithilfe von JavaScript clientseitig dynamisch zusammenzusetzen.

Darstellung im Browser:

Code:

<script language="JavaScript" type="text/javascript">
    var part1 = "ihr_postfach";
    var part2 = Math.pow(2,6);
    var part3 = String.fromCharCode(part2);
    var part4 = "beispiel.de";
    var part5 = part1 + String.fromCharCode(part2) + part4;
    document.write ("Bei Fragen und Anregungen kontaktieren Sie uns bitte unter: <a href=" + "mai" + "lto" + ":" + part5 + ">" + part1 + part3 + part4 + "</a>.");
</script>

Vor- und Nachteile:

Bewertung:

Captchas verwenden

CAPTCHAs sind eine effektive Möglichkeit, um E-Mail-Adressen auf Webseiten vor Spam zu schützen. Bei dieser Methode wird die E-Mail-Adresse erst dann im Klartext angezeigt, wenn Nutzer nachweisen, dass sie menschlich sind, indem sie eine Prüfung bestehen. Solche Prüfungen können das Abtippen von Buchstaben- oder Zahlenkombinationen umfassen, aber auch einfache Rechenaufgaben, Kombinationsaufgaben oder Puzzles sind gängige Varianten.

Darstellung im Browser:

Code:

Bei Fragen oder Anregungen kontaktieren Sie uns bitte unter: <a href="https://www.webwide.de/cms/redirect/285592?to=http%3A%2F%2Fwww.google.com%2Frecaptcha%2Fmailhide%2Fd%3Fk%3D01RnXyfQ3ujBGpDsSi8XgCIG%3D%3D%26amp%3Bamp%3Bc%3DkUn7IqWhj943ssAPOvX9CIR0_kcYdLbOBoblSuyC1R4%3D" target="_blank" rel="noopener nofollow"onclick="window.open('http://www.google.de/recaptcha/mailhide/d?k\07501RnXyfQ3ujBGpDsSi8XgCig\75\75\46c\75kUn7IqWhj943ssAPOvX9CIR0_kcYdLbOBoblSuyC1R4\075', ''; 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizeable=0,width=500,height=300');return false;" title"diese E-Mail-Adresse anzeigen">E-Mail</a>!
<br><br>
Wir bitten Sie um Verst&auml;ndnis daf&uuml;r, dass wir die E-Mail-Adresse nur anzeigen, wenn Sie best&auml;tigt haben, dass Sie ein Mensch und kein Bot sind!

Vor- und Nachteile:

Bewertung:

Gleichartige, unnötige Elemente einfügen

Mit dieser Methode werden Spambots nur fragmentierte Teile der korrekten E-Mail-Adresse präsentiert, die im Quelltext durch zusätzliche, unnötige Elemente voneinander getrennt sind. Dadurch scheint die Adresse für automatisierte Programme unzusammenhängend zu sein. Mithilfe von CSS-Anweisungen können diese überflüssigen Elemente beim Rendern im Browser ausgeblendet werden, sodass eine vollständige und für den menschlichen Nutzer lesbare E-Mail-Adresse erscheint.

Darstellung im Browser:

Code:

<style type="text/css">
   span.d0 {display:none;}
</style>
Bei Fragen oder Anregungen kontaktieren Sie uns bitte unter: <span class="d0">INHALT</span><span class="d1">ihr_postfach</span><span class="d0">postfach</span><span class="d0">Mietzekatze</span><span class="d0">?</span><span class="d1">@</span><span class="d0">blubb</span><span class="d0">beispil</span><span class="d1">beispiel</span><span class="d0">@</span><span class="d1">.</span><span class="d0">:</span><span class="d1">de</span><span class="d0">de</span><span class="d0>com</span>

Vor- und Nachteile:

Bewertung:

CSS (Ausblenden bzw. Pseudo-Elemente) verwenden 

Eine effektive Methode zur Verschleierung von E-Mail-Adressen ist die Nutzung von CSS, um Teile der Adresse auszublenden oder hinzuzufügen. Dabei können Pseudo-Elemente wie ::before und ::after verwendet werden, um Inhalte dynamisch anzuhängen oder voranzustellen. Diese Technik ermöglicht es, im Quellcode nur Fragmente der E-Mail-Adresse darzustellen, während die vollständige Adresse erst im Browser sichtbar wird. Zusätzlich können unnötige Elemente im Quellcode integriert und per CSS ausgeblendet werden, um Spambots weiter zu verwirren, während menschliche Nutzer eine vollständige und lesbare E-Mail-Adresse sehen.

Darstellung im Browser:

Code:

<style type="text/css">
   p#mailinvite::after, span#displayMail::before, span#displayMail::after {color:b7392d;}
   p#mailinvite::after {content: "postfach\40 beispiel.de";}
   span#displayMail::before {content: "ihr_";}
   span#entfernen {display:none;}
   span#displayMail::after {content: "postfach\40 beispiel.de";}
</style>
<!--  (\40 ist das Unicode-Zeichen für das Symbol "@") -->

<p id="mailinvite"><u>Beispiel 1:</u><br> 
Bei Fragen oder Anregungen kontaktieren Sie uns bitte unter: ihr_</p>
<p><u>Beispiel2:</u><br>
Bei Fragen oder Anregungen kontaktieren Sie uns bitte unter: <span id="displayMail"><span id="entfernen">honeypot@beispiel.de</span></span></p>

Vor- und Nachteile:

Bewertung:

CSS (Umkehrung der Zeichenreihenfolge) verwenden

Ein raffinierter Ansatz zur Verschleierung einer E-Mail-Adresse besteht darin, die Zeichenfolge im Quellcode umzukehren. Dabei wird die Adresse in umgekehrter Reihenfolge gespeichert und erst bei der Darstellung im Browser durch CSS-Anweisungen wieder in die korrekte Reihenfolge gebracht. Diese Methode sorgt dafür, dass Spambots die Adresse nicht problemlos auslesen können, während sie für den Nutzer im Browser normal lesbar erscheint.

Darstellung im Browser:

Code:

<style type="text/css">
  span.ltrText { unicode-bidi:bidi-override;direction: rtl;  }
</style>
Bei Fragen oder Anregungen kontaktieren Sie uns bitte unter: <span class="ltrText">ed.leipsieb@hcaftsop_rhi</span>

Vor- und Nachteile:

Bewertung:

E-Mail-Adresse verschlüsseln

Ein weiterer Ansatz zum Verstecken einer E-Mail-Adresse ist die Verschlüsselung, beispielsweise durch das ROT16-Verfahren. Erweiterungen wie ROT5 oder ähnliche Verfahren können ebenfalls verwendet werden. Dabei wird die verschlüsselte E-Mail-Adresse als Parameter in einem JavaScript-Funktionsaufruf hinterlegt. Sollte ein Spambot diesen verschlüsselten Parameter erkennen, kann er zusätzlich auf eine Blacklist gesetzt werden. Diese Methode bietet nicht nur Schutz durch die Verschlüsselung selbst, sondern ermöglicht auch die Identifizierung und Abwehr potenzieller Spambots.

Darstellung im Browser:

Code:

<script>
function encryptRot13(str){
let mapArray = [];
let elements = "abcdefghijklmnopqrstuvwxyz";
let output = "";
for(let i = 0; i < elements.length; i++){
let x = elements.charAt(i);
let y = elements.charAt((i + 13) % 26);
mapArray[x] = y;
mapArray[x.toUpperCase()] = y.toUpperCase();
}
for(let i = 0; i < str.length; i++){
let c = str.charAt(i);
output += (c >= 'A' && c <= 'Z' || c >= 'a' && c <= 'z' ? mapArray[c] : c);
}
return output;
function decryptRot13(str){
str = "mailto:" + encryptRot13(str);
document.location.href = str;
}
</script>
<p>Bei Fragen oder Anregungen kontaktieren Sie uns bitte unter: <a href="JavaScript: decryptRot13('vue_cbfgsnpu@orvfcvry.qr');">E-Mail-Adresse</a></p> 

Vor- und Nachteile:

Bewertung:

Kontaktformular verwenden

Kontaktformulare stellen eine wirksame Alternative zur Darstellung einer E-Mail-Adresse dar. Sie ermöglichen es, Spambots durch den Einsatz von CAPTCHAs am Versenden von Nachrichten zu hindern. Aus Gründen der Übersichtlichkeit wird hier auf die detaillierte Darstellung von CSS-Angaben, der CAPTCHA-Implementierung sowie der verarbeitenden PHP-Datei verzichtet. Im Internet finden sich jedoch zahlreiche fundierte Anleitungen, die den Aufbau sowohl einfacher als auch komplexer Feedback-Formulare beschreiben.

Darstellung im Browser:

Code:

<a id="cm" href="clickmail.php"><img src="grafikdatei.png" width="240" height="35" alt="Kontaktaufnahme über Ihr eigenes E-Mail-Programm?"></a>
<form action="feedbackform.php">
   <p><label>Ihr Name</label>
   <input name="name" placeholder="Bitte geben Sie hier Ihren Namen ein."></p>
   <p><label>Ihre E-Mail-Adresse</label>
   <input name="email" type="email" placeholder="Bitte geben Sie hier Ihre E-Mail-Adresse ein."></p>
   <p><label>Ihre Nachricht</label>
   <textarea name="message" placeholder="Bitte hinterlassen Sie hier Ihre Nachricht an uns"></textarea></p>
   <p><input id="submit" name="submit" type="submit" valie="Absenden"></p>
</form>

Vor- und Nachteile:

Bewertung:

Professionelles E-Mail-Hosting nutzen

Um eingehenden Spam drastisch zu reduzieren, können Sie auch auf einen professionellen E-Mail-Hoster zurückgreifen. Die Server der Anbieter sind meist mit hocheffektivem Spamschutz ausgestattet, so dass Sie wirklich nur die E-Mails in Ihr Postfach erhalten, die Sie auch wirklich haben wollen.

Fazit

Ein besonders vielversprechender Ansatz zum Schutz vor Spam ist die Nutzung eines Kontaktformulars. Um den Anforderungen des Telemediengesetzes (TMG) gerecht zu werden, kann eine E-Mail-Adresse beispielsweise als Grafik dargestellt werden, die über einen PHP-Redirect zu einem Mail-Link führt. Auch die JavaScript-Verschlüsselung erweist sich als äußerst effektiv für den Schutz vor Spam. Dennoch bleibt die Barrierefreiheit dabei eine große Herausforderung, die es zu beachten gilt.

Die Verschleierung von E-Mail-Adressen durch CSS-Pseudo-Elemente wie ::before und ::after liefert ebenfalls überzeugende Ergebnisse. Zusätzlich kann ein Honeypot integriert werden, um Spambots gezielt in die Irre zu führen und langfristigen Schutz zu gewährleisten. Eine Kombination dieser Methode mit einem E-Mail-Formular zur Darstellung der Adresse ist ebenfalls eine Option. Ein zusätzlicher Link unterhalb des Formulars kann hilfreich sein, z. B.: „Falls der Versand über das Formular Probleme bereitet, können Sie Ihre Nachricht auch über folgenden Link senden“. Dieser Link sollte dann aber natürlich so gestaltet sein, dass er für Menschen verständlich ist, aber keine Aufmerksamkeit von Spambots erregt.

Eine vollständig barrierefreie Lösung ist aktuell leider kaum realisierbar, wenn sowohl die Vorgaben des TMG und der Barrierefreie-Informationstechnik-Verordnung (BITV) erfüllt werden sollen und gleichzeitig ein effektiver Spamschutz gewährleistet sein muss. Daher sollten Sie am besten verschiedene Methoden miteinander kombinieren, um Spambots den Zugriff auf E-Mail-Adressen so schwer wie möglich zu machen.

FAQ - Häufig gestellte Fragen