pysäyttäminen botit Javascript

Quick Summary

on kätevä mennä tekniikka lopettaa roskapostin, mutta se on myös saavuttamattomissa. JavaScriptin käyttäminen kriittisten lomakeattribuuttien poistamiseen, lomakesisällön lataaminen dynaamisesti ja submit-painikkeiden korvaaminen voi olla tehokas vaihtoehto, joka ylläpitää sivustojen saavutettavuutta.

aiemmin olin käyttänyt.Net MVC: tä canaxessin verkkosivuston kehyksenä. Yhteydenottolomakkeen oli oltava saatavilla, eikä se voinut luottaa mihinkään liitännäiseen, joka vaikuttaisi haitallisesti käyttäjän kykyyn ottaa meihin yhteyttä. Lomakkeessa oli CSS-piilomuotokenttä, jossa käytettiin honeypot-tekniikkaa ja palvelinpuolen logiikkaa hylkäämällä kaikki huomautukset, jos lomakekenttä sisälsi dataa.

teorian botit eivät voi ymmärtää, mikä on laillinen kenttä ja mikä ei, joten botti tunnistaa ja täydentää kaikki syöttökentät ja lähettää lomakkeen. Jos kenttä sisältää tietoja, oletamme, että koska käyttäjä ei ole pystynyt navigoimaan piilotettuun lomakekenttään, käyttäjä ei ole lähettänyt lomaketta ja hylkää koko syötteen.

Honeypot-tekniikat tunnistetaan aina tehokkaaksi tavaksi lopettaa roskapostit ja minulle tekniikka toimi ok vähentää roskapostia hallittavalle tasolle päivässä. Sisällä minun sähköpostiohjelma haluaisin valita kaikki roskapostit ja poistaa ne massa, kaikki melko suoraan eteenpäin, jos aikaa vievää.

siirtyminen Netlifyyn #

osana infrastruktuurin muutosta CANAXESSIN verkkosivusto siirrettiin Netlifyyn, mikä tarkoitti sitä, että nykyistä roskapostinsuodatustekniikkaa, johon luotettiin, jouduttiin miettimään uudelleen, koska edellinen sivusto oli rakennettu.Netiin ja isännöi. Net-ympäristössä.

aluksi päätin mennä ilman roskapostisuojausta ja vain katsoa, miten se meni. Kuten arvata saattaa, roskapostiviestit tulivat paksuina ja nopeasti.

käyttämällä honeypot #

Netlify tarjota honeypot ominaisuus, joka noudattaa samaa tekniikkaa käyttää piilotettu kenttään ja jos tämä on valmiiksi kaikki sähköpostit lähetetään roskapostikansioon.

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

tekniikka toimi erittäin tehokkaasti; tavallisiin sähköpostikansioihin ei koskaan päässyt laillisia sähköposteja.

mutta roskapostikansio kertoi toista tarinaa. Oli sivuja roskapostin tuloksia, jossa aiemmin voisin valita kaikki sähköpostit massa ja poistaa, Netlify lähestymistapa tarkoitti vain 10-20 sähköpostit palautettiin kerrallaan hakulaitteet käytetään siirtyä seuraavan kymmenen sähköpostit. Ei ollut massa poistaa ominaisuus ja jouduin poistamaan yksittäisiä.

tämä oli uskomattoman aikaa vievää ja pitkäveteistä. Kirjoitin Javascript bookmarklet jonka toivoin helpottaisi tarkistaa kaikki valintaruutu valvonta sivulla ja poistaa kaikki tietueet.

valitettavasti sivun logiikka ei tunnustanut bookmarklet ’ n olevan fyysisesti vuorovaikutuksessa jokaisen kontrollin kanssa eikä sallinut kaikkien sähköpostien valintaa massasta.

en myöskään voinut olla varma, olivatko roskapostikansiossa olevat sähköpostit vääriä positiivisia – väärin tunnistettuja sähköposteja, mikä tarkoitti sitä, että minun piti troolata kaikki sähköpostit läpi vahvistaakseni.

diskonttaus re #

Netlify antaa Google re Ja minä aluksi harkitsin sen käyttöä, koska sähköpostit lisääntyivät päivittäin.

kuitenkin käsitys siitä, että verkkosisällön esteettömyysyritys käyttäisi tunnettua luoksepääsemätöntä menetelmää, jossa ihmiset ottaisivat heihin yhteyttä, ei ollut hyvä.

olen aiemmin kirjoittanut siitä, kuinka kauhea tekniikka on heikentää verkkosivuston saavutettavuutta ja ajattelin, että jos en voisi ratkaista tätä ongelmaa, mitä toivoa on muilla.

päätin ohjelmoida tieni ulos siitä.

tee lomakkeesta vähemmän houkutteleva botteille #

minun piti saada yhteydenottolomake näyttämään vähemmän yhteydenottolomakkeelta ja vähemmän houkuttelevalta botteille. Aloin poistaa method – attribuuttia muotoelementistä. Jos attribuuttia method ei ole, ajattelin, että lomaketta ei voi lähettää.

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

valitettavasti, vaikka attribuutti poistettiin, Netlify sovelsi method-attribuutin takaisin lomakkeeseen, kun sivusto otettiin käyttöön ja tätä en voinut kontrolloida.

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

käyttämällä jQueryä attribuutin #

