E-Mail-Adresse vor Bots ausblenden - Mailto aufbewahren:

Question 1

tl; dr

Verstecken Sie die E-Mail-Adresse vor Bots, ohne Skripte zu verwenden, und behalten Sie die mailto:Funktionalität bei. Die Methode muss auch Screenreader unterstützen.

Zusammenfassung

E-Mail- Verschleierung ohne Verwendung von Skripten oder Kontaktformularen
Die E-Mail-Adresse muss für den menschlichen Betrachter vollständig sichtbar sein und die mailto:Funktionalität beibehalten
Die E-Mail-Adresse darf nicht in Bildform vorliegen .
Die E-Mail-Adresse muss "vollständig" vor Spam-Crawlern, Spam-Bots und anderen Harvester-Typen verborgen sein

Gewünschter Effekt:

Bitte keine Skripte . Im Projekt werden keine Skripte verwendet, und ich möchte, dass dies auch so bleibt .
Die E-Mail-Adresse wird entweder auf der Seite angezeigt oder kann nach einer Benutzerinteraktion wie dem Öffnen eines Modals einfach angezeigt werden.
Der Benutzer kann auf die E-Mail-Adresse klicken, die wiederum die mailto:Funktionalität auslösen würde .
Durch Klicken auf die E-Mail wird die E-Mail-Anwendung des Benutzers geöffnet.

Mit anderen Worten, mailto:Funktionalität muss funktionieren.
Die E-Mail-Adresse ist nicht sichtbar oder wird nicht als E-Mail-Adresse für Bots identifiziert (einschließlich der Seitenquelle).
Ich habe keinen Posteingang voller Spam

Was bedeutet NICHT Arbeit

Hinzufügen eines Kontaktformulars - oder eines ähnlichen - anstelle der E-Mail-Adresse

Ich hasse Kontaktformulare . Ich fülle selten ein Kontaktformular aus. Wenn es keine E-Mail-Adresse gibt, suche ich nach einer Telefonnummer, und wenn diese nicht vorhanden ist, suche ich nach einem alternativen Dienst. Ich würde ein Kontaktformular nur ausfüllen, wenn ich unbedingt muss.
Ersetzen der Adresse durch ein Bild der Adresse

Dies schafft einen RIESIGEN Nachteil für jemanden, der einen Screenreader verwendet ( bitte denken Sie an die Sehbehinderten in Ihren zukünftigen Projekten ).

Außerdem wird die mailto:Funktionalität entfernt, es sei denn, Sie machen das Bild anklickbar und fügen dann die mailto:Funktionalität als hreffür den Link hinzu. Dies macht jedoch den Zweck zunichte und die E-Mail ist jetzt für Bots sichtbar.

Was könnte funktionieren:

Clevere Verwendung von pseudo-elementsinCSS
Lösungen, die base64Codierung verwenden
Aufteilen der E-Mail-Adresse und Verteilen der Teile auf das Dokument, dann Zusammenfügen in einem Modal, wenn der Benutzer auf eine Schaltfläche klickt (dies umfasst wahrscheinlich mehrere CSSKlassen und die Verwendung von anchor tags).
htmlAttribute ändern überCSS

@MortezaAsadi hat die Möglichkeit in den Kommentaren unten anmutig angesprochen. Dies ist der Link zum vollständigen - Der Artikel ist aus dem Jahr 2012:

Was wäre, wenn wir CSS verwenden könnten, um HTML-Attribute zu ändern?
Andere kreative Lösungen, die über meinen Wissensbereich hinausgehen.

Die Frage:

Wäre es möglich, die Effizienz (dh so wenig Spam wie möglich) der oben genannten E-Mail-Verschleierungsmethoden zu erhöhen, indem zwei oder mehr der Fixes kombiniert (oder sogar neue Fixes hinzugefügt werden), während:

A- Aufrechterhaltung der mailto:Funktionalität; und

B- Unterstützung von Screenreadern

Bearbeiten:

Viele der folgenden Antworten und Kommentare werfen eine sehr gute Frage auf und zeigen gleichzeitig, dass es unmöglich ist, dies ohne irgendeine Art von zu tunjs

Die gestellte / implizierte Frage lautet:

Warum nicht verwenden js?

Die Antwort ist, dass ich allergisch bin js

Scherz beiseite,

Die drei Hauptgründe, warum ich diese Frage gestellt habe, sind:

