Stoppen der Bots mit Javascript

Kurzzusammenfassung

ist eine praktische Methode, um Spam zu stoppen, aber es ist auch unzugänglich. Die Verwendung von Javascript zum Entfernen kritischer Formularattribute, das dynamische Laden von Formularinhalten und das Ersetzen von Senden-Schaltflächen kann eine effektive Alternative sein, die die Barrierefreiheit Ihrer Websites gewährleistet.

Zuvor hatte ich .NET MVC als Framework für die CANAXESS-Website verwendet. Das Kontaktformular musste zugänglich sein und konnte sich auf kein Plugin verlassen, das die Fähigkeit eines Benutzers, uns zu kontaktieren, beeinträchtigen würde. Das Formular hatte ein CSS-verstecktes Formularfeld, das die Honeypot-Technik und die serverseitige Logik verwendete, die alle Einsendungen ablehnten, wenn das Formularfeld Daten enthielt.

Die Theorie, dass Bots nicht verstehen können, was ein legitimes Feld ist und was nicht, identifiziert und vervollständigt der Bot alle Eingabefelder und sendet das Formular. Wenn das Feld Daten enthält, gehen wir davon aus, dass ein Benutzer das Formular nicht gesendet und die gesamte Eingabe verworfen hat, da er nicht zum ausgeblendeten Formularfeld navigieren konnte.

Honeypot-Techniken werden immer als effektiver Weg identifiziert, um Spam-E-Mails zu stoppen, und für mich funktionierte die Technik in Ordnung, um den Spam auf ein überschaubares Niveau pro Tag zu reduzieren. In meinem Mail-Client würde ich alle Spam-E-Mails auswählen und sie in Massen löschen, alles ziemlich einfach, wenn es zeitaufwändig ist.

Umzug nach Netlify #

Als Teil der sich ändernden Infrastruktur wurde die CANAXESS-Website nach Netlify verschoben, was bedeutete, dass die vorhandene Spam-Filtertechnik, auf die man sich stützte, überdacht werden musste, da die vorherige Site in .NET erstellt und in einer .NET-Umgebung gehostet wurde.

Anfangs habe ich mich für keinen Spam-Schutz entschieden und nur gesehen, wie es gelaufen ist. Wie zu erwarten, kamen die Spam-Posts dick und schnell.

Verwenden eines Honeypots #

Netlify bietet eine Honeypot-Funktion, die der gleichen Technik folgt, ein verstecktes Eingabefeld zu verwenden.

<form name="contactSubmission" data-netlify="true" 
netlify-honeypot="bot-field">
<input class="actual-hidden" name="bot-field" tabindex="-1">

Die Technik funktionierte sehr effektiv; Keine legitimen E-Mails erreichten jemals den regulären E-Mail-Ordner.

Aber der Spam-Ordner erzählte eine andere Geschichte. Der Netlify-Ansatz bedeutete, dass nur 10-20 E-Mails gleichzeitig zurückgegeben wurden, wobei Paging verwendet wurde, um zu den nächsten zehn E-Mails zu wechseln. Es gab keine Massenlöschfunktion und ich musste einzelne löschen.

Dies war unglaublich zeitaufwändig und mühsam. Ich habe ein Javascript-Bookmarklet geschrieben, von dem ich hoffte, dass es einfacher wird, alle Kontrollkästchen-Steuerelemente auf der Seite zu überprüfen und alle Datensätze zu löschen.

Leider erkannte die Seitenlogik nicht, dass mein Bookmarklet physisch mit jedem Steuerelement interagiert hatte, und erlaubte nicht die Auswahl aller E-Mails in Massen.

Ich konnte auch nicht sicher sein, ob E-Mails im Spam-Ordner falsch positiv waren – falsch identifizierte E-Mails, was bedeutete, dass ich alle E-Mails durchforsten musste, um sie zu bestätigen.

Discounting re #

