Opriți roboții cu Google ReCAPTCHA

Păstrarea robotului este întotdeauna un joc de numere - din păcate, disponibilitatea bibliotecilor de învățare ușor de utilizat a făcut crăparea numeroase tipuri clasice CAPTCHA simple. Google se află în fruntea furtunii de botting - la urma urmei, există doar ceva dacă poate fi găsit (proeminent) în indicii lui Big G.

Datorită acestui lucru, inginerii Google constituie cantități semnificative de efort în proiectarea sistemelor și soluțiilor anti-BOT. Acestea sunt puse la dispoziția unor terțe părți printr-un produs numit ReCAPTCHA, pe care îl vom trece împreună în următorii pași. Pentru mai multe instrumente care nu au legătură cu Bots, vedeți-ne Instrumente de design web post.

Înainte de a începe, totuși, câteva lucruri de bază trebuie să fie clarificate. În primul rând: Păstrarea roboților este întotdeauna un joc de server. Inspectarea valorilor de returnare ale măsurii dvs. anti-Bot pe client sunt idiotice. Un atacator poate analiza codul sursă sau poate pur și simplu să lucreze în jurul acestuia prin adaptarea validării returnării.

În al doilea rând, rețineți că nu toate boturile sunt create egale. Blocarea GoogleBOT, de exemplu, duce la site-ul dvs. web care nu mai este indexat. Probleme similare pot apărea cu alte boturi specifice industriei, care adesea la mai bine decât rău. În cele din urmă, Bots ar putea fi un rău mai mic în unele cazuri - când traficul este tot ce aveți nevoie, un clic bot se dovedește a fi doar un clic.

• 8 uimitoare Google API (și cum să le folosiți)

01. Înscrieți-vă un Go-Go Go!

Google păstrează un ochi apropiat asupra utilizatorilor ReCAPTCHA. Cap de aici și utilizați contul dvs. Google pentru a vă conecta. Adăugați "localHost" în plus față de domeniul dvs. preferat în domenii. Alegeți tipul de selectare "Nu sunt un robot", deoarece este cea mai cunoscută măsură anti-BOT.

02. Depozitați tastele site-ului și serverului

Google recompensează persistența în lucrul prin procesul de configurare prin afișarea unui server și a unei taste a site-ului. În timp ce acesta din urmă pot fi împărtășite cu terțe părți, asigurați-vă că cheia secretă nu lasă niciodată limitele mediului dvs. de server.

03. Înțelegerea verificării site-ului

Google utilizează o variație a procesului de răspuns-răspuns pentru a asigura integritatea rezultatelor. Instanțele CAPTCHA returnează o valoare criptografică pe care serverul trebuie să "întoarcă" la un sistem de verificare găzduit de Big G - Dacă rezultatele se dovedesc a fi valide, un răspuns HTTP corect este returnat la logica dvs. de back-end.

04. Configurați-vă express.js

Este important să demonstrați o soluție de turn-cheie care să arate întregul flux de autentificare. Datorită acestui lucru, trebuie să începem cu un "server" de sortimente - Express JS a fost un subiect frecvent recent, astfel încât să-l implementați într-un schelet de proiect nou creat.

 Tamhan @ Tamhan-ThinkPad: ~ / NODESPACE / NODEVERIFY $
npm init --y.
A scris la /Home/tamhan/nodesspace/nodeverify/package.json:
  . . .
Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodevarify $
NPM Instalați Body-parser Express Solicitare --Save
. . .
+ [email protected].
+ [email protected]
+ [email protected] 

05. Pregătiți-vă să serviți

Încărcarea casetei bine cunoscute "nu sunt o robot" necesită un fișier HTML. Având în vedere că acesta este un eșantion care demonstrează fluxul de interacțiune, începeți cu un document static care conține marcajul arătat care însoțește această etapă.

 & html & gt;
& lt; head & gt;
& lt; titlu & gt; recaptcha demo: Pagina simplă
& lt; / titlu & gt;
& lt; script src = "https://www.google.com/recaptcha/api.js" async aman & gt; / lt; / script & gt;
& lt; / head & gt;
& lt; corp & gt;
& lt; formular action = "?" Metoda = "Post" & GT;
& Lt; Div clasa = "G-recaptcha" date-siteKey = "your_site_key" & gt; / div & gt;
& lt; br / & gt;
& lt; Intrare Tip = "Trimiteți valoarea =" Trimiteți "& GT;
& lt; / form & gt;
& lt; / corp & gt;
& lt; / html & gt; 

06. Înțelegeți și încercați

Google oferă un fișier API care conține logica CAPTCHA. Când API.JS este încărcat, codul conținea în acesta analizează DOM și înlocuiește orice & Lt; div & gt; Etichete care conțin eticheta corectă de clasă. & Lt; Trimiteți & GT; Etichetele sunt lăsate singure de la această scriere. Oricum, rulați codul într-un browser de alegere pentru a vedea rezultatele afișate mai sus.

07. Încărcați unele elemente