Kontaktformulare werden immer mehr als Ersatz für die Angabe einer E-Mail-Adresse akzeptiert - was sie nicht sollten.
Wenn dies ohne Skripterstellung möglich ist, sollte dies ohne Skripterstellung erfolgen.
Neugier: (da ich jsderzeit tatsächlich eine der Korrekturen verwende) Ich wollte sehen, ob die Diskussion der Angelegenheit zu einer besseren Vorgehensweise führen würde.

Question 2

Das Problem bei Ihrer Anfrage sind speziell die "unterstützenden Screenreader", da Screenreader per Definition eine Art "Bot" sind. Wenn ein Bildschirmleser in der Lage sein muss, die E-Mail-Adresse zu interpretieren, kann ein Seiten-Crawler sie ebenfalls interpretieren.

Außerdem soll der Punkt des mailtoAttributs der Standard für die Erstellung von E-Mail-Adressen im Web sein. Zu fragen, ob es einen zweiten Weg gibt, ist eine Art zu fragen, ob es einen zweiten Standard gibt.

Das Durchführen von Skripten hat immer noch das gleiche Problem wie nach dem Laden der Seite, das Skript wurde ausgeführt und die E-Mail-Adresse im DOM gerendert (es sei denn, Sie geben die E-Mail-Adresse an on click oder etwas anderes an). In beiden Fällen haben Screenreader weiterhin Probleme damit, da sie noch nicht geladen sind.

Holen Sie sich einfach einen E-Mail-Dienst mit einem halbwegs anständigen Spam-Filter und geben Sie eine Standard-Betreffzeile an, die Sie leicht in Ihrem Posteingang sortieren können.

<a href="mailto:no-one@no-where.com?subject=Something to filter on">Email me</a>

Was Sie fragen, ist, ob der Standard zwei Möglichkeiten hat, etwas zu tun, eine für Bots und die andere für Nicht-Bots. Die Antwort ist, dass dies nicht der Fall ist und Sie nur gegen die Bots kämpfen müssen, so gut Sie können.

Question 3

Das Besiegen von E-Mail-Bots ist eine schwierige Frage. Vielleicht möchten Sie den Abschnitt Gegenmaßnahmen zum Ernten von E-Mail-Adressen auf Wikipedia lesen.

Meine Hintergrundgeschichte ist, dass ich einen Suchbot geschrieben habe. Bei der ersten Ausführung vor vielen Jahren wurden mehr als 105.000 URLs gecrawlt. Ich habe dabei gelernt, dass Web-Crawler-Bots buchstäblich ALLES sehen , was Text ist, der auf einer Webseite erscheint. Bots lesen alles außer Bildern.

Spam kann aus folgenden Gründen nicht einfach per Code gestoppt werden:

CSS & JS sind bei Verwendung des mailto: -Tags irrelevant. Bots suchen speziell auf HTML-Seiten nach dem Schlüsselwort "mailto:". Alles von diesem Doppelpunkt bis zum nächsten einfachen oder doppelten Anführungszeichen (je nachdem, was zuerst eintritt) wird als E-Mail-Adresse angesehen. E-Mail-Adressen von HTML-Entitäten können - wie im obigen Beispiel - mithilfe einer umgekehrten ASCII-Methode / -Funktion schnell übersetzt werden. Wenn Sie das obige JavaScript-Code-Snippet ausführen, wird die Zeichenfolge, die mit: & # 121; & # 111; & # 117; & # 114; ... beginnt, schnell in ... "yourname@domain.com" umgewandelt. (Mein Suchbot hat hrefs mit mailto: E-Mail-Adressen weggeworfen, da ich URLs für Webseiten und keine E-Mail-Adressen wollte.)
Wenn eine Seite einen Bot zum Absturz bringt, stimmt der Bot-Autor den Bot so ab, dass der Absturz unter Berücksichtigung dieser Seite behoben wird, sodass der Bot in Zukunft nicht mehr auf dieser Seite abstürzt. So wird ihr Bot schlauer.
Bot-Autoren können Bots schreiben, die alle bekannten Variationen von E-Mail-Adressen generieren ... ohne Seiten zu crawlen und niemals Starter-E-Mail-Adressen zu verwenden. Dies ist zwar möglicherweise nicht machbar, aber mit den heutigen CPUs mit hoher Kernanzahl (die über einen Thread-Thread verfügen und mit 4+ GHz betrieben werden) sowie der Verfügbarkeit von verteiltem Cloud-basiertem Computing und sogar Supercomputern nicht unvorstellbar. Es ist denkbar, dass jemand jetzt eine Bot-Farm erstellen kann, um alle zu spammen, ohne die E-Mail-Adresse eines anderen zu kennen. Vor 20 Jahren wäre das unverständlich gewesen.
Kostenlose E-Mail-Anbieter haben in der Vergangenheit ihre kostenlosen Benutzerkonten an ihre Werbetreibenden verkauft. In der Vergangenheit gab die einfache Anmeldung für ein kostenloses E-Mail-Konto automatisch grünes Licht für die Zustellung von Spam an diese E-Mail-Adresse ... ohne diese E-Mail-Adresse jemals online zu verwenden. Ich habe das schon mehrmals mit berühmten Firmennamen gesehen. (Ich werde keine Namen erwähnen.)
Das Schlüsselwort mailto: ist Teil dieses IETF-RFC , in dem Browser so erstellt werden, dass die Standard-E-Mail-Clients automatisch über Links mit diesem Schlüsselwort gestartet werden. JavaScript muss verwendet werden, um den Startvorgang dieser Anwendung zu unterbrechen, wenn dies geschieht.

