Stoppe bots Med Javascript

Rask Oppsummering

er en praktisk gå til teknikk for å stoppe spam, men det er også utilgjengelig. Ved Hjelp Av Javascript for å fjerne kritiske skjemaattributter, kan lasting av skjemainnhold dynamisk og erstatning av send-knapper være et effektivt alternativ som opprettholder nettstedets tilgjengelighet.

tidligere hadde JEG brukt. NET MVC som rammeverk FOR CANAXESS nettsted. Kontaktskjemaet måtte være tilgjengelig og kunne ikke stole på noen plugin som ville påvirke brukerens evne til å kontakte oss. Skjemaet hadde EN CSS skjult skjemafelt ved hjelp av honeypot teknikk og server side logikk avvise alle innleveringer hvis skjemafeltet inneholdt data.

teorien som bots kan ikke forstå hva som er et legitimt felt og hva som ikke er, og så bot identifiserer og fullfører alle inntastingsfelt og sender skjemaet. Hvis feltet inneholder data, antar vi at en bruker ikke har vært i stand til å navigere til skjult skjemafelt, en bruker har ikke sendt skjemaet og forkaste hele inndata.

Honeypot teknikker er alltid identifisert som en effektiv måte å stoppe spam e-post og for meg teknikken fungerte ok for å redusere spam til et håndterbart nivå en dag. Innenfor min e-postklient ville jeg velge alle spam e-poster og slette dem på masse, alle ganske rett frem hvis tidkrevende.

Flyttet Til Netlify #

SOM en del av endring av infrastruktur ble CANAXESS-nettstedet flyttet Til Netlify, noe SOM medførte at den eksisterende spamfiltreringsteknikken måtte revurderes da det forrige nettstedet ble bygget I. NET og hostet i ET. NET-miljø.

I Utgangspunktet valgte jeg å gå for ingen spambeskyttelse og bare se hvordan det gikk. Som du forventer spam innlegg kom tykk og rask.

Bruke en honeypot #

Netlify gir en honeypot-funksjon som følger samme teknikk for å bruke et skjult inntastingsfelt, og hvis dette er ferdigfylt, blir alle e-postmeldinger sendt til spam-mappen.

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

teknikken fungerte veldig effektivt; ingen legitime e-postmeldinger nådde den vanlige e-postmappen.

men spam-mappen fortalte en annen historie. Det var sider med spam-resultater, der jeg tidligere kunne velge alle e-postmeldinger på masse og slette, betydde Netlify-tilnærmingen bare 10-20-e-postmeldinger ble returnert om gangen med personsøking brukt til å flytte til de neste ti e-postene. Det var ingen masseslettefunksjon, og jeg måtte slette individuelle.

Dette var utrolig tidkrevende og kjedelig. Jeg skrev En Javascript bookmarklet som jeg håpet ville gjøre det lettere å sjekke alle avkrysnings kontroller på siden og slette alle poster.

Dessverre, siden logikken var ikke gjenkjenne min bookmarklet som å ha fysisk interaksjon med hver kontroll og ville ikke tillate valg av alle e-poster på masse.

jeg kunne heller ikke være sikker på om noen e-poster i spam-mappen var falske positiver-feilidentifiserte e-poster, noe som medførte at jeg måtte tråle gjennom alle e-poster for å bekrefte.

Diskontering re #

Netlify gi Google re og jeg først vurdere bruken som e-postene var økende daglig.

men var oppfatningen av en web tilgjengelighet selskapet bruker en kjent utilgjengelig metode for folk å kontakte dem ikke en god titt.

jeg har tidligere skrevet om hvor forferdelig en teknikk er for å undergrave tilgjengeligheten til et nettsted og tenkte om jeg ikke kunne løse dette problemet, hva håp er der for andre.

jeg bestemte meg for å programmere meg ut av det.

Gjør skjemaet mindre attraktivt for bots #

jeg trengte å få kontaktskjemaet til å se mindre ut som et kontaktskjema og mindre attraktivt for bots. Jeg begynte å fjerne method attributtet på skjemaelementet. Hvis det ikke er method attributt, skjønte jeg at skjemaet ikke kunne sendes.

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

Dessverre, Selv Om attributtet ble fjernet, brukte Netlify metodeattributtet tilbake på skjemaet da nettstedet ble distribuert, og dette var noe jeg ikke kunne kontrollere.

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

Bruke jQuery til å fjerne et attributt #

jeg bestemte Meg for å bruke Javascript (jQuery) for å fjerne method attributtet dynamisk etter at siden hadde lastet inn. Ved hjelp av jquery ready-hendelsen velges skjemaelementet, og attributtet method fjernes.

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

