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

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?

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ß