zatrzymanie botów za pomocą Javascript

Szybkie podsumowanie

jest wygodną techniką zatrzymania spamu, ale jest również niedostępna. Używanie Javascript do usuwania krytycznych atrybutów formularza, dynamiczne ładowanie treści formularza i zastępowanie przycisków przesyłania może być skuteczną alternatywą, która zapewnia dostępność witryn.

wcześniej używałem. NET MVC jako frameworka dla strony CANAXESS. Formularz kontaktowy musiał być dostępny i nie mógł polegać na żadnej wtyczce, która negatywnie wpłynęłaby na możliwość kontaktu z nami przez użytkownika. Formularz miał ukryte pole formularza CSS wykorzystujące technikę honeypot i logikę po stronie serwera odrzucającą wszystkie zgłoszenia, jeśli pole formularza zawierało dane.

teoria, że boty nie mogą zrozumieć, co jest legalnym polem, a co nie, więc bot identyfikuje i uzupełnia wszystkie pola wejściowe i wysyła formularz. Jeśli pole zawiera dane, Zakładamy, że ponieważ użytkownik nie był w stanie przejść do ukrytego pola formularza, użytkownik nie przesłał formularza i odrzucił całe dane wejściowe.

techniki Honeypot są zawsze identyfikowane jako skuteczny sposób na zatrzymanie spamu i dla mnie technika działała dobrze, aby zredukować spam do łatwego do opanowania poziomu dziennie. W moim kliencie pocztowym wybrałbym wszystkie spamowe e-maile i usunął je masowo, wszystko całkiem prosto, jeśli jest czasochłonne.

przejście do Netlify #

w ramach zmiany infrastruktury witryna CANAXESS została przeniesiona do Netlify, co oznaczało, że istniejąca technika filtrowania spamu musiałaby zostać ponownie przemyślana, ponieważ poprzednia witryna została zbudowana w.NET i hostowana w środowisku. NET.

początkowo zdecydowałem się na brak ochrony przed spamem i po prostu zobaczyć, jak poszło. Jak można się spodziewać, spam posty przyszedł grube i szybkie.

Korzystanie z honeypot #

Netlify zapewnia funkcję honeypot, która stosuje tę samą technikę używania ukrytego pola wejściowego, a jeśli jest to wypełnione wstępnie, wszystkie wiadomości e-mail są wysyłane do folderu spam.

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

technika działała bardzo skutecznie; żadne uzasadnione e-maile nigdy nie docierały do zwykłego folderu e-mail.

ale folder ze spamem opowiedział inną historię. Były strony z wynikami spamu, gdzie wcześniej mogłem wybrać wszystkie e-maile na masowo i usunąć, podejście Netlify oznaczało, że tylko 10-20 e-maili zostało zwróconych naraz z stronicowaniem używanym do przejścia do następnych dziesięciu e-maili. Nie było funkcji masowego usuwania i musiałem usunąć pojedyncze.

to było niezwykle czasochłonne i żmudne. Napisałem skrypt JavaScript, który miałem nadzieję, że ułatwi sprawdzenie wszystkich kontrolek pól wyboru na stronie i usunięcie wszystkich rekordów.

niestety logika strony nie rozpoznała mojego bookmarkleta jako fizycznie wchodzącego w interakcję z każdą kontrolą i nie pozwalała na wybór wszystkich maili na mass.

nie mogłem też być pewien, czy jakieś maile w folderze spam są fałszywe – niepoprawnie zidentyfikowane e-maile, co oznaczało, że musiałem przeglądać wszystkie e-maile, aby potwierdzić.

dyskontowanie re #

netlify zapewnia Google re i początkowo rozważałem jego użycie, ponieważ e-maile zwiększały się codziennie.

jednak postrzeganie firmy zajmującej się dostępnością stron internetowych za pomocą znanej, niedostępnej dla ludzi metody kontaktu z nimi nie było dobrym wyglądem.

pisałem już wcześniej o tym, jak straszna jest technika podważania dostępności strony internetowej i pomyślałem, że jeśli nie mogę rozwiązać tego problemu, to jaka jest nadzieja dla innych.

postanowiłem zaprogramować sobie wyjście z tego.

spraw, aby formularz był mniej atrakcyjny dla botów #

musiałem sprawić, aby Formularz kontaktowy wyglądał mniej jak FORMULARZ KONTAKTOWY, a mniej atrakcyjny dla botów. Zacząłem usuwać atrybut method na elemencie formularza. Jeśli nie ma atrybutu method, pomyślałem, że Formularz nie może zostać wysłany.

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

niestety, mimo że atrybut został usunięty, Netlify zastosował atrybut metody z powrotem do formularza, gdy witryna była wdrażana i to było coś, czego nie mogłem kontrolować.

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

używając jQuery do usunięcia atrybutu #

zdecydowałem się użyć Javascript (jQuery) do dynamicznego usuwania atrybutu method po załadowaniu strony. Używając zdarzenia jQuery ready, element formularza jest zaznaczany, a atrybut method jest usuwany.

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

