het stoppen van de bots met Javascript

Quick Summary

is een handige ga naar techniek voor het stoppen van spam, maar het is ook ontoegankelijk. Het gebruik van Javascript om kritische vorm attributen te verwijderen, het dynamisch laden van formulierinhoud en het vervangen van submit-knoppen kan een effectief alternatief zijn dat de toegankelijkheid van uw sites onderhoudt.

eerder had ik.net MVC gebruikt als raamwerk voor de CANAXESS website. Het contactformulier moest toegankelijk zijn en kon niet vertrouwen op een plugin die een negatieve invloed zou hebben op het vermogen van een gebruiker om contact met ons op te nemen. Het formulier had een CSS verborgen formulierveld met behulp van de honeypot techniek en server side logica afwijzing van alle inzendingen als het formulierveld gegevens bevatte.

de theorie is dat bots niet kunnen begrijpen wat een legitiem veld is en wat niet en dus identificeert en vult de bot alle invoervelden in en verzendt het formulier. Als het veld gegevens bevat, gaan we ervan uit dat als een gebruiker niet in staat is geweest om naar het verborgen formulierveld te navigeren, een gebruiker het formulier niet heeft ingediend en de volledige invoer heeft weggegooid.

Honeypot technieken worden altijd geà dentificeerd als een effectieve manier om spam e-mails te stoppen en voor mij werkte de techniek ok om de spam te verminderen tot een beheersbaar niveau per dag. Binnen mijn e-mailclient zou ik alle spam e-mails te selecteren en te verwijderen op de massa, allemaal vrij eenvoudig als tijdrovend.

verhuizen naar Netlify #

als onderdeel van de veranderende Infrastructuur, de CANAXESS website werd verplaatst naar Netlify, wat betekende dat de bestaande spam filtering techniek gebruikt zou moeten worden herzien als de vorige site werd gebouwd in.net en gehost in een. net omgeving.

aanvankelijk koos ik voor geen spambescherming en kijk gewoon hoe het ging. Zoals je zou verwachten dat de spam berichten kwam dik en snel.

met behulp van een honeypot #

Netlify biedt een honeypot-functie die dezelfde techniek van het gebruik van een verborgen invoerveld volgt en als dit vooraf is ingevuld, worden alle e-mails naar de spammap verzonden.

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

de techniek werkte zeer effectief; geen legitieme e-mails bereikten ooit de reguliere e-mailmap.

maar de SPAM-map vertelde een ander verhaal. Er waren pagina ‘ s van spam resultaten, waar eerder kon ik alle e-mails op massa selecteren en verwijderen, de netlify aanpak betekende slechts 10-20 e-mails werden geretourneerd op een moment met paging gebruikt om naar de volgende tien e-mails. Er was geen mass delete-functie en ik moest individuele degenen verwijderen.

dit was ongelooflijk tijdrovend en vervelend. Ik schreef een Javascript bookmarklet die ik hoopte zou het gemakkelijker maken om alle checkbox controles op de pagina en verwijder alle records.

helaas herkende de paginalogica mijn bladwijzer niet als fysiek interactie met elk besturingselement en stond het niet toe om alle e-mails op massa te selecteren.

ik kon er ook niet zeker van zijn of e – mails in de SPAM-map vals-positieven waren-onjuist geïdentificeerde e-mails, wat betekende dat ik alle e-mails moest doorzoeken om te bevestigen.

Discounting re #

Netlify bieden Google re en ik in eerste instantie overwogen het gebruik ervan als de e-mails werden dagelijks toenemen.

echter, de perceptie van een webtoegankelijkheidsbedrijf dat een bekende ontoegankelijke methode gebruikt voor mensen om contact met hen op te nemen, was niet goed.

ik heb eerder geschreven over hoe verschrikkelijk een techniek is voor het ondermijnen van de toegankelijkheid van een website en dacht dat als ik dit probleem niet kon oplossen welke hoop er voor anderen is.

ik besloot mijn weg eruit te programmeren.

het formulier minder aantrekkelijk maken voor bots #

het contactformulier moest minder op een contactformulier lijken en minder aantrekkelijk voor bots. Ik ben begonnen met het verwijderen van het method attribuut op het formulier element. Als er geen method attribuut is, dacht ik dat het formulier niet verzonden kon worden.

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

helaas, hoewel het attribuut werd verwijderd, paste Netlify het method attribuut terug toe op het formulier terwijl de site werd geïmplementeerd en dit was iets wat ik niet kon controleren.

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

jQuery gebruiken om een attribuut #

te verwijderen Ik besloot Javascript (jQuery) te gebruiken om het method attribuut dynamisch te verwijderen nadat de pagina was geladen. Met behulp van de jquery ready event wordt het formulierelement geselecteerd en wordt het method attribuut verwijderd.

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

