Wie Sie Ihre E-Mail-Adresse sicher auf einer Website teilen

Spammer sind heutzutage ein großes Problem. Wenn Sie Ihre Kontaktinformationen teilen möchten, ohne von Spam-E-Mails überflutet zu werden, benötigen Sie eine Lösung. Dieses Problem hatte ich vor ein paar Monaten. Während ich recherchierte, wie ich es lösen könnte, fand ich verschiedene interessante Lösungen. Nur eine davon war perfekt für meine Bedürfnisse.

In diesem Artikel zeige ich Ihnen, wie Sie Ihre E-Mail-Adresse mit verschiedenen Lösungen ganz einfach vor Spam-Bots schützen können. Es liegt an Ihnen zu entscheiden, welche Technik Ihren Bedürfnissen entspricht.

Der traditionelle Fall

Nehmen wir an, Sie haben eine Website. Sie möchten Ihre Kontaktdaten teilen und nicht nur Ihre sozialen Links. Die E-Mail-Adresse muss dabei sein. Einfach, oder? Sie tippen so etwas wie das hier

<a href="mailto:[email protected]">Send me an Email</a>

Und dann gestalten Sie es nach Ihrem Geschmack.

Nun, auch wenn diese Lösung funktioniert, hat sie ein Problem. Sie macht Ihre E-Mail-Adresse für buchstäblich jeden zugänglich, einschließlich Website-Crawlern und allen Arten von Spam-Bots. Das bedeutet, dass Ihr Posteingang mit einer Menge unerwünschten Mülls wie Werbeangeboten oder sogar Phishing-Kampagnen überflutet werden kann.

Wir suchen nach einem Kompromiss. Wir möchten es Bots schwer machen, unsere E-Mail-Adressen zu erhalten, aber für normale Benutzer so einfach wie möglich.

Die Lösung ist Verschleierung (Obfuscation).

Verschleierung (Obfuscation) ist die Praxis, etwas schwer verständlich zu machen. Diese Strategie wird aus mehreren Gründen mit Quellcode verwendet. Einer davon ist, den Zweck des Quellcodes zu verbergen, um Manipulation oder Reverse-Engineering zu erschweren. Wir werden uns zuerst verschiedene Lösungen ansehen, die alle auf der Idee der Verschleierung basieren.

Der HTML-Ansatz

Wir können uns Bots als Software vorstellen, die das Web durchsucht und Webseiten durchkriecht. Sobald ein Bot ein HTML-Dokument erhält, interpretiert er den Inhalt und extrahiert Informationen. Dieser Extraktionsprozess wird als Web Scraping bezeichnet. Wenn ein Bot nach einem Muster sucht, das dem E-Mail-Format entspricht, können wir versuchen, es zu tarnen, indem wir ein anderes Format verwenden. Zum Beispiel könnten wir HTML-Kommentare verwenden

<p>If you want to get in touch, please drop me an email at<!-- fhetydagzzzgjds --> email@<!-- sdfjsdhfkjypcs -->addr<!-- asjoxp -->ess.com</p>

Das sieht unordentlich aus, aber der Benutzer sieht die E-Mail-Adresse so

If you want to get in touch, please drop me an email at [email protected]

Pro

• Einfach einzurichten.
• Es funktioniert auch mit deaktiviertem JavaScript.
• Es kann von assistiven Technologien gelesen werden.

Contra

• Spam-Bots können bekannte Sequenzen wie Kommentare überspringen.
• Es funktioniert nicht mit einem `mailto:`-Link.

Der HTML- & CSS-Ansatz

Was wäre, wenn wir die Styling-Macht von CSS verwenden, um einige Inhalte zu entfernen, die nur dazu dienen, Spam-Bots zu täuschen? Nehmen wir an, wir haben den gleichen Inhalt wie zuvor, aber diesmal platzieren wir ein ``-Element darin

<p>If you want to get in touch, please drop me an email at <span class="blockspam" aria-hidden="true">PLEASE GO AWAY!</span> email@<!-- sdfjsdhfkjypcs -->address.com</p>.

Dann verwenden wir die folgende CSS-Regel

span.blockspam {
  display: none;
}

Der Endbenutzer sieht nur dies

If you want to get in touch, please drop me an email at [email protected].

... was der Inhalt ist, der uns wirklich wichtig ist.

Pro

• Es funktioniert auch mit deaktiviertem JavaScript.
• Es ist schwieriger für Bots, die E-Mail-Adresse zu erhalten.
• Es kann von assistiven Technologien gelesen werden.

Nachteil

• Es funktioniert nicht mit einem `mailto:`-Link.

Der JavaScript-Ansatz

In diesem Beispiel verwenden wir JavaScript, um unsere E-Mail-Adresse unleserlich zu machen. Wenn die Seite dann geladen wird, macht JavaScript die E-Mail-Adresse wieder lesbar. So können unsere Benutzer die E-Mail-Adresse erhalten.

