HTML / CSS, JavaScript / DHTML

E-Mail Bots bekämpfen – E-Mail Adressen maskieren

WordPress Entwickler und Webdesigner

Ein großes Problem heutzutage sind Spammails.

Leider kann man sich nur schlecht gegen diese wehren, da es immer neue Leute gibt, die diese versenden.

Die große Frage dabei ist aber oft: Wie kommen Leute an die eigene E-Mail Adresse?

Anzeige:




Eine Lösung

Die Lösung ist sehr simple: Bots kopieren E-Mail Adressen von Webseiten.

Nur was dagegen tun?
Natürlich könnte man E-Mail Adressen im Inhalt der eigenen Webseite vermeiden, aber diese Lösung ist nicht immer umsetzbar.

Die beste Lösung hierbei ist es, E-Mail Adressen für Bots zu „maskieren“.

Hierbei hilft die größte Schwäche von Bots: Sie kennen kein JavaScript.

Das heißt, alles was mit JavaScript gemacht wird erfahren die Bots nicht.

Und hier schlagen wir zu.

Um Bots nun also zu bekämpfen setzen wir unter unseren </body>-Schlusstag einfach einen <script>-Tag.

Im Klartext sähe dies so aus:

<script type="text/javascript">
 
</script>

Als nächstes müssen wir unsere E-Mail Adressen irgendwie kennzeichnen.

Dazu benutzen wir eine Klasse, die wir beispielsweise „email-masc“ nennen.

Diese fügen wir zu jeder unserer E-Mail Adressen hinzu. Also ganz einfach: <span class=“email-masc“><e-mail adresse hier></span>.

Nun müssen wir diese Elemente finden.

Hierbei bieten uns die Browser heutzutage eine schöne Methode namens document.querySelectorAll(), mit deren Hilfe wir, wie die meisten es von jQuery gewohnt sein werden, mit CSS3 Selektoren Elemente finden können.

In der Praxis sähe das Ganze dann so aus:

var mascs= document.querySelectorAll('.email-masc');

Das ganze fügen wir jetzt zu unserem bisherigen Code hinzu und erhalten folgendes:

<script type="text/javascript">
var mascs= document.querySelectorAll('.email-masc');
</script>

Nun müssen wir durch unsere erhaltene NodeList durch-iterieren.

Das bedeutet, wir gehen jedes gefundene Element ab und führen eine Operation darauf aus.

Hierbei nutzen wir eine einfache for()-Schleife, die sich der Eigenschaft mascs.length zu nutzen macht.

for (var i = 0; i < mascs.length; ++i) // mascs.length ist die Anzahl der gefundenen Elemente. Der Array beginnt bei 0, deswegen starten auch wir bei 0.
{
 
}

Nun wird einfach ein Platzhalter gesucht und ersetzt.

Das sähe dann so aus:

mascs[i].textContent = mascs[i].textContent.replace('($)', '@');

Dies ersetzt in allen gefundenen Elementen die Zeichen ‚($)‘ durch ein @-Symbol.

Der komplette Code sähe also so aus:

<script type="text/javascript">
var mascs= document.querySelectorAll('.email-masc');
 
for (var i = 0; i < mascs.length; ++i) // mascs.length ist die Anzahl der gefundenen Elemente. Der Array beginnt bei 0, deswegen starten auch wir bei 0.
{
mascs[i].textContent = mascs[i].textContent.replace('($)', '@');
}
 
</script>

Und fertig ist unser Code!

Nun ersetzen wir in unserem Inhalt alle @-Symbole in E-Mail Adressen durch ($) und fertig!

Der Benutzer bekommt die E-Mail Adressen wie gewohnt angezeigt, Bots hingegen nur ein komisch gestalltetes Wort.

Ein kleiner Tipp:
» Man könnte auch folgendes in die for()-Schleife schreiben:

var email = mascs[i].textContent.replace('($)', '@');
 
var link = document.createElement("a");
 
link.setAttribute("href", "mailto:" + email);
 
link.textContent = email;
 
mascs[i].textContent = "";
 
mascs[i].appendChild(link);

Zur Erklärung: Dieser Code würde nun bewirken, dass nicht nur ein @-Symbol eingefügt wird, sondern dass zusätzlich noch ein <a>-Tag mit zugehörigem href=““ und mailto: hinzugefügt wird.

Dadurch wird die E-Mail Adresse zu einem Link und der Benutzer kann mit einem Klick direkt in sein E-Mail Programm gelangen.

Dies natürlich nur für echte Benutzer und keine Bots.

Natürlich gibt es noch andere Möglichkeiten, aber diese reichen im Normalfall aus.

Ich hoffe euch hat dieser Artikel weitergeholfen und wenn ihr etwas nicht verstanden habt oder mir einen Vorschlag machen wollt, so schreibt dieses bitte in die Kommentare.

Mit besten Grüßen,

Justin Nuß

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Gastautor

Unter dem Namen Gastautor werden sämtliche Artikel geführt die von verschiedenen Gastautoren auf dem Webdesign-Podcast.de veröffentlicht wurden. Autoren die sich regelmäßig am Webdesign-Podcast.de beteiligt haben, sind auf der Team Seite zu finden.

Webseite:

5 Antworten zu “E-Mail Bots bekämpfen – E-Mail Adressen maskieren”

  1. An sich eine gute Lösung. Nur was ist mit den Leuten die Javascript deaktiviert haben. Habe schon öfter gehört, dass in größeren Firmen auf den Rechnern das Javascript aus Sicherheitsgründen deaktiviert ist. Will ich mit meiner Webseite also nun gerade diese Leute erreichen, kann ich diese Variante leider nicht anwenden. Meine Zielgruppe würde den selben „wirren Code“ erhalten, den ich ja eigentlich nur den Bots liefern will.
    Die Lösung an sich finde ich gut! Gibt es aber evtl. auch eine Lösung, die eben das beschriebene Szenario verhindert? Also ohne Javascript arbeitet?

    • Man kann nun leider nicht immer Rücksicht auf Leute nehmen, die Javascript deaktiviert haben. Wenn ein Unternehmen Javascript deaktiviert, kann man eigentlich gleich den Quellcode einer Seite auf einer Konsole ausgeben lassen.

      Javascript gehört zum Web, es ist schnell und sicher (es hat keinen Zugriff auf den Computer, außer der Browser hat eine Sicherheitslücke (abgesehen von HTML5 Funktionen)). Unsichere Sprachen wären Flash oder Java, bei denen auch Zugriff auf den Computer möglich ist und bei denen andauernd Sicherheitslücken gefunden werden.

      Und Pascals (ich meine unseren Bajorat ;-)) Lösung mit dem ∂ kann auch in dem Code, der hier vorgestellt wird, genutzt werden. Einfach aus dem ($) ein ∂ machen.

  2. Das Javascript zum Web gehört sehe ich auch so. Jedoch erkläre mal einem Kunden, dass seine Seite bei seinen potenziellen Kunden nicht richtig dargestellt wird. Den Interessiert nicht, dass sein potenzieller Kunde Javascript deaktiviert hat. Der sagt: „Machen Sie, dass meine potenziellen Kunden das sehen, was ich ihnen zeigen möchte!“ Denke auch nicht, dass wir hier nun die Pro und Contras von Javascript und dessen Sicherheit diskutieren müssen. Die von Pascal B. vorgeschlagene Variante ist doch sehr gut. Wahrscheinlich würde ich einfach statt dem ∂ ein Bild mit dem @ Zeichen einbauen. So bekommt jeder zumindest das selbe angezeigt. 😉

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.