stoppa bots med Javascript

snabb sammanfattning

är en bekväm gå till teknik för att stoppa spam, men det är också otillgänglig. Att använda Javascript för att ta bort kritiska formulärattribut, ladda formulärinnehåll dynamiskt och ersätta skicka knappar kan vara ett effektivt alternativ som upprätthåller dina webbplatser tillgänglighet.

tidigare hade jag använt.Net MVC som ram för canaxess webbplats. Kontaktformuläret måste vara tillgängligt och kunde inte lita på något plugin som skulle påverka användarens förmåga att kontakta oss negativt. Formuläret hade ett CSS-dolt formulärfält med honeypot-tekniken och serverns logik som avvisade alla inlagor om formulärfältet innehöll data.

teorin är bots kan inte förstå vad som är ett legitimt fält och vad som inte är och så boten identifierar och fyller i alla inmatningsfält och skickar formuläret. Om fältet innehåller data antar vi att eftersom en användare inte har kunnat navigera till det dolda formulärfältet har en användare inte skickat in formuläret och kasserat hela inmatningen.

Honeypot-tekniker identifieras alltid som ett effektivt sätt att stoppa skräppostmeddelanden och för mig fungerade tekniken ok för att minska skräpposten till en hanterbar nivå om dagen. Inom min e-postklient skulle jag välja alla skräppostmeddelanden och ta bort dem på massa, alla ganska rakt fram om tidskrävande.

flytta till Netlify #

som en del av förändrad Infrastruktur flyttades CANAXESS-webbplatsen till Netlify vilket innebar att den befintliga spamfiltreringstekniken som åberopades skulle behöva omprövas eftersom den tidigare webbplatsen byggdes i.net och var värd i en. NET-miljö.

ursprungligen valde jag att gå för inget skräppostskydd och bara se hur det gick. Som du förväntar dig spam inlägg kom tjock och snabb.

använda en honeypot #

Netlify ger en honeypot-funktion som följer samma teknik för att använda ett dolt inmatningsfält och om detta är förfyllt skickas alla e-postmeddelanden till skräppostmappen.

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

Tekniken fungerade mycket effektivt; inga legitima e-postmeddelanden nådde någonsin den vanliga e-postmappen.

men skräppostmappen berättade en annan historia. Det fanns sidor med skräppostresultat, där jag tidigare kunde välja alla e-postmeddelanden på massa och radera, menade Netlify-metoden att endast 10-20 e-postmeddelanden returnerades i taget med personsökning som användes för att flytta till de kommande tio e-postmeddelandena. Det fanns ingen mass delete-funktion och jag var tvungen att ta bort enskilda.

detta var otroligt tidskrävande och tråkigt. Jag skrev en Javascript bookmarklet som jag hoppades skulle göra det lättare att kontrollera alla kryssrutor på sidan och ta bort alla poster.

tyvärr kände sidlogiken inte igen min bokmärke som fysiskt interagerade med varje kontroll och skulle inte tillåta val av alla e-postmeddelanden på massa.

jag kunde inte heller vara säker på om några e – postmeddelanden i skräppostmappen var falska positiva-felaktigt identifierade e-postmeddelanden, vilket innebar att jag var tvungen att tråla igenom alla e-postmeddelanden för att bekräfta.

diskontering re #

Netlify ge Google re och jag ursprungligen ansåg dess användning som e-post ökade dagligen.

men uppfattningen av ett webbtillgänglighetsföretag som använder en känd otillgänglig metod för att människor ska kontakta dem var inte en bra titt.

jag har tidigare skrivit om hur hemskt en teknik är för att undergräva tillgängligheten till en webbplats och tänkte om jag inte kunde lösa detta problem vilket hopp finns det för andra.

jag bestämde mig för att programmera min väg ut ur det.

gör formuläret mindre attraktivt för bots #

jag behövde få kontaktformuläret att se mindre ut som ett kontaktformulär och mindre attraktivt för bots. Jag började ta bort attributet method på formelementet. Om det inte finns något method attribut, tänkte jag att formuläret inte kunde skickas.

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

tyvärr, även om attributet togs bort, tillämpade Netlify metodattributet tillbaka på formuläret när webbplatsen distribuerades och det var något jag inte kunde kontrollera.

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

använda jQuery för att ta bort ett attribut #

jag bestämde mig för att använda Javascript (jQuery) för att dynamiskt ta bort attributet method efter att sidan hade laddats. Med hjälp av jQuery ready-händelsen väljs formelementet och attributet method tas bort.

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

