Fermare i bot con Javascript

Riepilogo rapido

è una comoda tecnica per fermare lo spam, ma è anche inaccessibile. L’utilizzo di Javascript per rimuovere gli attributi critici del modulo, il caricamento dinamico del contenuto del modulo e la sostituzione dei pulsanti di invio possono essere un’alternativa efficace che mantiene l’accessibilità dei siti.

In precedenza avevo usato.NET MVC come framework per il sito web CANAXESS. Il modulo di contatto doveva essere accessibile e non poteva fare affidamento su alcun plugin che avrebbe influenzato negativamente la capacità di un utente di contattarci. Il modulo aveva un campo modulo nascosto CSS utilizzando la tecnica honeypot e la logica lato server che rifiutava tutti gli invii se il campo modulo conteneva dati.

La teoria dei bot non può capire cosa sia un campo legittimo e cosa no e quindi il bot identifica e completa tutti i campi di input e invia il modulo. Se il campo contiene dati, si presume che un utente non sia stato in grado di accedere al campo modulo nascosto, un utente non abbia inviato il modulo e scartare l’intero input.

Le tecniche Honeypot sono sempre identificate come un modo efficace per fermare le email di spam e per me la tecnica ha funzionato bene per ridurre lo spam a un livello gestibile al giorno. All’interno del mio client di posta vorrei selezionare tutte le email di spam e cancellarle in massa, tutto abbastanza semplice se richiede tempo.

Passaggio a Netlify #

Come parte della modifica dell’infrastruttura, il sito Web CANAXESS è stato spostato su Netlify, il che significava che la tecnica di filtraggio dello spam esistente su cui si basava doveva essere ripensata poiché il sito precedente era stato creato in.NET e ospitato in un ambiente. NET.

Inizialmente ho scelto di non proteggere dallo spam e vedere come è andata. Come ci si aspetterebbe i messaggi di spam è venuto spessa e veloce.

Utilizzo di un honeypot #

Netlify fornisce una funzionalità honeypot che segue la stessa tecnica di utilizzo di un campo di input nascosto e se questo è precompilato, tutte le email vengono inviate alla cartella spam.

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

La tecnica ha funzionato in modo molto efficace; nessuna email legittima ha mai raggiunto la normale cartella di posta elettronica.

Ma la cartella spam raccontava un’altra storia. C’erano pagine di risultati di spam, dove in precedenza potevo selezionare tutte le e-mail su massa ed eliminare, l’approccio Netlify significava solo 10-20 e-mail venivano restituite alla volta con il paging utilizzato per passare alle successive dieci e-mail. Non c’era alcuna funzione di eliminazione di massa e ho dovuto eliminare quelli individuali.

Questo è stato incredibilmente lungo e noioso. Ho scritto un bookmarklet Javascript che speravo rendesse più facile controllare tutti i controlli della casella di controllo sulla pagina ed eliminare tutti i record.

Sfortunatamente, la logica della pagina non riconosceva il mio bookmarklet come se avesse interagito fisicamente con ciascun controllo e non consentiva la selezione di tutte le e-mail in massa.

Inoltre, non potevo essere sicuro che eventuali e – mail nella cartella spam fossero falsi positivi-e-mail identificate in modo errato, il che significava che dovevo sfogliare tutte le e-mail per confermare.

Attualizzazione re #

Netlify fornisce Google re e inizialmente ho considerato il suo utilizzo in quanto le e-mail aumentavano ogni giorno.

Tuttavia, la percezione di una società di accessibilità web che utilizza un metodo inaccessibile noto per le persone a contattarli non era una buona occhiata.

Ho scritto in precedenza su quanto sia terribile una tecnica per minare l’accessibilità di un sito web e ho pensato se non potessi risolvere questo problema quale speranza c’è per gli altri.

Ho deciso di programmare la mia via d’uscita.

Rendi il modulo meno attraente per i bot #

Avevo bisogno di rendere il modulo di contatto meno simile a un modulo di contatto e meno attraente per i bot. Ho iniziato a rimuovere l’attributo method sull’elemento form. Se non esiste un attributo method, ho pensato che il modulo non potesse essere inviato.

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

Sfortunatamente, anche se l’attributo è stato rimosso, Netlify ha applicato l’attributo del metodo sul modulo mentre il sito è stato distribuito e questo era qualcosa che non potevo controllare.

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

Utilizzo di jQuery per rimuovere un attributo #

Ho deciso di utilizzare Javascript (jQuery) per rimuovere dinamicamente l’attributo method dopo che la pagina era stata caricata. Utilizzando l’evento jQuery ready, l’elemento modulo viene selezionato e l’attributo method viene rimosso.

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