ik had een manier nodig om het attribuut terug toe te voegen aan het formulierelement voordat ik het verzend. Ik moest het terug in een volgorde toe te voegen om ervoor te zorgen dat het attribuut bestaat voordat het formulier wordt verzonden anders zal het formulier fout uit en de gebruiker zal een gebroken contactformulier tegenkomen, nauwelijks ideaal!

ter vervanging van de knop Verzenden #

bovendien had ik besloten om de knop submit ook te verwijderen. Als er geen submit knop was, kan het formulier niet worden ingediend via een headless browser (als spammers die techniek gebruikten) omdat het minder op een contactformulier lijkt en meer op een verzameling invoervelden.

het indienen van formulieren zou alleen programmatisch gebeuren via een normaal button element.

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

het toevoegen van het method attribuut op submit #

de knop regular had een click event handler die het method attribuut en de waarde weer aan het formulierelement toevoegde.

wanneer op de knop wordt geklikt, wordt het attribuut toegevoegd, maar er kunnen gevallen zijn waarin de timing van scriptelementen gebeurt in tegenstelling tot hoe ik het wilde.

om dit te verhelpen, heb ik een timer-interval toegevoegd. Dit controleert herhaaldelijk het formulierelement voor het method attribuut elke 100 milliseconden, als er geen method attribuut bestaat, wordt het formulier niet verzonden.

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

formulierinzending gebeurt alleen als het method attribuut bestaat, en dit zou programmatisch gebeuren. Wanneer het formulier was ingediend de interval timer zou eindigen.

clearInterval(checkExist);

ik dacht dat dit een vrij effectieve manier was om een contactformulier te ontwerpen om bots te stoppen, maar mijn vertrouwen was niet blijvend. Ik kwam een paar uur later terug om weer spam e-mails te verzamelen.

form submission gebeurt via HTTP #

en toen drong het tot me door, bots bezoeken waarschijnlijk niet eens de pagina via de browser, ze geven niet om alle jQuery script dat draait op de clientside verwijderen van elementen.

het method attribuut bestaat wanneer de pagina wordt geladen, en vanaf daar is het een eenvoudige Schram van de HTML en het indienen van het formulier via een HTTP post zonder ooit interactie met de pagina.

en het was deze realisatie die me vervolgens de techniek deed identificeren die niet alleen de spam e-mails zou vertragen, maar ze zou stoppen. Sinds het toepassen van deze techniek heb ik geen e-mails gehad, geen, niets.

de pagina scheiden van het formulier #

de techniek laadt het formulierfragment via Javascript nadat de pagina is geladen. Het realiseren van spam bots waarschijnlijk niet met behulp van een headless browser om de contactpagina te navigeren en het formulier in te dienen ik in plaats daarvan maakte het formulier alleen verschijnen wanneer de pagina is geladen vanuit een browser.

de contactpagina die in de browser wordt weergegeven, is één pagina, maar bestaat in werkelijkheid uit twee delen. De hoofdpagina met een plaatshouder voor de formuliercomponent en de formulierinhoud zelf.

<div></div>

het laden van het formulier bij het laden van de pagina #

wanneer de pagina wordt geladen, laadt een jQuery ready gebeurtenis het extra formulierfragment vrijwel onmiddellijk in de formuliercontainer DIV.

de pagina met formulierfragmenten wordt door een bot nooit geïdentificeerd als de eerste pagina die de bot ziet heeft geen formulierelement, dit wordt alleen geladen nadat de pagina is geladen via Javascript.

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

in samenvatting #

de techniek vereist Javascript om te werken. Als Javascript is uitgegroeid tot een geaccepteerd onderdeel van webontwikkeling ik denk dat het een realistische oplossing voor het stoppen van spam in bepaalde specifieke situaties.

de andere techniek van het gebruik van honeypotvelden is altijd problematisch, omdat het volgens mijn ervaring niet zo effectief was.

Spam zou nog steeds een weg door vinden en als ik eerlijk ben kan de honeypot techniek alleen worden geclassificeerd als een spam limiter, waardoor de gevallen van spam doorkomen.

hoewel het gebruik ervan zou werken en een snelle oplossing zou zijn, ondermijnt het gebruik ervan het toegankelijk maken van het web voor mensen met een handicap.

door het verwijderen van het contactformulier als onderdeel van een reguliere HTTP get request, lijkt de zichtbaarheid voor bots aanzienlijk te zijn verminderd en vermindert daarom (en in mijn geval is gestopt) bots in staat om spam te verzenden via het contactformulier.

Things for you to try #

ongeacht het framework dat uw site gebruikt, als uw contactformulier wordt gecompromitteerd door spam probeer deze benaderingen:

• scheid de pagina en het formulier
• laad het formulier nadat de pagina is geladen
• dien alleen formulieren programmatisch in met button elementen
• verwijder het method attribuut op formulieren en voeg ze toe als onderdeel van de indiening van het formulier