Zastavte roboty s Google reCAPTCHA

Udržování botů Vždy je hra čísel - bohužel, dostupnost snadno použitelných strojních knihoven strojních učení udělal praskání mnoho klasických typů captcha jednoduché. Google stojí v čele bottingové bouře - koneckonců, něco existuje pouze v případě, že lze nalézt (prominentně) v indexech Big G.

Díky tomu se Google inženýři věnují značné množství úsilí do navrhování systémů a řešení anti-bot. Jsou zpřístupněny třetím stranám prostřednictvím produktu nazvaný reCAPTCHA, který půjdeme společně během následujících kroků. Pro více nástrojů nesouvisející s roboty, viz naše Web Design Tools. pošta.

Než začnete, je však třeba vyčistit několik základních věcí. Především: Udržování botů je vždy server-vedle sebe. Kontrola návratových hodnot vašeho anti-bot opatření na klienta je idiotická. Útočník může analyzovat zdrojový kód nebo jednoduše obejít opravou ověření návratu.

Sekruhé mějte na paměti, že ne všechny roboty jsou vytvořeny stejné. Zamknutí GoogleBotu například vede k webu, které již nejsou indexovány. Podobné problémy se mohou vyskytnout u jiných botů specifických pro průmysl, které často více než ublíží. Konečně, Bots by v některých případech mohly být menší zlo - když je provoz vše, co potřebujete, klikněte na bot, poukázet se na cvaknutí.

• 8 Amazing Google API (a jak je používat)

01. Zaregistrujte se Go-Go!

Společnost Google si udržuje blízké oko uživatele Recaptcha. Hlavu a použijte účet Google, abyste se přihlásili. Přidat "localhost" kromě své oblíbené domény pod doménem. Vyberte typ "Nejsem není robot" typu, protože je to nejznámější anti-bot opatření.

02. Store web a serverová tlačítka

Google Rewards vytrvalost v práci prostřednictvím procesu nastavení zobrazením serveru a klíč webu. Zatímco to může být sdíleno se třetími stranami, zajistit, aby tajný klíč nikdy neopustí omezení serveru prostředí.

03. Rozumět ověření webu

Společnost Google používá variantu procesu odezvy výzev k zajištění integrity výsledků. CAPTCHA instance vrátí kryptografickou hodnotu, kterou je server "zapnout" na ověřovací systém, který je hostován velkým gem, který je v případě, že výsledky budou platné, je správná odpověď HTTP vrácena do back-end logiky.

04. Nastavení Express.js

Je důležité prokázat řešení otočného klíče zobrazující celý průtok autentizace. Vzhledem k tomu musíme začít s "serverem" druhu - Express JS byl častým tématem nedávno, takto nasazení na nově vytvořený projektový skelet.

 Tamhan @ Tamhan-ThinkPad: ~ / Nodeespace / Nodeverify $
NPM inite
Napsal / Yome/tamhan/nodespace/nodeverify/package.json:
  . . .
Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / Nodeverify $
NPM nainstalovat požadavek na karoserii
. . .
+ tě[email protected].
+ pož[email protected].
+ [email protected] 

05. Připravte se na sloužit

Načítání známého "I nejsu robot" zaškrtávací políčko vyžaduje soubor HTML. Vzhledem k tomu, že se jedná o vzorek, který demonstruje tok interakce, začněte se statickým dokumentem obsahujícím, který je uveden v tomto kroku.

 & lt; html & gt;
& lt; hlava & gt;
& lt, titul & gt; reCAPTCHA demo: jednoduchá stránka
& lt; / titul & gt;
& lt; skript src = "https://www.google.com/reecaptcha/api.js" async odložení & gt; & lt; / script & gt;
& lt; / hlava & gt;
& lt; tělo & gt;
& lt; formulář akce = "?" metoda = "post" & gt;
& lt; Div class = "g-reCAPTCHA" dat-sitey = "your_site_key" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt, vstup typu = "odeslat" hodnotu = "odeslat" & gt;
& lt; / forma & gt;
& lt; / tělo & gt;
& lt; / html & gt; 

06. Rozumět a testovat

Google poskytuje soubor API obsahujícího logiku CAPTCHA. Když je načten API.JS, kód obsažený v něm analyzuje DOM a nahradí všechny & lt, div a gt; Značky obsahující správnou značku třídy. & lt; předložit & gt; Tagy jsou od tohoto psaní ponechány sami. Ať tak či onak, spusťte kód v prohlížeči volby, abyste viděli výše uvedené výsledky.

07. Vložte některé prvky

Vytvoření dodacího řetězce v Express.js vyžaduje trochu inteligence. Jeden opravdu užitečný pomocník je bodyparser. Je-li vloženo do vykreslovacího pracovního postupu, jednotlivá pole vrácená ze serveru mohou být přístupná pomocí objektově orientovaných návrhů návrhů, které je velmi zjednodušují manipulaci s nimi.

 VAR Express = Vyžadovat ("Express");