Ich denke nicht, dass es möglich ist, 100% von Spam zu stoppen, während herkömmliche E-Mail-Server verwendet werden, ohne Filter auf dem E-Mail-Server zu verwenden und möglicherweise Bilder zu verwenden.

Es gibt eine Alternative ... Sie können auch einen Chat-ähnlichen E-Mail-Client erstellen, der intern auf einer Website ausgeführt wird. Es wäre wie der Chat-Client von Facebook. Es ist "wie E-Mail", aber nicht wirklich E-Mail. Es ist einfach 1-zu-1-Instant Messaging mit einer Archivierungsfunktion, die beim Anmelden automatisch geladen wird. Da es über Funktionen zum Anhängen von Dokumenten und zum Verknüpfen von Dokumenten verfügt, funktioniert es wie E-Mail ... jedoch ohne Spam. Solange Sie keine extern zugängliche API erstellen, handelt es sich um ein geschlossenes System, in das keine Personen Spam senden können.

Wenn Sie vorhaben, sich an streng traditionelle E-Mails zu halten, ist es möglicherweise am besten, Apaches SpamAssassin auf dem E-Mail-Server eines Unternehmens auszuführen .

Sie können auch versuchen, mehrere Strategien wie oben aufgeführt zu kombinieren, um es E-Mail-Erntemaschinen zu erschweren, E-Mail-Adressen von Ihren Webseiten abzurufen. Sie stoppen nicht 100% des Spam, 100% der Zeit ... und ermöglichen 100% der Bildschirmleser, für blinde Besucher zu arbeiten.

Sie haben einen wirklich guten ersten Blick darauf geworfen, was mit herkömmlichen E-Mails nicht stimmt! Ein großes Lob dafür!

Ein guter Bildschirmleser ist JAWS von Freedom Scientific . Ich habe das schon einmal benutzt, um zu hören, wie meine Webseiten von blinden Benutzern gelesen werden. (Wenn Sie eine männliche Stimme hören, die beide Aktionen [wie das Klicken auf einen Link] und Text liest, versuchen Sie, 1 Stimme in eine weibliche zu ändern, sodass 1 Stimme Aktionen liest und eine andere Text liest. Dadurch ist es einfacher zu hören, wie die Webseite gelesen wird das visuell unparteiisch.)

Viel Glück mit Ihrer E-Mail-Adresse Ernten Sie Gegenmaßnahmen !

Question 4

Hier ist ein Ansatz, der JavaScript verwendet, jedoch einen relativ geringen Platzbedarf aufweist. Es ist auch sehr "Ghetto", und im Allgemeinen würde ich einen Ansatz mit Inline-JS im HTML nicht empfehlen, außer Sie haben eine extreme Zurückhaltung, JS überhaupt zu verwenden.

<a
  href="#"
  data-contact="bGUtZW1haWxAdGhlLWRvbWFpbi5jb20="
  data-subj="QW4gQW1hemluZyBTdWJqZWN0"
  onfocus="this.href = 'mailto:' + atob(this.dataset.contact) + '?subject=' + atob(this.dataset.subj || '')"
  >
  Send an email
</a>