Netlify bietet Google re an und ich habe zunächst über seine Verwendung nachgedacht, da die E-Mails täglich zunahmen.

Die Wahrnehmung eines Web-Accessibility-Unternehmens, das eine bekannte unzugängliche Methode verwendet, um Menschen zu kontaktieren, war jedoch kein guter Blick.

Ich habe bereits darüber geschrieben, wie schrecklich eine Technik ist, um die Zugänglichkeit einer Website zu untergraben, und dachte, wenn ich dieses Problem nicht lösen könnte, welche Hoffnung gibt es für andere.

Ich beschloss, meinen Weg daraus zu programmieren.

Machen Sie das Formular für Bots weniger attraktiv #

Ich musste das Kontaktformular weniger wie ein Kontaktformular und weniger attraktiv für Bots aussehen lassen. Ich habe begonnen, das Attribut method für das Formularelement zu entfernen. Wenn es kein method -Attribut gibt, dachte ich, das Formular könnte nicht gesendet werden.

<form name="contactSubmission" data-netlify="true" 
netlify-honeypot="bot-field">

Leider hat Netlify das Methodenattribut bei der Bereitstellung der Site wieder auf das Formular angewendet, obwohl das Attribut entfernt wurde.

<form name="contactSubmission" method="post">

Verwenden von jQuery zum Entfernen eines Attributs #

Ich habe beschlossen, Javascript (jQuery) zu verwenden, um das Attribut method dynamisch zu entfernen, nachdem die Seite geladen wurde. Mit dem jQuery ready-Ereignis wird das Formularelement ausgewählt und das Attribut method entfernt.

$(function(){
$("#contactSubmission").removeAttr("method");
});

Ich benötigte dann eine Möglichkeit, das Attribut vor dem Senden wieder zum Formularelement hinzuzufügen. Ich musste es in einer Sequenz wieder hinzufügen, um sicherzustellen, dass das Attribut vorhanden ist, bevor das Formular gesendet wird, da sonst ein Fehler auftritt und der Benutzer auf ein fehlerhaftes Kontaktformular stößt, kaum ideal!

Ersetzen der Senden-Schaltfläche #

Außerdem hatte ich beschlossen, auch die Schaltfläche submit zu entfernen. Wenn Sie herausfinden, ob es keine submit -Schaltfläche gibt, kann das Formular nicht über einen kopflosen Browser gesendet werden (wenn Spammer diese Technik verwenden), da es weniger wie ein Kontaktformular als vielmehr wie eine Sammlung von Eingabefeldern aussieht.

Die Formularübermittlung würde nur programmgesteuert über ein reguläres button -Element erfolgen.

<input type="button" value="Contact CANAXESS" 
class="contactForm-button submit">

Hinzufügen des Methodenattributs zum Senden #

Die reguläre Schaltfläche hatte einen click Ereignishandler, der das Methodenattribut und den Wert wieder zum Formularelement hinzufügte.

Wenn auf die Schaltfläche geklickt wird, wird das Attribut hinzugefügt, es kann jedoch vorkommen, dass das Timing von Skriptelementen dem entspricht, was ich wollte.

Um dies zu überwinden, habe ich ein Timer-Intervall hinzugefügt. Dadurch wird das Formularelement alle 100 Millisekunden wiederholt auf das Attribut method überprüft. Wenn kein Attribut method vorhanden ist, wird das Formular nicht gesendet.

$("input.contactForm-button").click(function(){
$("#contactSubmission").attr("method", "post");
var checkExist = setInterval(function(){ 
var attr = $("#contactSubmission").attr("method");
if (typeof attr !== typeof undefined && attr !== false)
{
$("#contactSubmission").submit();
clearInterval(checkExist);
}
}, 100);
});

Die Formularübermittlung erfolgt nur, wenn das Attribut method vorhanden ist, und dies würde programmgesteuert erfolgen. Wenn das Formular gesendet wurde, endete der Intervalltimer.

