oprirea roboților cu Javascript

rezumat rapid

este o tehnică convenabilă pentru oprirea spamului, dar este, de asemenea, inaccesibilă. Folosind Javascript pentru a elimina atributele de formular critice, încărcarea conținutului formularului dinamic și înlocuirea butoanelor de trimitere poate fi o alternativă eficientă care menține accesibilitatea site-urilor dvs.

anterior am folosit.net MVC ca cadru pentru site-ul CANAXESS. Formularul de contact trebuia să fie accesibil și nu se putea baza pe niciun plugin care ar afecta negativ capacitatea unui utilizator de a ne contacta. Formularul avea un câmp de formular ascuns CSS folosind tehnica honeypot și logica din partea serverului respingând toate trimiterile dacă câmpul formularului conținea date.

teoria fiind roboții nu pot înțelege ceea ce este un câmp legitim și ceea ce nu este și astfel bot identifică și completează toate câmpurile de intrare și trimite formularul. Dacă câmpul conține date, presupunem că, deoarece un utilizator nu a reușit să navigheze la câmpul Formular ascuns, un utilizator nu a trimis formularul și nu a eliminat întreaga intrare.

tehnicile Honeypot sunt întotdeauna identificate ca o modalitate eficientă de a opri e-mailurile spam și pentru mine tehnica a funcționat bine pentru a reduce spamul la un nivel gestionabil pe zi. În cadrul clientul meu de mail aș selecta toate e-mailurile spam și ștergeți-le pe masă, toate destul de drept înainte, dacă consumatoare de timp.

trecerea la Netlify #

ca parte a schimbării infrastructurii, site-ul CANAXESS a fost mutat la Netlify, ceea ce însemna că tehnica existentă de filtrare a spamului pe care se baza ar trebui regândită, deoarece site-ul anterior a fost construit în.NET și găzduit într-un mediu. net.

inițial am optat pentru a merge pentru nici o protecție de spam și a vedea doar cum a mers. După cum v-ați aștepta, postările de spam au venit groase și rapide.

utilizarea unui honeypot #

Netlify oferă o caracteristică honeypot care urmează aceeași tehnică de utilizare a unui câmp de intrare ascuns și dacă acest lucru este preumplut, toate e-mailurile sunt trimise în folderul spam.

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

tehnica a funcționat foarte eficient; Niciun e-mail legitim nu a ajuns vreodată în folderul obișnuit de e-mail.

dar dosarul spam a spus o altă poveste. Au existat pagini de rezultate spam, unde anterior puteam selecta toate e-mailurile pe masă și șterge, abordarea Netlify însemna că doar 10-20 de e-mailuri au fost returnate la un moment dat, cu paginarea folosită pentru a trece la următoarele zece e-mailuri. Nu a existat nicio caracteristică de ștergere în masă și a trebuit să șterg cele individuale.

acest lucru a fost incredibil de consumatoare de timp și plictisitor. Am scris un bookmarklet Javascript pe care am sperat ar face mai ușor pentru a verifica toate controalele caseta de pe pagina și șterge toate înregistrările.

din păcate, logica paginii nu a recunoscut marcajul meu ca interacționând fizic cu fiecare control și nu ar permite selectarea tuturor e-mailurilor în masă.

de asemenea, nu puteam fi sigur dacă e – mailurile din folderul spam erau false pozitive-e-mailuri identificate incorect, ceea ce însemna că a trebuit să trec prin toate e-mailurile pentru a confirma.

actualizarea re #

Netlify oferă Google re și am luat în considerare inițial utilizarea sa, deoarece e-mailurile au crescut zilnic.

cu toate acestea, percepția unei companii de accesibilitate web folosind o metodă cunoscută inaccesibilă pentru ca oamenii să le contacteze nu a fost un aspect bun.

am scris anterior despre cât de teribilă este o tehnică pentru subminarea accesibilității unui site web și m-am gândit că dacă nu aș putea rezolva această problemă, ce speranță există pentru alții.

am decis să-mi programez calea de ieșire din ea.

Faceți formularul Mai puțin atractiv pentru roboți #

trebuia să fac formularul de contact să arate mai puțin ca un formular de contact și mai puțin atractiv pentru roboți. Am început eliminarea method atribut pe elementul de formular. Dacă nu există un atribut method, m-am gândit că formularul nu poate fi trimis.

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

din păcate, chiar dacă atributul a fost eliminat, Netlify aplicat atributul metoda înapoi pe formularul ca site-ul a fost implementat și acest lucru a fost ceva ce nu am putut controla.

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

folosind jQuery pentru a elimina un atribut #

am decis să folosesc Javascript (jQuery) pentru a elimina dinamic method atribut după pagina a încărcat. Folosind evenimentul jQuery ready, elementul de formular este selectat și atributul method este eliminat.

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