Crearea unui lanț de livrare în Express.js necesită un pic de inteligență. Un helper cu adevărat util este Boodparser. Când este încorporat într-un flux de lucru de redare, câmpurile individuale returnate de pe server pot fi accesate folosind modele de design orientate pe obiecte care simplifică foarte mult manipularea acestora.

 Var Express = necesită ("Express");
Var Bodyparser = necesită ("parserul corpului");
VAR Solicitare = necesită ("solicitare");

Var MyApp = Express ();

myApp.use (bodyparser.json ());
myApp.use (Boodparser.urlenCoded ({extins: true})); 

08. Pregătiți-vă pentru a verifica ...

Căsuța de selectare a Google face magia în fundal - când este terminată, un nou câmp numit g-reaptch-răspuns se adaugă la atributele formularului. Aceste date trebuie trimise la serverele Google pentru verificare. Șirul lung din cod care însoțește acest pas este înlocuit cu cel care vă este atribuit Google.

 myApp.post ("/ tamstest", funcția (solicitare, răspuns) {
var reaptcha_url = "https://www.google.com/recaptcha/api/siteverifie?";
recaptcha_url + = "secret = 6lewmzguaaAirsb2gv5akkx2cwyfulkzrmd7ws & amp;
recaptcha_url + = "Răspuns =" ​​+ Solicitare.body ["G-reaptcha-răspuns"] + "& amp;
recaptcha_url + = "RemoteIP =" + Solicitare.Connection.RemoteAddress; 

09. ... și întrebați la serverele Google

Următorul act implică arderea URL-ului către server. Acest lucru se realizează printr-o cerere tradițională JSON bazată pe adresa creată în pasul anterior. Rezultatele sale sunt apoi analizate - dacă este aruncată o eroare, o eroare va fi returnată la aplicația client-laterală.

 Cerere (RECAPTCHA_URL, funcție (eroare,
resp, corp) {
corp = json.parse (corp);
dacă (corp body.success! == nedefinit & amp; & amper;! corp.
succesul) {
returnați răspunsul. Send ({mesaj ":
"Validarea CAPTCHA a eșuat"});
}
răspuns.Header ("tip conținut",
"Aplicație / JSON"). Trimite (corp);
});
}); 

10. Setați-o

Serverul HTTP al express.js trebuie să fie dezlănțuit. Acest lucru este cel mai bine realizat prin utilizarea structurii App.Listen. Rețineți că porturile cu un număr mai mic de 1024 sunt limitate la utilizatorul rădăcină de pe sistemele de operare Unixoid - 3000 este, prin urmare, un pariu sigur.

 var server = myapp.listen (3000, funcția () {
consola.log ("ascultarea on" + server.
adresa (). portul);
}); 

11. Reglați formularul

În cele din urmă, forma noastră trebuie să fie luată în contact cu serverul local care rulează în interiorul NODE.JS. Acest lucru este cel mai bine realizat prin ajustarea șirului de acțiune - asigurați-vă că indicați ținta la un domeniu valid, mai ales dacă nu utilizați un server local Express.js.

 & Lt; corp & gt;
& lt; formular action = "http: // localhost: 3000 / tamstest" metoda = "post" & gt;
"G-recaptcha" "gt;
& lt; br / & gt; 

12. Adu-l!

Testarea sistemului nostru client-server necesită două servere datorită verificării originii Google. Din fericire, Python oferă un server HTTP rapid - utilizați-l pentru a oferi index.htm, în timp ce Express.js devine înscrisă pentru a efectua verificarea răspunsului returnat.

 Tamhan @ Tamhan-ThinkPad: ~ / NODESPACE / NODEVERIFY $
NODE index.js.
Ascultarea pe 3000.
Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodevarify $
Python3 -M http.server.
Servind http pe 0.0.0.0 port 8000 ... 

13. Efectuați o alergare uscată

Când rulați, bifați caseta de selectare și îndepliniți orice provocări Big G ar putea arunca la tine. De obicei, serverul nu cere prea mult în ceea ce privește verificarea și continuă să afișeze conținutul prezentat mai sus.

14. Dezactivați butonul Trimitere

Exemplele Google ignoră butonul Trimitere a clientului ca atacator poate face întotdeauna să reapară cu unele JavaScript. În timp ce dezactivarea butonului de trimitere în legătură cu CAPTCHA nu îmbunătățește securitatea, aceasta are efecte pozitive asupra utilizării. Să începem dezactivarea butonului după pornire.

& lt; formular action = "http: // localhost: 3000 / tamstest" metoda = "post" & gt;
"G-reaptcha" "G-recaptcha" "6lewmzguaaaaepswpvp6hllanjxa_scwtwhyhge" & gt; / div & gt;
& lt; br / & gt;
& lt; Tipul de intrare = "Trimiteți" valoarea = "Trimiteți" Dezactivat și GT;
& lt; / form & gt; 

15. Manipulați evenimentele CAPTCHA