clearInterval(checkExist);

Ich dachte, dies sei eine ziemlich effektive Möglichkeit, ein Kontaktformular zu überarbeiten, um Bots zu stoppen, aber mein Vertrauen war nicht von Dauer. Ich kam ein paar Stunden später zurück, um Spam-E-Mails wieder zu sammeln.

Die Formularübermittlung erfolgt über HTTP #

Und dann dämmerte es mir, Bots besuchen wahrscheinlich nicht einmal die Seite über den Browser, sie kümmern sich nicht um das gesamte jQuery-Skript, das auf der Clientseite ausgeführt wird, um Elemente zu entfernen.

Das Methodenattribut existiert, wenn die Seite geladen wird, und von dort aus ist es ein einfaches Kratzen des HTML-Codes und Senden des Formulars über einen HTTP-Post, ohne jemals mit der Seite zu interagieren.

Und es war diese Erkenntnis, die mich dann dazu brachte, die Technik zu identifizieren, die die Spam-E-Mails nicht nur verlangsamen, sondern auch stoppen würde. Seit ich diese Technik angewendet habe, hatte ich keine E-Mails, keine, Zilch.

Trennen der Seite vom Formular #

Die Technik lädt das Formularfragment über Javascript, nachdem die Seite geladen wurde. Da Spam-Bots wahrscheinlich keinen kopflosen Browser verwenden, um auf der Kontaktseite zu navigieren und das Formular zu senden, habe ich das Formular stattdessen nur angezeigt, wenn die Seite aus einem Browser geladen wurde.

Die im Browser gerenderte Kontaktseite ist eine Seite, besteht aber in Wirklichkeit aus zwei Teilen. Die Hauptseite mit einem Platzhalter für die Formularkomponente und den Formularinhalt selbst.

<div></div>

Laden des Formulars auf Seite laden #

Wenn die Seite geladen wird, lädt ein jQuery ready-Ereignis das zusätzliche Formularfragment fast sofort in den Formularcontainer DIV.

Die Formularfragmentseite wird von einem Bot niemals identifiziert, da die erste Seite, die der Bot sieht, kein Formularelement enthält.

<script>
$(function(){
$("#formContainer").load("formfragment.html");
});
</script>

Zusammenfassend #

Die Technik erfordert Javascript, um zu funktionieren. Da Javascript ein akzeptierter Teil der Webentwicklung geworden ist, denke ich, dass es eine realistische Lösung ist, um Spam in bestimmten Situationen zu stoppen.

Die andere Technik der Verwendung von Honeypot-Feldern ist immer problematisch, da sie aus meiner Erfahrung nicht so effektiv war.

Spam würde immer noch einen Weg finden, und wenn ich ehrlich bin, kann die Honeypot-Technik nur als Spam-Limiter eingestuft werden, wodurch die Anzahl der Spam-Fälle verringert wird.

Während die Verwendung funktionieren würde und eine schnelle Lösung wäre, untergräbt ihre Verwendung die Zugänglichkeit des Webs für Menschen mit Behinderungen.

Durch das Entfernen des Kontaktformulars aus dem Rendern als Teil einer regulären HTTP-Get-Anforderung scheint die Sichtbarkeit für Bots erheblich verringert zu sein, und daher können Bots (und in meinem Fall nicht mehr) Spam über das Kontaktformular senden.

Dinge, die Sie ausprobieren sollten #

Unabhängig vom Framework, das Ihre Website verwendet, versuchen Sie diese Ansätze, wenn Ihr Kontaktformular durch Spam kompromittiert wird:

• Trennen Sie die Seite und das Formular
• Laden Sie das Formular, nachdem die Seite geladen wurde
• Senden Sie Formulare nur programmgesteuert mit button -Elementen
• Entfernen Sie das method -Attribut in Formularen und fügen Sie es als Teil der Formularübermittlung hinzu