Erweitern Sie das Snippet

data-contactist die base64-codierte E-Mail-Adresse. Und data-subjist ein optionales Base64-codiertes Thema.

Die größte Herausforderung dabei ist, dass CSS HTML-Attribute nicht ändern kann. (Der Artikel, den Sie verlinkt haben, ist eine "Pie-in-the-Sky" -Überlegung und hat keinen Einfluss darauf, was heute oder in naher Zukunft möglich ist.)

Der von Ihnen erwähnte Ansatz für HTML-Entitäten oder eine Variation davon ist wahrscheinlich die einfachste Option, die eine gewisse Wirksamkeit aufweist. Darüber hinaus ist der iframeAnsatz clever und der Server-Redirect-Ansatz ziemlich beeindruckend. Alle drei sind jedoch anfällig für Bots:

Die HTML-Entitäten müssen nur konvertiert werden (und das ist einfach zu erkennen).
Das Dokument, auf das der Iframe verweist, kann einfach befolgt werden
Die Serverumleitung kann auch einfach befolgt werden

Mit dem oben beschriebenen Ansatz ist die Verwendung einer Base64-codierten E-Mail-Adresse in einem data-contactAttribut sehr "einmalig" - solange der Scrapper nicht speziell für Ihre Site entwickelt wurde, sollte er funktionieren.

Question 5

Einfach + Viele @ + Bearbeitbar ohne Werkzeuge

<a href="mailto:user@domain@@com"
   onmouseover="this.href=this.href.replace('@@','.')">
   Send email
</a>

Erweitern Sie das Snippet

Question 6

Haben Sie darüber nachgedacht, Googles Recaptcha-Mailhide zu verwenden? https://www.google.com/recaptcha/admin#mailhide

Die Idee ist, dass, wenn ein Benutzer auf das Kontrollkästchen klickt ( siehe nocaptcha unten ), die vollständige E-Mail-Adresse angezeigt wird.

Während Recaptcha traditionell nicht nur für Screenreader, sondern auch für Menschen schwierig ist, gibt es die Rolle von Googles Nocaptcha Recaptcha, über die Sie hier lesen können, da sie sich auf Zugänglichkeitstests beziehen. Es scheint in Bezug auf Bildschirmleser vielversprechend zu sein, da es aus ihrer Sicht als traditionelles Kontrollkästchen dargestellt wird.

Beispiel 1 - Nicht sicher, aber zur einfachen Veranschaulichung der Idee

Hier ist ein Code als Beispiel, ohne Mailhide zu verwenden, aber etwas mit recaptcha selbst zu implementieren: https://jsfiddle.net/43fad8pf/36/

<div class="container">
    <div id="recaptcha"></div>
</div>
<div id="email">
    Verify captcha to get e-mail
</div>

function createRecaptcha() {
    grecaptcha.render("recaptcha", {sitekey: "6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG", theme: "light", callback: showEmail});
}
 createRecaptcha();

function showEmail() {
    // ideally you would do server side verification of the captcha and then the server would return the e-mail
  document.getElementById("email").innerHTML = "email@something.com";
}

Hinweis: In meinem Beispiel habe ich die E-Mail in einer Javascript-Funktion. Im Idealfall sollten Sie das Recaptcha auf der Serverseite validieren lassen und die E-Mail zurücksenden, andernfalls kann der Bot sie einfach in den Code aufnehmen.

Beispiel 2 - Serverseitige Überprüfung und Rückgabe von E-Mails

Wenn wir ein ähnliches Beispiel verwenden, erhalten wir zusätzliche Sicherheit: https://designracy.com/recaptcha-using-ajax-php-and-jquery/

function showEmail() {
    /* Check if the captcha is complete */
    if ($("#g-recaptcha-response").val()) {
        $.ajax({
            type: ‘POST’,
            url: "verify.php", // The file we’re making the request to
            dataType: ‘html’,
            async: true,
            data: {
                captchaResponse: $("#g-recaptcha-response").val() // The generated response from the widget sent as a POST parameter
        },
        success: function (data) {
            alert("everything looks ok. Here is where we would take 'data' which contains the e-mail and put it somewhere in the document");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("You’re a bot");
        }
    });
} else {
    alert("Please fill the captcha!");
}
});

Wo verify.php ist:

$captcha = filter_input(INPUT_POST, ‘captchaResponse’); // get the captchaResponse parameter sent from our ajax