Die einfachste Lösung verwendet den Base64-Encoding-Algorithmus, um die E-Mail-Adresse zu dekodieren. Zuerst müssen wir die E-Mail-Adresse in Base64 kodieren. Wir können dafür Websites wie Base64Encode.org nutzen. Geben Sie Ihre E-Mail-Adresse so ein

Klicken Sie dann auf die Schaltfläche zum Kodieren. Mit diesen wenigen Zeilen JavaScript dekodieren wir die E-Mail-Adresse und setzen das `href`-Attribut im HTML-Link

var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));

Dann müssen wir sicherstellen, dass der E-Mail-Link die `id="contact"` im Markup enthält, so:

<a id="contact" href="">Send me an Email</a>

Wir verwenden die Methode `atob`, um einen String mit Base64-kodierten Daten zu dekodieren. Eine Alternative ist die Verwendung eines einfachen Verschlüsselungsalgorithmus wie der Caesar-Verschlüsselung, die in JavaScript relativ einfach zu implementieren ist.

Pro

• Es ist für Bots schwieriger, die E-Mail-Adresse zu erhalten, besonders wenn Sie einen Verschlüsselungsalgorithmus verwenden.
• Es funktioniert mit einem `mailto:`-Link.
• Es kann von assistiven Technologien gelesen werden.

Nachteil

• JavaScript muss im Browser aktiviert sein, sonst ist der Link leer.

Der Embedded-Formular-Ansatz

Kontaktformulare sind überall. Sie haben sicher schon einmal eines davon benutzt. Wenn Sie eine Möglichkeit wünschen, dass Leute Sie direkt kontaktieren können, ist eine der möglichen Lösungen die Implementierung eines Kontaktformular-Dienstes auf Ihrer Website.

Formspree ist ein Beispiel für einen Dienst, der Ihnen alle Vorteile eines Kontaktformulars bietet, ohne sich um serverseitigen Code kümmern zu müssen. Wufoo auch. Tatsächlich gibt es hier eine Menge, die Sie in Betracht ziehen können, um die Übermittlung von Kontaktformularen für Sie zu bearbeiten.

Der erste Schritt zur Nutzung eines Formular-Dienstes ist die Anmeldung und Erstellung eines Kontos. Die Preise variieren natürlich, ebenso wie die angebotenen Funktionen zwischen den Diensten. Aber eines, was die meisten von ihnen tun, ist, Ihnen einen HTML-Snippet zur Verfügung zu stellen, um ein von Ihnen erstelltes Formular in jede Website oder App einzubetten. Hier ist ein Beispiel, das ich direkt aus einem Formular gezogen habe, das ich in meinem Formspring-Konto erstellt habe

<form action="https://formspree.io/f/[my-key]" method="POST">
  <label> Your email:
    <input type="email" name="email" />
  </label>
  <label> Your message:
    <textarea name="message"></textarea>
  </label>
  <!-- honeypot spam filtering -->
  <input type="text" name="_gotcha" style="display:none" />
  <button type="submit">Send</button>
</form>

In der ersten Zeile sollten Sie `action` basierend auf Ihrem Endpunkt anpassen. Dieses Formular ist ziemlich einfach, aber Sie können so viele Felder hinzufügen, wie Sie möchten.

Beachten Sie das versteckte Eingabefeld in Zeile 9. Dieses Eingabefeld hilft Ihnen, die von normalen Benutzern und Bots gemachten Einreichungen zu filtern. Tatsächlich wird Formspree, wenn das Backend eine Einreichung mit dieser Eingabe sieht, diese verwerfen. Ein normaler Benutzer würde das nicht tun, also muss es ein Bot sein.

Pro

• Ihre E-Mail-Adresse ist sicher, da sie nicht öffentlich ist.
• Es funktioniert auch mit deaktiviertem JavaScript.

Nachteil

• Verlässt sich auf einen Drittanbieter-Dienst (was je nach Ihren Bedürfnissen ein Vorteil sein kann)

Es gibt noch einen weiteren Nachteil dieser Lösung, den ich jedoch aus der Liste weggelassen habe, da er ziemlich subjektiv ist und von Ihrem Anwendungsfall abhängt. Bei dieser Lösung teilen Sie Ihre E-Mail-Adresse nicht. Sie geben den Leuten eine Möglichkeit, Sie zu kontaktieren. Was ist, wenn Leute Sie per E-Mail erreichen *möchten*? Was ist, wenn Leute nach Ihrer E-Mail-Adresse suchen und kein Kontaktformular wollen? Ein Kontaktformular könnte in einer solchen Situation eine übertriebene Lösung sein.

Fazit

Wir sind am Ende angelangt! In diesem Tutorial haben wir verschiedene Lösungen für das Problem des Online-E-Mail-Sharings besprochen. Wir haben verschiedene Ideen durchlaufen, die HTML-Code, JavaScript und sogar einige Online-Dienste wie Formspree zum Erstellen von Kontaktformularen beinhalten. Am Ende dieses Tutorials sollten Sie sich der Vor- und Nachteile der gezeigten Strategien bewusst sein. Nun liegt es an Ihnen, die am besten geeignete für Ihren spezifischen Anwendungsfall auszuwählen.