jeg krevde da en måte å legge til attributtet tilbake på skjemaelementet før sending. Jeg måtte legge den tilbake i en sekvens for å sikre at attributtet eksisterer før skjemaet sendes, ellers vil skjemaet feile ut og brukeren vil møte et ødelagt kontaktskjema, neppe ideelt!

Erstatte send-knappen #

I Tillegg hadde jeg bestemt meg for å fjerne submit – knappen også. Å finne ut om det ikke var noen knapp submit, kan skjemaet ikke sendes via en hodeløs nettleser (hvis spammere brukte den teknikken), da det ser mindre ut som et kontaktskjema og mer som en samling av inntastingsfelt.

skjemainnlevering vil finne sted via et vanlig button – element bare programmatisk.

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

Legge til metodeattributtet på send #

den vanlige knappen hadde en click hendelsesbehandling som la til metodeattributtet og verdien tilbake på skjemaelementet.

når knappen klikkes, legges attributtet til, men det kan være tilfeller der timingen av skriptelementer skjer i strid med hvordan jeg ønsket det.

for å overvinne dette, la jeg til et tidsintervall. Dette sjekker gjentatte ganger skjemaelementet for attributtet method hver 100 millisekunder, hvis ingen method attributtet finnes skjemaet ikke er sendt.

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

skjemainnlevering skjer bare når attributtet method finnes, og dette skjer programmatisk. Når skjemaet hadde blitt sendt intervalltimer ville ende.

clearInterval(checkExist);

jeg trodde dette var en ganske effektiv måte å over engineering et kontaktskjema for å stoppe roboter, men min tillit var ikke å vare. Jeg kom tilbake noen timer senere for å finne spam e-post samle igjen.

skjemainnlevering skjer VIA HTTP #

Og da begynte det på meg, bots sannsynligvis ikke engang besøker siden via nettleseren, de bryr seg ikke om alt jquery-skriptet som kjører på klientsiden, fjerner elementer.

metodeattributtet eksisterer når siden er lastet, og derfra er det en enkel skrape AV HTML og innlevering av skjemaet via ET HTTP-innlegg uten å interagere med siden.

Og det var denne erkjennelsen som fikk meg til å identifisere teknikken som ikke bare ville bremse spam-e-postene, men stoppe dem. Siden jeg brukte denne teknikken har jeg ikke hatt noen e-post, ingen, zilch.

Skille siden fra skjemaet #

teknikken laster skjemafragmentet via Javascript etter at siden er lastet inn. Innser spambots sannsynligvis ikke bruker en hodeløs nettleser for å navigere kontaktsiden og sende inn skjemaet jeg i stedet laget skjemaet bare vises når siden er lastet fra en nettleser.

kontaktsiden gjengitt i nettleseren er en side, men er i virkeligheten består av to deler. Hovedsiden med en plassholder for skjemakomponenten og selve skjemainnholdet.

<div></div>

Laster inn skjemaet på sidebelastning #

når siden lastes inn, laster en jquery ready-hendelse det ekstra skjemafragmentet i skjemabeholderen DIV nesten umiddelbart.

skjemafragmentsiden blir aldri identifisert av en bot, da den første siden boten ser, ikke har noe skjemaelement, dette lastes bare etter at siden har lastet gjennom Javascript.

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

i sammendrag #

teknikken krever Javascript for å fungere. Som Javascript har blitt en akseptert del av webutvikling, tror jeg det er en realistisk løsning for å stoppe spam i bestemte bestemte situasjoner.

den andre teknikken for å bruke honeypot felt er alltid problematisk som fra min erfaring var det ikke så effektiv.

Spam vil fortsatt finne en vei gjennom, og hvis jeg er ærlig honeypot teknikken kan bare klassifiseres som en spam limiter, redusere forekomster av spam komme gjennom.

mens bruk ville fungere og være en rask løsning, er bruken undergrave å gjøre nettet tilgjengelig for personer med nedsatt funksjonsevne.

ved å fjerne kontaktskjemaet fra å bli gjengitt som en del av en vanlig HTTP get-forespørsel, ser synligheten til bots ut til å bli betydelig redusert og reduserer dermed (og i mitt tilfelle har stoppet) bots fra å kunne sende spam gjennom kontaktskjemaet.

Ting du kan prøve #

Uavhengig av rammen nettstedet ditt bruker, hvis kontaktskjemaet ditt blir kompromittert av spam, prøv disse tilnærmingene:

• Skill siden og skjemaet
• Last inn skjemaet etter at siden er lastet
• send bare skjemaer programmatisk ved hjelp avbutton elementer
• Fjernmethod – attributtet på skjemaer og legg dem til som en del av skjemainnsendingen