następnie wymagałem sposobu dodania atrybutu z powrotem do elementu formularza przed wysłaniem. Musiałem dodać go z powrotem w kolejności, aby upewnić się, że atrybut istnieje przed wysłaniem formularza, w przeciwnym razie Formularz się pomyli, a użytkownik natknie się na zepsuty formularz kontaktowy, trudno idealny!

zastępując przycisk submit #

dodatkowo postanowiłem usunąć również przycisk submit. Jeśli nie ma przycisku submit, formularz nie może być przesłany przez przeglądarkę bez głowy (jeśli spamerzy używali tej techniki), ponieważ wygląda mniej jak FORMULARZ KONTAKTOWY, a bardziej jak zbiór pól wejściowych.

złożenie formularza odbywa się tylko za pomocą zwykłego elementu button programowo.

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

dodanie atrybutu method przy submit #

zwykły przycisk miał click procedurę obsługi zdarzenia, która dodała atrybut metody i wartość z powrotem do elementu formularza.

po kliknięciu przycisku atrybut jest dodawany, ale mogą być przypadki, w których czas elementów skryptu dzieje się w przeciwieństwie do tego, jak chciałem.

aby to przezwyciężyć, dodałem interwał czasowy. To wielokrotnie sprawdza element formularza dla atrybutu method co 100 milisekund, jeśli nie istnieje atrybut method, formularz nie jest przesyłany.

$("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);
});

złożenie formularza występuje tylko wtedy, gdy istnieje atrybut method i wystąpiłoby to programowo. Po przesłaniu formularza czasomierz interwału się kończy.

clearInterval(checkExist);

myślałem, że to dość skuteczny sposób na ponad inżynierię formularza kontaktowego, aby zatrzymać boty, ale moja pewność siebie nie miała trwać. Wróciłem kilka godzin później, aby ponownie znaleźć spam e-maile zbierające.

przesyłanie formularza odbywa się za pośrednictwem HTTP #

i wtedy mnie olśniło, boty prawdopodobnie nawet nie odwiedzają strony przez przeglądarkę, nie dbają o cały skrypt jQuery, który działa na stronie klienta usuwając elementy.

atrybut metody istnieje, gdy strona jest ładowana, a stamtąd jest to proste zeskrobanie HTML i przesłanie formularza za pośrednictwem postu HTTP bez interakcji ze stroną.

i to właśnie ta realizacja sprawiła, że zidentyfikowałem technikę, która nie tylko spowolni spam, ale je zatrzyma. Od czasu zastosowania tej techniki nie miałem żadnych e-maili, żadnych, zero.

oddzielenie strony od formularza #

technika wczytywania fragmentu formularza za pomocą Javascript po załadowaniu strony. Zdając sobie sprawę, że boty spamowe prawdopodobnie nie używają bezgłowej przeglądarki do poruszania się po stronie kontaktu i przesyłania formularza zamiast tego sprawiłem, że formularz pojawia się tylko wtedy, gdy strona została załadowana z przeglądarki.

strona kontaktowa renderowana w przeglądarce to jedna strona, ale w rzeczywistości składa się z dwóch części. Strona główna z symbolem zastępczym dla komponentu formularza i samej zawartości formularza.

<div></div>

Ładowanie formularza na stronie Ładowanie #

po załadowaniu strony Zdarzenie jQuery ready prawie natychmiast ładuje dodatkowy fragment formularza do kontenera formularza DIV.

strona fragmentu formularza nigdy nie jest identyfikowana przez bota, ponieważ strona początkowa, którą widzi bot, nie ma elementu formularza, jest ładowana tylko po załadowaniu strony przez Javascript.

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

Podsumowując #

technika wymaga Javascript do działania. Ponieważ Javascript stał się akceptowaną częścią tworzenia stron internetowych, uważam, że jest to realistyczne rozwiązanie do powstrzymywania spamu w określonych sytuacjach.

inna technika wykorzystania pól honeypot jest zawsze problematyczna, ponieważ z mojego doświadczenia nie była tak skuteczna.

Spam nadal znajdzie sposób, a jeśli mam być szczery, technika honeypot może być klasyfikowana tylko jako ogranicznik spamu, zmniejszając przypadki przedostawania się spamu.

podczas gdy używanie działa i jest szybką poprawką, jego użycie podważa dostępność sieci dla osób niepełnosprawnych.

usuwając formularz kontaktowy z renderowania jako część zwykłego żądania HTTP get, jego widoczność dla botów wydaje się być znacznie zmniejszona, a tym samym zmniejsza (i w moim przypadku została zatrzymana) boty z możliwości wysyłania spamu za pośrednictwem formularza kontaktowego.

rzeczy do wypróbowania #

niezależnie od struktury, której używa Twoja witryna, jeśli twój formularz kontaktowy jest zagrożony przez spam, wypróbuj te podejścia:

• oddziel stronę od formularza
• załaduj formularz po załadowaniu strony
• przesyłaj formularze tylko programowo, używając elementów button
• Usuń atrybut method w formularzach i dodaj go jako część przesyłania formularza