Apoi, trebuie adăugat un manipulator de evenimente. CAPTCHA API-ul Google îl va invoca ori de câte ori utilizatorul a adoptat o încercare de verificare din punct de vedere al clientului său.

 & html & gt;
& lt; head & gt; . . .
& lt; script & gt;
FUNCȚIA ONDCFIRED (valoare) {
consola.log (valoare);
}
& lt; / script & gt;
& lt; / head & gt;
& lt; corp & gt;
& lt; formular action = "http: // localhost: 3000 /
Tamstest "Metoda =" Post "& GT;
& Lt; Div clasa = "G-recaptcha" date-siteKey = "6lewmzguaaaaepswpvpp6hllanjxa_scwtwhyhge" Date-Callback =
"ONDCFIRED" & GT; / LT; ​​/ DIV & GT; 

16. Excursie: Rendering Dynamic CAPTCHA

Google nu limitează dezvoltatorii să repronească elementele ReCAPTCHA în timpul încărcării paginii. face() Metoda găsită în API-ul RECAPTCHA vă permite să desemnați una sau mai multe & Lt; div & gt; Etichete de pe site-ul web care urmează să fie transformate în widget-urile ReCAPTCHA.

 Var MyCallback = Funcția (Val) {consola.
jurnale (val); };
grecaptch.render (
document.getelementsbyid ("ID-ul meu"),
{
apel invers: mycallback,
Sitekey: MySitekey.
}); 

17. Activați butonul dacă este necesar ...

Cu asta, o problemă principală rămâne. Butonul Trimiteți trebuie să fie reactivat atunci când evenimentul de clic oferit de RECAPTCHA ajunge în codul nostru de aplicare. Încărcarea jQuery într-un exemplu atât de simplu este inutilă, astfel încât să vă întoarceți la unele JavaScript simplu în schimb.

 & lt; script & gt;
FUNCȚIA ONDCFIRED (valoare) {
document.getelementbyid.
(Butonul "). Dezactivat = FALSE;
}
& lt; / script & gt; 

 & lt; introduceți butonul "ID =" "
Valoare = "Trimiteți" Dezactivat și GT; 

18. ... și curățați-vă după noi

Google nu poate stoca datele de răspuns la provocare pentru totdeauna. Datorită acestui fapt, verificarea timpului destul de rapid - în mod implicit, programul nostru nu se află în legătură cu acest lucru. Din fericire, API conține un câmp suplimentar care poate fi folosit pentru a notifica.

 funcția ondcexpired (valoare) {
document.getelementbyid ("buton").
Dezactivat = adevărat;
} 

 Div clasa = "g-recaptcha" date-siteKey = "6lewmzguaaaaepswpvp6hllulnjxa_scwtwhyhge"
Data-callback = "ONDCFIRED" A expirat de date-callback = "ONDCEXPIRED" & GT;> / div & gt; 

19. Folosiți atribute suplimentare

Cap de aici Pentru a găsi o listă de proprietăți incluse în API JavaScript. Ei vă permit să ajustați diverse comportamente - de exemplu, widgetul ReCAPTCHA poate fi, de asemenea, redat într-o schemă de culori prietenoasă de noapte!

20. Lucrați transparent ...

Google a introdus recent oa treia versiune a API-ului ReCAPTCHA, care nu necesită interacțiune explicită a utilizatorilor. În schimb, îl încărcați pur și simplu în timpul inițializării paginilor - codul monitorizează automat comportamentul utilizatorului care rulează Wild pe site-ul Web.

 & lt; script src = "https://www.google.com/recaptcha/api.js?render=recptcha_site_key" & gt; / script & gt;
& lt; script & gt;
grecaptcha.ready (funcția () {
grecaptcha.execute ("recaptch_site_key",
{acțiune: "Pagina de start"}).
apoi (funcția (token) {
...
});
});
& lt; / script & gt; 

21. ... și să furnizeze informații suplimentare

Plug-in profitul din alte date despre acțiunea care este efectuată pe site. Fragmentul care însoțește acest pas va anunța că utilizatorul vizitează în prezent pagina dvs. de pornire. Mai multe informații despre API pot fi găsite în documentație.

 & lt; script & gt;
grecaptcha.ready (funcția () {
grecaptcha.execute ("recaptch_site_key",
{acțiune: "pagina de pornire"});
});
& lt; / script & gt; 

Alăturați-vă la Rich Mix, Shoreditch pe 26 septembrie pentru Generarea CSS, o conferință personalizată pentru designerii web, adusă la dvs. de Creative Bloom, Net și Web Designer. Rezervați biletul de păsări timpurii înainte de 15 august la www.generateconf.com. .

Acest articol a fost publicat inițial în numărul 287 din revista Creative Web Design Web designer . Cumpărați problema 287 aici sau Aboneaza-te la designerul web aici .

Articole similare:

• 8 secrete esențiale de securitate WordPress
• Cum a făcut codepenul în siguranță
• 9 Sfaturi de securitate pentru a vă proteja site-ul de hackeri