jag krävde sedan ett sätt att lägga till attributet tillbaka till formulärelementet innan det skickades. Jag var tvungen att lägga till den i en sekvens för att se till att attributet existerar innan formuläret skickas annars kommer formuläret att misslyckas och användaren kommer att stöta på ett brutet kontaktformulär, knappast idealiskt!

ersätter submit-knappen #

dessutom hade jag bestämt mig för att ta bort submit – knappen också. Att räkna om det inte fanns någon submit – knapp kan formuläret inte skickas via en huvudlös webbläsare (om spammare använde den tekniken) eftersom det ser mindre ut som ett kontaktformulär och mer som en samling inmatningsfält.

Formulärinlämning skulle ske via ett vanligt button – element endast programmatiskt.

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

lägga till metodattributet på submit #

den vanliga knappen hade en click händelsehanterare som lade till metodattributet och värdet tillbaka till formelementet.

när knappen klickas läggs attributet till, men det kan finnas fall där tidpunkten för skriptelement händer i motsats till hur jag ville ha det.

för att övervinna detta lade jag till ett timerintervall. Detta kontrollerar upprepade gånger formulärelementet för attributet method var 100 millisekunder, om det inte finns något method – attribut skickas inte formuläret.

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

formulärinsändning sker endast när attributet method existerar, och detta skulle ske programmatiskt. När formuläret hade lämnats in intervalltimern skulle sluta.

clearInterval(checkExist);

jag trodde att detta var ett ganska effektivt sätt att över engineering ett kontaktformulär för att stoppa bots, men mitt självförtroende var inte att hålla. Jag kom tillbaka några timmar senare för att hitta skräppostmeddelanden som samlades igen.

formulärinsändning sker via HTTP #

och sedan började det på mig, bots besöker förmodligen inte ens sidan via webbläsaren, de bryr sig inte om alla jQuery-skript som körs på klientens borttagningselement.

metodattributet finns när sidan laddas, och därifrån är det en enkel skrapa av HTML och inlämning av formuläret via ett HTTP-inlägg utan att någonsin interagera med sidan.

och det var denna insikt som sedan fick mig att identifiera tekniken som inte bara skulle sakta ner skräppostmeddelandena utan stoppa dem. Sedan jag tillämpade denna teknik har jag inte haft några e-postmeddelanden, ingen, zilch.

separera sidan från formuläret #

tekniken laddar formfragmentet via Javascript efter att sidan har laddats. Realisera spam bots förmodligen inte använder en huvudlös webbläsare för att navigera på kontaktsidan och skicka formuläret jag istället gjort formuläret visas bara när sidan har laddats från en webbläsare.

kontaktsidan som återges i webbläsaren är en sida, men består i verkligheten av två delar. Huvudsidan med en platshållare för formulärkomponenten och själva formulärinnehållet.

<div></div>

Läser in formuläret på sidan load #

när sidan laddas laddar en jQuery ready-händelse det extra formfragmentet i formbehållaren DIV nästan omedelbart.

sidan formfragment identifieras aldrig av en bot eftersom den första sidan som boten ser inte har något formelement, detta laddas först efter att sidan har laddats via Javascript.

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

Sammanfattningsvis #

tekniken kräver Javascript för att fungera. Eftersom Javascript har blivit en accepterad del av webbutvecklingen tycker jag att det är en realistisk lösning för att stoppa spam i vissa specifika situationer.

den andra tekniken att använda honeypot-fält är alltid problematisk, eftersom det inte var så effektivt från min erfarenhet.

Spam skulle fortfarande hitta en väg igenom och om jag är ärlig kan honeypot-tekniken bara klassas som en spam-begränsare, vilket minskar förekomsten av spam som kommer igenom.

medan användningen skulle fungera och vara en snabb lösning, undergräver användningen att göra webben tillgänglig för personer med funktionshinder.

genom att ta bort kontaktformuläret från att återges som en del av en vanlig HTTP get-begäran verkar dess synlighet för bots minskas avsevärt och minskar därför (och i mitt fall har stoppat) bots från att kunna skicka spam via kontaktformuläret.

saker för dig att prova #

oavsett ramverket din webbplats använder, om ditt kontaktformulär äventyras av spam prova dessa metoder:

• separera sidan och formuläret
• ladda formuläret efter att sidan har laddats
• skicka bara formulär programmatiskt med button element
• ta bort attributet method på formulär och Lägg till dem som en del av formulärinsändningen