var bodyParser = požadovat ("tělo-parser");
var žádosti = požadovat ("požadavek");

var myapp = expres ();

myapp.use (bodyparser.json ());
myapp.use (bodyparser.urlencoded ({rozšířeno: true}); 

08. Připravte se na ověření ...

Zaškrtávací políčko Google Má jeho kouzlo v pozadí - při hotovosti, nazývá se nové pole g-reCAPTCHA-reakce se přidá do atributů formuláře. Tato data musí být odeslána na servery Google pro ověření. Dlouhý řetězec v kódu doprovázející tento krok je nahrazen jedním google přiřazeným vám.

 myapp.post ("/ tamstest", funkce (požadavek, odpověď) {
var reCaptcha_Url = "https://www.google.com/reecaptcha/api/siteVerify?";
reCAPTCHA_URL + = "Secret = 6lewmzguaaaaairsb2gv5akkx2cwyfulkzrmd7ws & amp;";
reCAPTCHA_URL + = "odpověď =" + request.Body ["g-recaptcha-odezva"] + "& amp;";
reCAPTCHA_URL + = "roteip =" + request.connection.remoteaddress; 

09. ... a informujte se na serverech Google

Další akt zahrnuje vypálení adresy URL na server. To je dosaženo prostřednictvím tradičního požadavku JSON na základě adresy vytvořené v předchozím kroku. Jeho výsledky jsou pak analyzovány - pokud je chyba hozena, bude selhání vráceno do aplikace na straně klienta.

 Žádost (reCAPTCHA_URL, funkce (chyba,
resp, tělo) {
tělo = json.parse (tělo);
Pokud (tělo.success! == Undefined & Amp;
úspěch) {
Vrátit odpověď.Send ({"Zpráva":
"Validace CAPTCHA se nezdařilo"});
}
Response.Header ("obsahový typ",
"Aplikace / JSON"). Poslat (tělo);
});
}); 

10. Uvolněte ji

Express.js je HTTP server musí být rozpoután. To je nejlépe dosaženo pomocí struktury aplikace. Mějte na paměti, že porty s číslem, které jsou menší než 1024, jsou omezeny na uživatele kořenového uživatele na operačních systémech Unixoid - 3000 je proto bezpečnou sázkou.

 var server = myapp.listen (3000, funkce () {
console.log ("poslech na" + server.
Adresa (). Port);
}); 

11. Nastavte formulář

Naše forma musí být uveden do kontaktu s místním serverem, který běží uvnitř UnERE.JS. To je nejlépe dosaženo úpravou řetězce akci - nezapomeňte ukazovat cíl na platnou doménu, zejména pokud nepoužíváte server Local Express.js.

12. Přiveďte to!

Testování našeho systému klient-server vyžaduje dva servery z důvodu ověření původu společnosti Google. Naštěstí Python poskytuje rychlý HTTP server - použijte jej k poskytnutí index.htm, zatímco Express.js dostane zařazení k provedení ověření vrácené odpovědi.

 Tamhan @ Tamhan-ThinkPad: ~ / Nodeespace / Nodeverify $
uzel index.js.
Poslech na 3000.
Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / Nodeverify $
python3 -m http.server.
Slouží HTTP na 0,0.0.0 port 8000 ... 

13. Proveďte suchý běh

Při spuštění zkontrolujte zaškrtávací políčko a naplňte všechny výzvy Big G by na vás mohl hodit. Server obvykle nevyžaduje mnoho z hlediska ověření a pokračuje na zobrazení obsahu zobrazeného výše.

14. Zakažte tlačítko Odeslat

Příklady společnosti Google ignorují tlačítko Odeslat na straně klienta jako útočník může vždy znovu objevit s nějakým JavaScriptem. Při vypnutí knoflíku Odeslat ve vztahu k CAPTCHA nezlepšuje bezpečnost, má pozitivní účinky na použitelnost. Začněme vypnutím tlačítka po spuštění.

& lt; forma akce = "http: // localhost: 3000 / tamstest" metoda = "post" & gt;
& lt; dig class = "g-reCAPTCHA" dat-sitey = "6lewmzguaaaaaaaepswpvpans6hlulnjxa_scwtwhyhge" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt, vstup typu = "odeslat" hodnotu = "odeslat" zakázán & gt;
& lt; / forma & gt; 

15. Zvládněte události CAPTCHA

Dále musí být přidán obslužný program událostí. API CAPPCHA CAPPTCHA se bude vyvolat, kdykoli uživatel prošel ověřením pokusu o místo svého klienta.

 & lt; html & gt;
& lt; hlava & gt; . . .
& lt; scénář a gt;
funkce ondcfired (hodnota) {
console.log (hodnota);
}
& lt; / script & gt;
& lt; / hlava & gt;
& lt; tělo & gt;
& lt; formulář akce = "http: // localhost: 3000 /
Tamstest "metoda =" post "& gt;
& lt, divová třída = "g-reCAPTCHA" DATA-SITEKEY = "6LEWMZXAAAAAAAEPSWPVP6HLULLNJXA_SCWTWHYHGE" Data-callback =
"ondcfired" & gt; 

16. Exkurze: Dynamická renderování CAPTCHA

Společnost Google neomezuje vývojáře k tření prvků Recaptcha během zatížení stránky. . \ T poskytnout() Metoda nalezená v Recaptcha API vám umožní určit jeden nebo více & lt, div a gt; Značky na webu, které mají být transformovány do widgetů reCAPTCHA.

 var mycallback = funkce (val) {konzole.
log (val); };
grecaptcha.render (
Document.GetElementsbyid ('My-ID'),
{
zpětné volání: mycallback,
Sitey: MySitey.
}); 

17. V případě potřeby povolte tlačítko ...

S tím zůstane jeden hlavní problém. Tlačítko Odeslat musí být znovu povoleno, když událost Click, kterou poskytuje Recaptcha přijde do našeho kódu aplikace. Načítání jQuery do takového jednoduchého příkladu je zbytečné, takže se místo toho podívej do nějakého prostého Javascriptu.

 & lt; scénář a gt;
funkce ondcfired (hodnota) {
Document.getElementbyid.
(Tlačítko "). Zakázáno = false;
}
& lt; / script & gt; 

 & lt, vstup typu = "Odeslat" ID = "tlačítko"
Hodnota = "Odeslat" zakázáno & gt; 

18. ... a vyčistit po nás

Společnost Google nemůže navždy uložit data odpovědi na výzvu. Vzhledem k tomu, že časy ověření rychle rychle - ve výchozím nastavení, na náš program o tom nenajde. Naštěstí API obsahuje další pole, které lze použít k oznámení.

 Funkce Ondcexpired (hodnota) {
Document.getElementbyid (tlačítko ").
zakázáno = true;
} 

 & lt, div class = "g-reCAPTCHA" dat-sitey = "6lewmzguaaaaaaepswpvp6hlulnjxa_scwtwhyhge"
Data-callback = "ondcfired" data-expired-callback = "ondcexpired" & gt; <82]
  

   19. Použijte další atributy
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   
    Hlavu
   
   Najít seznam vlastností obsažených v API JavaScriptu. Oni nechali upravit různé chování - například Widget Recaptcha může být také vykreslen v nočním barevném schématu!
  
  

   20. Pracujte transparentně ...
  
  

   Google nedávno zavedl třetí verzi Recaptcha API, která nevyžaduje explicitní interakci uživatele. Místo toho jednoduše jej načte během inicializace stránky - kód automaticky monitoruje chování uživatele běžící na webu na webu.
  
  
 Script src = "https://www.google.com/recaptcha/api.js?render=recaptcha_Site_key" & gt; & lt; / script & gt;
& lt; scénář a gt;
grecaptcha.ready (funkce () {
grecaptcha.execute ('reCAPTCHA_SITE_KEY',
{akce: 'domovská stránka'}).
pak (funkce (token) {
...
});
});
& lt; / script & gt; 
  

   21. ... a poskytněte další informace
  
  

   Zisky z dalších údajů o akci, která se provádí na webových stránkách. Úryvek doprovázející tento krok oznámí, že uživatel aktuálně navštíví vaši domovskou stránku. Více informací o API naleznete v dokumentaci.
  
  
 & lt; scénář a gt;
grecaptcha.ready (funkce () {
grecaptcha.execute ('reCAPTCHA_SITE_KEY',
{akce: 'homepage'});
});
& lt; / script & gt; 
  
   

    

     

      

       
        
        
        
       
      
     
    
    
   
  
  

   
    Připojte se k nám v bohaté mix, Shoreditch dne 26. září pro generování CSS, na zakázku konference pro webové designéry vám přináší kreativní bloq, čistý a webový návrhář. Rezervujte si svou časnou jízdenku před 15 srpna
   
   
    
     www.generateconf.com.
    
   
   
    .
   
  
  

   Tento článek byl původně zveřejněn v čísle 287 časopisu Creative Web Design
   
   
    
     Web Designer.
    
   
   
    .
   
   
    
     Prodám vydání 287 zde
    
   
   
    nebo
   
   
    
     Přihlásit se zde web designer zde
    
   
   
    .
   
  
  

   
    Související články:
   
  
  

   

    
     8 Essential WordPress bezpečnostní tajemství
    
   
   

    
     Jak se Codepen učinil bezpečně
    
   
   

    
     9 Bezpečnostní tipy pro ochranu vašich webových stránek od hackerů