poistamiseen päätin käyttää JavaScriptiä (jQuery) poistaakseni method – attribuutin dynaamisesti sen jälkeen, kun sivu oli ladattu. JQuery ready-tapahtuman avulla valitaan muotoelementti ja poistetaan attribuutti method.

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

tämän jälkeen vaadittiin tapa lisätä attribuutti takaisin lomakeelementtiin ennen lähettämistä. Jouduin lisäämään sen takaisin järjestyksessä varmista, että attribuutti on olemassa ennen lomakkeen lähettämistä muuten lomake virhe pois ja käyttäjä törmää rikki yhteydenottolomake, tuskin ihanteellinen!

korvaamalla submit-painikkeen #

lisäksi olin päättänyt poistaa myös submit – painikkeen. Mietitään jos ei ollut submit painiketta lomake ei voi lähettää kautta päättömän selaimen (jos roskapostittajat käyttää tätä tekniikkaa), koska se näyttää vähemmän kuin yhteydenottolomake ja enemmän kokoelma syöttökenttiä.

lomakkeen toimittaminen tapahtuisi tavallisen button elementin kautta vain ohjelmallisesti.

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

lisäämällä method-attribuutin submit #

tavallisessa painikkeessa oli click event handler, joka lisäsi method-attribuutin ja-arvon takaisin lomakeelementtiin.

kun painiketta napsautetaan, attribuutti lisätään, mutta saattaa olla tapauksia, joissa komentosarjaelementtien ajoitus tapahtuu toisin kuin halusin.

tämän voittamiseksi lisäsin ajastusvälin. Tämä tarkistaa toistuvasti method – attribuutin lomakeelementin 100 millisekunnin välein, jos method – attribuuttia ei ole olemassa, lomaketta ei toimiteta.

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

lomakkeen toimittaminen tapahtuu vain silloin, kun method – attribuutti on olemassa, ja tämä tapahtuisi ohjelmallisesti. Kun lomake oli toimitettu, intervalliaika päättyisi.

clearInterval(checkExist);

luulin, että tämä oli aika tehokas tapa yli suunnittelu yhteydenottolomake pysäyttää botteja, mutta minun luottamus ei ollut kestää. Palasin muutaman tunnin kuluttua löytää roskapostit kerätä uudelleen.

lomakkeen toimittaminen tapahtuu HTTP #

kautta ja sitten se valkeni minulle, botit eivät luultavasti edes vieraile sivulla selaimen kautta, he eivät välitä kaikista jQuery-skripteistä, jotka toimivat asiakkaiden puolella poistamalla elementtejä.

method-attribuutti on olemassa, kun sivu ladataan, ja siitä se on yksinkertainen HTML: n kaavinta ja lomakkeen toimittaminen HTTP-postauksen kautta ilman, että se on koskaan vuorovaikutuksessa sivun kanssa.

ja juuri tämä oivallus sai minut sitten tunnistamaan tekniikan, joka ei vain hidastaisi roskapostia vaan pysäyttäisi ne. Tämän tekniikan jälkeen en ole saanut yhtään sähköpostia.

sivun erottaminen lomakkeesta #

tekniikka lataa Lomakepalasen JavaScriptin kautta, kun sivu on ladattu. Toteaminen roskapostia vastaan luultavasti eivät käytä päätön selain navigoida yhteystietosivulle ja lähettää lomakkeen olen sen sijaan tehnyt lomakkeen vain näkyviin, kun sivu on ladattu selaimesta.

selaimessa renderöity yhteystietosivu on yksi sivu, mutta todellisuudessa se koostuu kahdesta osasta. Pääsivu, jossa on paikkamerkki lomakekomponentille ja itse lomakesisällölle.

<div></div>

lomakkeen lataaminen sivun kuormaan #

kun sivu on ladattu, jQuery ready-tapahtuma lataa lisälomakkeen lomakesäiliöön DIV lähes välittömästi.

botti ei koskaan tunnista lomakepalasivua, koska botin näkemällä alkusivulla ei ole lomakeelementtiä, vaan tämä ladataan vasta, kun sivu on ladattu JavaScriptin kautta.

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

yhteenvetona #

tekniikka vaatii JavaScriptin toimiakseen. Koska Javascript on tullut hyväksytty osa web-kehitystä mielestäni se on realistinen ratkaisu lopettaa roskapostin tietyissä erityistilanteissa.

muu honeypot-kenttien käyttötekniikka on aina ongelmallinen, koska kokemukseni mukaan se ei ollut niin tehokas.

Roskaposti löytäisi silti tiensä läpi ja jos olen rehellinen, honeypot-tekniikka voidaan luokitella vain roskapostin rajoitukseksi, mikä vähentää roskapostin läpimenoa.

vaikka käyttö toimisi ja olisi nopea ratkaisu, sen käyttö heikentää Internetin saatavuutta vammaisille.

poistamalla yhteydenottolomakkeen renderöinnistä osana tavallista HTTP get-pyyntöä sen näkyvyys botteihin näyttää vähentyvän merkittävästi ja sen vuoksi vähentää (ja minun tapauksessani on lopettanut) bottien mahdollisuutta lähettää roskapostia yhteydenottolomakkeen kautta.

Things for you to try #

whether the framework your site is used, if your contact form is being trouble by spam try these approaches:

• erota sivu ja lomake
• lataa lomake sen jälkeen, kun sivu on ladattu
• lähetä lomakkeet vain ohjelmallisesti käyttäen button elementtejä
• Poista method attribuutti lomakkeista ja lisää ne osana lomakkeen toimittamista