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

Spammer sind heutzutage eine große Sache. Wenn Sie Ihre Kontaktinformationen teilen möchten, ohne von Spam-E-Mails überhäuft zu werden, brauchen Sie eine Lösung. Ich bin vor ein paar Monaten auf dieses Problem gestoßen. Während ich recherchierte, wie ich es lösen könnte, fand ich verschiedene interessante Lösungen. Nur einer von ihnen war perfekt für meine Bedürfnisse.

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

Der traditionelle Fall

Angenommen, Sie haben eine Website. Sie möchten Ihre Kontaktdaten teilen, und Sie möchten nicht nur Ihre sozialen Links teilen. Die E-Mail-Adresse muss vorhanden sein. Einfach richtig? Du tippst so etwas ein:

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

Und dann stylen Sie es nach Ihrem Geschmack.

Nun, selbst wenn diese Lösung funktioniert, hat sie ein Problem. Es macht Ihre E-Mail-Adresse buchstäblich jedem zugänglich, einschließlich Website-Crawlern und allen Arten von Spam-Bots. Dies bedeutet, dass Ihr Posteingang mit Tonnen von unerwünschtem Müll wie Werbeangeboten oder sogar Phishing-Kampagnen überflutet werden kann.

Wir suchen einen Kompromiss. Wir wollen es Bots erschweren, an unsere E-Mail-Adressen zu kommen, aber für normale Benutzer so einfach wie möglich.

Die Lösung ist Verschleierung.

Verschleierung ist die Praxis, etwas schwer verständlich zu machen. Diese Strategie wird aus mehreren Gründen mit Quellcode verwendet. Einer davon ist das Verbergen des Zwecks des Quellcodes, um Manipulationen oder Reverse-Engineering zu erschweren. Wir werden uns zunächst verschiedene Lösungen ansehen, die alle auf der Idee der Verschleierung basieren.

Der HTML-Ansatz

Wir können uns Bots als Software vorstellen, die im Internet surft und Webseiten durchsucht. Sobald ein Bot ein HTML-Dokument erhält, interpretiert er den darin enthaltenen Inhalt und extrahiert Informationen. Dieser Extraktionsprozess wird aufgerufen Bahnkratzen. Wenn ein Bot nach einem Muster sucht, das mit dem E-Mail-Format übereinstimmt, können wir versuchen, es zu verschleiern, indem wir ein anderes Format verwenden. Zum Beispiel könnten wir HTML-Kommentare verwenden:

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

Es sieht chaotisch 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]

Vorteile:

• Einfach einzurichten.
• Es funktioniert mit deaktiviertem JavaScript.
• Es kann von Hilfstechnologien gelesen werden.

Nachteile:

• Spam-Bots können bekannte Sequenzen wie Kommentare überspringen.
• Mit a geht das nicht mailto: Link.

Der HTML- und CSS-Ansatz

Was wäre, wenn wir die Gestaltungskraft von CSS nutzen, um einige Inhalte zu entfernen, die nur platziert wurden, um Spam-Bots zu täuschen? Nehmen wir an, wir haben den gleichen Inhalt wie zuvor, aber dieses Mal platzieren wir a span Element innen:

If you want to get in touch, please drop me an email at PLEASE GO AWAY! [email protected]address.com
.

Dann verwenden wir die folgende CSS-Stilregel:

span.blockspam {
  display: none;
}

Der Endbenutzer sieht nur Folgendes:

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

…das ist der Inhalt, der uns wirklich am Herzen liegt.

Vorteile:

• Es funktioniert mit deaktiviertem JavaScript.
• Für Bots ist es schwieriger, an die E-Mail-Adresse zu kommen.
• Es kann von Hilfstechnologien gelesen werden.

Mit:

• Mit a geht das nicht mailto: Link.

Der JavaScript-Ansatz

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

Die einfachste Lösung verwendet den Base64-Verschlüsselungsalgorithmus, um die E-Mail-Adresse zu entschlüsseln. Zuerst müssen wir die E-Mail-Adresse in Base64 codieren. Wir können einige Websites wie verwenden Base64Encode.org um dies zu tun. Geben Sie Ihre E-Mail-Adresse wie folgt ein:

Klicken Sie dann auf die Schaltfläche zum Codieren. Mit diesen wenigen JavaScript-Zeilen entschlüsseln wir die E-Mail-Adresse und setzen die 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 enthält id="contact" im Markup so:

Send me an Email

Wir benutzen die atob Methode zum Decodieren einer Zeichenfolge von Base64-codierten Daten. Eine Alternative besteht darin, einen grundlegenden Verschlüsselungsalgorithmus wie den zu verwenden Caesar Chiffre, die in JavaScript ziemlich einfach zu implementieren ist.

Vorteile:

• Für Bots ist es komplizierter, an die E-Mail-Adresse zu gelangen, insbesondere wenn Sie einen Verschlüsselungsalgorithmus verwenden.
• Es funktioniert mit einem mailto: Link.
• Es kann von Hilfstechnologien gelesen werden.

Mit:

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

Der Embedded-Formular-Ansatz

Kontaktformulare gibt es überall. Einen davon haben Sie bestimmt schon einmal benutzt. Wenn Sie möchten, dass Personen Sie direkt kontaktieren können, ist eine der möglichen Lösungen die Implementierung eines Kontaktformulars auf Ihrer Website.

Formspree ist ein Beispiel für einen Service, der Ihnen alle Vorteile eines Kontaktformulars bietet, ohne sich um serverseitigen Code kümmern zu müssen. Wufoo ist auch. In der Tat, Hier ist ein Haufen, den Sie in Betracht ziehen können zur Bearbeitung von Kontaktformulareinreichungen für Sie.

Der erste Schritt zur Nutzung eines Formulardienstes besteht darin, sich anzumelden und ein Konto zu erstellen. Die Preise variieren natürlich ebenso wie die angebotenen Funktionen zwischen den Diensten. Die meisten von ihnen stellen Ihnen jedoch ein HTML-Snippet zur Verfügung, mit dem Sie ein von Ihnen erstelltes Formular in eine beliebige Website oder App einbetten können. Hier ist ein Beispiel, das ich direkt aus einem Formular gezogen habe, das ich in meinem Formspring-Konto erstellt habe

   Your email:
    
  
   Your message:
    
  
  
  
  Send

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

Beachten Sie das versteckte Eingabe-Tag in Zeile 9. Dieses Eingabe-Tag hilft Ihnen, die von normalen Benutzern und Bots gemachten Einsendungen zu filtern. Wenn das Back-End von Formspree eine Übermittlung mit dieser Eingabe sieht, wird sie tatsächlich verworfen. Ein normaler Benutzer würde das nicht tun, also muss es ein Bot sein.

Vorteile:

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

Mit:

• Verlässt sich auf einen Drittanbieterdienst (der je nach Bedarf ein Profi sein kann)

Diese Lösung hat noch einen weiteren Nachteil, aber ich habe ihn aus der Liste gestrichen, da er ziemlich subjektiv ist und von Ihrem Anwendungsfall abhängt. Mit dieser Lösung geben Sie Ihre E-Mail-Adresse nicht weiter. Sie geben den Menschen eine Möglichkeit, Sie zu kontaktieren. Was wäre, wenn Menschen wollen dir mailen? Was ist, wenn Leute nach Ihrer E-Mail-Adresse suchen und kein Kontaktformular möchten? Ein Kontaktformular kann in einer solchen Situation eine schwerfällige Lösung sein.

Zusammenfassung

Wir haben das Ende erreicht! In diesem Tutorial haben wir über verschiedene Lösungen für das Problem der Online-E-Mail-Freigabe gesprochen. Wir gingen verschiedene Ideen durch, die HTML-Code, JavaScript und sogar einige Online-Dienste wie Formspree zum Erstellen von Kontaktformularen beinhalteten. Am Ende dieses Tutorials sollten Sie alle Vor- und Nachteile der gezeigten Strategien kennen. Jetzt liegt es an Ihnen, das für Ihren spezifischen Anwendungsfall am besten geeignete auszuwählen.