am cerut apoi o modalitate de a adăuga atributul înapoi pe elementul formular înainte de a trimite. A trebuit să-l adăugați înapoi într-o secvență pentru a vă asigura că atributul există înainte de formularul este trimis altfel formularul va eroare și utilizatorul va întâlni un formular de contact rupt, greu ideal!

înlocuirea butonului de trimitere #

în plus, am decis să elimin și butonul submit. Imaginind dacă nu a existat un buton submit formularul nu poate fi trimis printr-un browser fără cap (dacă spammerii au folosit acea tehnică), deoarece arată mai puțin ca un formular de contact și mai mult ca o colecție de câmpuri de intrare.

depunerea Formularului va avea loc doar printr-un element regulat button programatic.

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

adăugarea atributului method la submit #

butonul regular a avut un handler de evenimente click care a adăugat atributul method și valoarea înapoi pe elementul form.

când se face clic pe buton se adaugă atributul, dar pot exista cazuri în care calendarul elementelor script se întâmplă contrar modului în care am vrut să.

pentru a depăși acest lucru, am adăugat un interval de timp. Aceasta verifică în mod repetat elementul formular pentru method atribut la fiecare 100 de milisecunde, dacă nu method atribut există formularul nu este trimis.

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

trimiterea formularului are loc numai atunci când atributul method există, iar acest lucru ar avea loc programatic. Când Formularul a fost trimis temporizatorul interval se va termina.

clearInterval(checkExist);

am crezut că acest lucru a fost un mod destul de eficient de peste Inginerie un formular de contact pentru a opri roboții, dar încrederea mea nu a fost să dureze. M-am întors câteva ore mai târziu pentru a găsi e-mailuri spam de colectare din nou.

depunerea Formularului se întâmplă prin HTTP #

și apoi mi-a dat seama, roboții probabil nici măcar nu vizitează pagina prin browser, nu le pasă de tot scriptul jQuery care rulează pe elementele de eliminare a clientului.

atributul metodei există atunci când pagina este încărcată și de acolo este o simplă răzuire a HTML-ului și trimiterea formularului printr-o postare HTTP fără a interacționa vreodată cu pagina.

și această realizare m-a făcut apoi să identific tehnica care nu doar ar încetini e-mailurile spam, ci le-ar opri. De când am aplicat această tehnică, nu am avut e-mailuri, niciunul, zilch.

separarea paginii de formularul #

tehnica încarcă fragmentul de formular prin Javascript după ce pagina s-a încărcat. Realizând că roboții de spam probabil nu folosesc un browser fără cap pentru a naviga pe pagina de contact și pentru a trimite formularul, am făcut ca Formularul să apară numai atunci când pagina a fost încărcată dintr-un browser.

pagina de contact redată în browser este o pagină, dar în realitate este compusă din două părți. Pagina principală cu un substituent pentru componenta formular și conținutul formularului în sine.

<div></div>

încărcarea formularului la încărcarea paginii #

când pagina este încărcată, un eveniment jQuery ready încarcă fragmentul de formular suplimentar în containerul de formular DIV aproape imediat.

pagina fragmentului de formular nu este niciodată identificată de un bot, deoarece pagina inițială pe care o vede botul nu are niciun element de formular, aceasta este încărcată numai după ce pagina s-a încărcat prin Javascript.

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

în rezumat #

tehnica necesită Javascript pentru a funcționa. Deoarece Javascript a devenit o parte acceptată a dezvoltării web, cred că este o soluție realistă pentru oprirea spamului în anumite situații specifice.

cealaltă tehnică de utilizare a câmpurilor honeypot este întotdeauna problematică, deoarece din experiența mea nu a fost atât de eficientă.

Spam-ul ar găsi încă o cale prin și dacă eu sunt sincer tehnica honeypot poate fi clasificat doar ca un limitator de spam, reducând cazurile de spam obtinerea prin.

în timp ce utilizarea ar funcționa și ar fi o soluție rapidă, utilizarea sa subminează accesul la internet pentru persoanele cu dizabilități.

prin eliminarea formularului de contact de la a fi redat ca parte a unei cereri obișnuite HTTP get, vizibilitatea sa către roboți pare să fie redusă semnificativ și, prin urmare, reduce (și, în cazul meu, a oprit) roboții să poată trimite spam prin formularul de contact.

lucruri pe care să le încercați #

indiferent de Cadrul pe care îl folosește site-ul dvs., dacă formularul dvs. de contact este compromis de spam, încercați aceste abordări:

• separați pagina și formularul
• încărcați formularul după ce pagina a încărcat
• trimiteți formularele numai programatic folosind button elemente
• eliminați atributul method de pe formulare și adăugați-le ca parte a depunerii formularului