/* Check if captcha is filled */
if (!$captcha) {
    http_response_code(401); // Return error code if there is no captcha
}
$response =     file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=YOUR-SECRET-KEY-HERE&amp;amp;response=" . $captcha);
if ($response . success == false) {
echo ‘SPAM’;
http_response_code(401); // It’s SPAM! RETURN SOME KIND OF ERROR
} else {
// Everything is ok, should output this in json or something better, but this is an example
    echo 'email@something.com'; 
}

Question 7

Menschen, die Schaber schreiben, möchten ihre Schaber so effizient wie möglich gestalten. Daher werden keine Stile, Skripte und andere externe Ressourcen heruntergeladen. Es gibt keine mir bekannte Methode, um einen mailtoLink mit CSS zu setzen. Außerdem haben Sie ausdrücklich gesagt, dass Sie den Link nicht mit Javascript festlegen möchten.

Wenn Sie darüber nachdenken, welche anderen Arten von Ressourcen es gibt, gibt es auch externe Dokumente (dh HTML-Dokumente, die Iframes verwenden). Fast kein Schaber würde sich die Mühe machen, den Inhalt von iframes herunterzuladen. Daher können Sie einfach Folgendes tun:

index.html:

<iframe src="frame.html" style="height: 1em; width: 100%; border: 0;"></iframe>

frame.html:

My email is <a href="mailto:me@example.com" target="_top">me@example.com</a>

Für menschliche Benutzer sieht der Iframe wie normaler Text aus. Iframes sind standardmäßig inline und transparent, daher müssen nur der Rahmen und die Abmessungen festgelegt werden. Sie können die Größe des Iframes nicht an die Größe seines Inhalts anpassen, ohne Javascript zu verwenden. Das Beste, was wir tun können, ist, ihm vordefinierte Abmessungen zu geben.

Question 8

Erstens denke ich nicht, dass es funktionieren wird, etwas mit CSS zu tun. Alle Bots (außer Googles Crawler) ignorieren einfach das gesamte Styling auf Websites. Jede Lösung muss mit JS oder serverseitig funktionieren.

Eine serverseitige Lösung könnte darin bestehen, einen <a>Link zu einem neuen Tab zu erstellen , der einfach zum gewünschten Tab umleitet mailto:

Das sind alle meine Ideen für jetzt. Ich hoffe es hilft.

Question 9

Eine kurze Antwort, um alle Ihre Anforderungen zu erfüllen, ist, dass es unmöglich ist

Einige der hier beantworteten skriptbasierten Optionen funktionieren möglicherweise für bestimmte Bots, aber Sie wollten kein Skript, also können Sie dies nicht.

Question 10

PHP-Lösung

function printEmail($email){
    $email = '<a href="mailto:'.$email.'">'.$email.'</a>';
    $a = str_split($email);
    return "<script>document.write('".implode("'+'",$a)."');</script>";
}

Verwenden

echo printEmail('test@gmail.com');

Ergebnis

<script>document.write('<'+'a'+' '+'h'+'r'+'e'+'f'+'='+'"'+'m'+'a'+'i'+'l'+'t'+'o'+':'+'t'+'e'+'s'+'t'+'@'+'g'+'m'+'a'+'i'+'l'+'.'+'c'+'o'+'m'+'"'+'>'+'t'+'e'+'s'+'t'+'@'+'g'+'m'+'a'+'i'+'l'+'.'+'c'+'o'+'m'+'<'+'/'+'a'+'>');</script>

PS-Anforderung: Der Benutzer muss JavaScript aktiviert haben

Question 11

Die einzige Methode, die ich als effektiv empfunden habe, ist die Verwendung mit CSS wie folgt:

<a href="mailto:myemail@ignore-domain.com">myemail@<span style="display:none;">ignore-</span>domain.com

und schreiben Sie dann ein Javascript, um das ignoreme-Wort href="mailto:..."mit Regex aus dem Attribut zu entfernen . Dadurch werden E-Mails vor dem Bot ausgeblendet, da das ignore-Wort vor der realen Domain angehängt wird. Dies funktioniert auf dem Bildschirmleser. Wenn der Benutzer auf den Link klickt, wird das ignore-Wort aus dem hrefAttribut entfernt, sodass die echte E-Mail geöffnet wird.

Diese Methode hat bei mir bis heute sehr effektiv funktioniert. Sie können mehr darüber lesen - http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/