Damit deine Emails oder sonstige Daten vor dem abgreifen von Bots geschützt werden sollten Sie im Quellcode verschlüsselt sein.

1. Base64-Kodierung der E-Mail

Kodiere deine E-Mail-Adresse zuerst mit einem Online-Tool oder JavaScript:

2. HTML-Grundgerüst erstellen

html
Copy
<!DOCTYPE html>
<html>
<head>
  <title>Kontakt</title>
</head>
<body>
  <h1>Kontakt</h1>
  <!-- Hier kommt die verschleierte E-Mail -->
  <div id="email-container"></div>
  <!-- JavaScript-Code einfügen -->
  <script>
    // Base64-kodierte E-Mail
    const encoded = "YmVpc3BpZWxAZG9tYWluLmNvbQ==";
    // Dekodieren
    const email = atob(encoded);
    // E-Mail-Link dynamisch einfügen
    const container = document.getElementById("email-container");
    const link = document.createElement("a");
    link.href = "mailto:" + email;
    link.textContent = email;
    container.appendChild(link);
  </script>
</body>
</html>

3. Erklärung des Codes

  • Schritt 1:
    Die E-Mail-Adresse wird als Base64-String (encoded) im <script>-Tag gespeichert.
  • Schritt 2:
    atob(encoded) dekodiert den Base64-String zurück zur lesbaren E-Mail.
  • Schritt 3:
    Ein <a>-Link wird dynamisch erstellt und in das leere <div id=“email-container“> eingefügt.

4. Alternative: Mit Zeichenentitäten kombinieren

Für zusätzlichen Schutz ersetze @ und . nach der Dekodierung mit HTML-Entities:

html

Copy

<script>

  const encoded = „YmVpc3BpZWxAZG9tYWluLmNvbQ==“;

  let email = atob(encoded)

    .replace(/@/g, „&#64;“)   // @ → &#64;

    .replace(/\./g, „&#46;“); // . → &#46;

  document.getElementById(„email-container“).innerHTML = `

    <a href=“mailto:${email}“>${email}</a>

  `;

</script>

Run HTML

5. Platzierung im HTML

  • Füge den Code vor dem schließenden </body>-Tag ein, damit das DOM bereits geladen ist.
  • Wenn du den Code im <head> platzieren willst, verwende DOMContentLoaded:

html

Copy

<script>

  document.addEventListener(„DOMContentLoaded“, () => {

    const encoded = „YmVpc3BpZWxAZG9tYWluLmNvbQ==“;

    const email = atob(encoded);

    // … Rest wie oben …

  });

</script>

Run HTML

6. Komplettes Beispiel (optimiert)

html

Copy

<!DOCTYPE html>

<html>

<head>

  <title>Kontakt</title>

</head>

<body>

  <h1>Kontakt</h1>

  <div id=“email-placeholder“>[Bitte aktivieren Sie JavaScript]</div>

  <script>

    document.addEventListener(„DOMContentLoaded“, () => {

      // Base64-kodierte E-Mail

      const encoded = „YmVpc3BpZWxAZG9tYWluLmNvbQ==“;

      // Dekodieren und Entities ersetzen

      const email = atob(encoded)

        .replace(/@/g, „&#64;“)

        .replace(/\./g, „&#46;“);

      // Link erstellen

      const placeholder = document.getElementById(„email-placeholder“);

      placeholder.innerHTML = `

        <a href=“mailto:${email}“>${email}</a>

      `;

    });

  </script>

</body>

</html>

Run HTML

7. Testen

  1. Öffne die HTML-Datei im Browser – die E-Mail sollte als klickbarer Link erscheinen.
  2. Klicke mit Rechtsklick → „Seitenquelltext anzeigen“ – die E-Mail sollte nicht im Klartext zu sehen sein.

Wichtige Hinweise:

  • JavaScript muss aktiviert sein: Nutzer ohne JavaScript sehen nur den Platzhaltertext.
  • Fallback-Lösung: Füge eine Notfallkontaktmöglichkeit ein (z. B. ein Kontaktformular).
  • Sicherheit: Base64 ist keine Verschlüsselung – professionelle Crawler können dies umgehen. Kombiniere es mit anderen Methoden (z. B. Zeichenentitäten).