Ho quindi richiesto un modo per aggiungere l’attributo all’elemento del modulo prima dell’invio. Ho dovuto aggiungerlo in una sequenza per assicurarmi che l’attributo esista prima che il modulo venga inviato altrimenti il modulo si verificherà un errore e l’utente incontrerà un modulo di contatto rotto, difficilmente ideale!

Sostituendo il pulsante di invio #

Inoltre, avevo deciso di rimuovere anche il pulsante submit. Capire se non c’era un pulsante submit il modulo non può essere inviato tramite un browser senza testa (se gli spammer hanno usato quella tecnica) in quanto sembra meno un modulo di contatto e più simile a una raccolta di campi di input.

L’invio del modulo avverrà tramite un normale elemento button solo a livello di codice.

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

Aggiunta dell’attributo method su submit #

Il pulsante normale aveva un gestore di eventi click che aggiungeva l’attributo method e il valore all’elemento form.

Quando si fa clic sul pulsante viene aggiunto l’attributo, ma potrebbero esserci casi in cui la tempistica degli elementi dello script avviene contrariamente a come volevo.

Per superare questo, ho aggiunto un intervallo di timer. Questo controlla ripetutamente l’elemento del modulo per l’attributo method ogni 100 millisecondi, se non esiste un attributo method, il modulo non viene inviato.

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

L’invio del modulo si verifica solo quando esiste l’attributo method e ciò si verificherebbe a livello di programmazione. Quando il modulo era stato inviato, il timer a intervalli terminava.

clearInterval(checkExist);

Ho pensato che questo fosse un modo abbastanza efficace per ingegnerizzare un modulo di contatto per fermare i bot, ma la mia fiducia non doveva durare. Sono tornato un paio d’ore più tardi per trovare le email di spam raccolta di nuovo.

L’invio del modulo avviene tramite HTTP #

E poi mi sono reso conto, i bot probabilmente non stanno nemmeno visitando la pagina tramite il browser, non si preoccupano di tutto lo script jQuery che viene eseguito sul lato client rimuovendo gli elementi.

L’attributo del metodo esiste quando la pagina viene caricata, e da lì è un semplice raschiare l’HTML e l’invio del modulo tramite un post HTTP senza mai interagire con la pagina.

Ed è stata questa realizzazione che mi ha fatto identificare la tecnica che non solo rallentava le email di spam ma le fermava. Dall’applicazione di questa tecnica non ho avuto e-mail, nessuna, zero.

Separando la pagina dal form #

La tecnica sta caricando il frammento del modulo tramite Javascript dopo che la pagina è stata caricata. Realizzando bot spam probabilmente non stanno usando un browser senza testa per navigare nella pagina di contatto e inviare il modulo ho invece fatto il modulo appare solo quando la pagina è stata caricata da un browser.

La pagina di contatto visualizzata nel browser è una pagina, ma in realtà è composta da due parti. La pagina principale con un segnaposto per il componente del modulo e il contenuto del modulo stesso.

<div></div>

Caricamento del modulo sulla pagina load #

Quando la pagina viene caricata, un evento jQuery ready carica il frammento di modulo aggiuntivo nel contenitore del modulo DIV quasi immediatamente.

La pagina del frammento del modulo non viene mai identificata da un bot poiché la pagina iniziale che il bot sta vedendo non ha alcun elemento del modulo, questo viene caricato solo dopo che la pagina è stata caricata tramite Javascript.

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

In sintesi #

La tecnica richiede Javascript per funzionare. Poiché Javascript è diventato una parte accettata dello sviluppo web, penso che sia una soluzione realistica per fermare lo spam in determinate situazioni specifiche.

L’altra tecnica di utilizzo dei campi honeypot è sempre problematica in quanto dalla mia esperienza non era così efficace.

Spam sarebbe ancora trovare un modo attraverso e se sono onesto la tecnica honeypot può essere classificato solo come un limitatore di spam, riducendo le istanze di spam ottenere attraverso.

Mentre l’utilizzo funzionerebbe e sarebbe una soluzione rapida, il suo utilizzo sta minando rendendo il web accessibile alle persone con disabilità.

Rimuovendo il modulo di contatto dal rendering come parte di una normale richiesta HTTP get, la sua visibilità sui bot sembra essere significativamente ridotta e quindi riduce (e nella mia istanza si è fermato) i bot dalla possibilità di inviare spam attraverso il modulo di contatto.

Cose da provare #

Indipendentemente dal framework utilizzato dal tuo sito, se il tuo modulo di contatto è compromesso dallo spam prova questi approcci:

• Separa la pagina e il modulo
• Carica il modulo dopo che la pagina è stata caricata
• Invia solo i moduli a livello di programmazione utilizzando button elementi
• Rimuovi l’attributo method sui moduli e aggiungili come parte dell’invio del modulo