E-Mail-Adressen vor Spambots schützen (JavaScript-Obfuscation)

Um E-Mail-Adressen vor automatisierten Sammlern (Spambots) zu verbergen, kann man die Adresse in einzelne Fragmente zerlegen und erst beim Aufruf der Seite per JavaScript zusammensetzen. Dadurch tauchen im statischen HTML-Quelltext weder das mailto:-Schema noch das @-Zeichen auf.

1. Der HTML-Quelltext

An der Stelle, an der der E-Mail-Link erscheinen soll, wird lediglich ein leeres Platzhalter-Element mit einer eindeutigen ID platziert:

HTML 
<!-- Platzhalter für den dynamisch erzeugten E-Mail-Link -->
<span id="email-placeholder">E-Mail wird geladen...</span>

2. Der JavaScript-Code

Das Skript zerlegt die Adresse in Variablen und fügt den fertigen mailto:-Link erst nach dem Laden des DOMs (Document Object Model) ein. Dieser Code kann im <head>, am Ende des <body> oder in einer externen .js-Datei stehen:

<script>
document.addEventListener("DOMContentLoaded", function() {
  // 1. E-Mail-Bausteine getrennt definieren
  var user = "info";
  var domain = "foobar";
  var tld = "de";

  // 2. Ziel-Element im HTML greifen
  var container = document.getElementById("email-placeholder");

  if (container) {
    // 3. E-Mail-Adresse und Mailto-Link zusammensetzen
    var fullAddress = user + "@" + domain + "." + tld;
    var mailtoUrl = "m" + "ailto:" + fullAddress;

    // 4. Link im Platzhalter-Element ausgeben
    container.innerHTML = '<a href="' + mailtoUrl + '">' + fullAddress + '</a>';
  }
});
</script>

Warum dieser Schutz effektiv ist:

  • Kein Muster für einfache Scraper: Klassische Spambots durchsuchen HTML-Dateien nach Strings wie mailto: oder dem Regex-Muster user@domain.tld. Beide Suchmuster schlagen hier fehl.
  • Inhalts-Trennung: Wenn der JS-Code in eine externe Datei ausgelagert wird (z. B. main.js), müsste ein Bot die externen Skripte parsen und ausführen, was den meisten Repositories zu aufwendig ist.
  • Barrierefreiheit & Benutzerfreundlichkeit: Für menschliche Besucher mit aktiviertem JavaScript baut sich der Link beim Seitenaufruf unbemerkt auf und verhält sich wie ein ganz normaler Link.

Upgrade

Um es noch sicherer zu machen, wird folgendes Script erst ausgeführt, wenn der User mit der Maus über den link fährt. Das ist hunderprozentiger Schutz, denn kein Bot kann eine Mausberührung ausführen.

HTML 
<span id="email-placeholder" onmouseenter="revealMail(this)">E-Mail anzeigen</span>
Javascript 
function revealMail(element) {
  // 1. E-Mail-Bausteine getrennt definieren
  var user = "info";
  var domain = "foobar";
  var tld = "de";

  // 2. E-Mail-Adresse und Mailto-Link zusammensetzen
  var fullAddress = user + "@" + domain + "." + tld;
  var mailtoUrl = "mailto:" + fullAddress;

  // 3. Link im Platzhalter-Element ausgeben
  element.innerHTML = '<a href="' + mailtoUrl + '">' + fullAddress + '</a>';

  // 4. Event entfernen, damit die Funktion nicht bei jedem weiteren Hover erneut feuert
  element.onmouseenter = null;
}


Javascript Tipps