Stoppa botsna med Google Recaptcha

Att hålla bots ut är alltid ett nummer spel - tyvärr, tillgängligheten av lättanvänd maskininlärning bibliotek gjorda av att spricka många klassiska CAPTCHA-typer enkla. Google står i framkant av bottingstormen - trots allt existerar det bara om det kan hittas (framträdande) i Big G: s index.

På grund av detta ägnar Google-ingenjörer betydande ansträngningar i att utforma anti-bot-system och lösningar. De är tillgängliga för tredje part via en produkt som heter ReCAPTCHA, som vi kommer att gå över tillsammans under följande steg. För fler verktyg som inte är relaterade till bots, se vår Webbdesignverktyg posta.

Innan du börjar, måste dock några grundläggande saker rensas upp. Först av allt: Att hålla bots ut är alltid ett server-side-spel. Inspektera returvärdena för din anti-bot-åtgärd på klienten är idiotisk. En angripare kan analysera källkoden eller bara arbeta runt det genom att patchera returvalideringen.

För det andra, kom ihåg att inte alla bots skapas lika. Låser ut Googlebot, till exempel, leder till att din webbplats inte indexeras längre. Liknande problem kan uppstå med andra branschspecifika bots som ofta är mer bra än skada. Slutligen kan bots vara en mindre ondska i vissa fall - när trafiken är allt du behöver, klickar du på att vara ett klick.

• 8 fantastiska google apis (och hur man använder dem)

01. Registrera en go-go!

Google håller ett nära öga på recaptcha-användare. Huvudet här och använd ditt Google-konto för att logga in. Lägg till "localhost" utöver din favoritdomän under domäner. Välj "Jag är inte en robot" kryssrutan typ som den är den mest kända anti-bot-åtgärden.

02. Store webbplats och servernycklar

Google Rewards Persistence i att arbeta genom installationsprocessen genom att visa en server och en webbplatsnyckel. Medan den senare kan delas med tredje part, se till att den hemliga nyckeln aldrig lämnar gränserna för din servermiljö.

03. Förstå webbplatsverifiering

Google använder en variation av utmaningsreaktionsprocessen för att säkerställa resultatintegritet. CAPTCHA-instanser returnerar ett kryptografiskt värde som servern är att "gå in" till ett verifieringssystem som är värd för BIG G - om resultaten visar sig vara giltiga, returneras ett korrekt HTTP-svar till din back-end-logik.

04. Ställ in express.js

Det är viktigt att demonstrera en nyckellösning som visar hela autentiseringsflödet. På grund av detta måste vi börja med en "server" av sorts - Express JS var ett frekventt ämne som nyligen, så använd det till ett nyskapat projektskelett.

 Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodeverify $
npm init -y
Skrev till /home/tamhan/noDespace/noDeverIFY/Package.json:
  . . .
Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodeverify $
NPM Installera Body-Parser Express Request --Save
. . .
+ [email protected]
+ begä[email protected]
+ [email protected] 

05. Förbered dig för att tjäna

Laddar den välkända "Jag är inte en robot" kryssrutan kräver en HTML-fil. Med tanke på att detta är ett prov som demonstrerar interaktionsflödet, börja med ett statiskt dokument som innehåller markeringen som visas med åtföljande detta steg.

 & lt; html & gt;
& lt; huvud & gt;
& lt; titel & gt; recaptcha demo: Enkel sida
& lt; / titel & gt;
& lt; script src = "https://www.google.com/recaptcha/api.js" Async Defer & GT; & LT; / Script & GT;
& LT; / Head & GT;
& lt; kropp & gt;
& lt; form action = "?" Metod = "Post" & GT;
& lt; Div Class = "G-reCAPTCHA" Data-SiteKey = "Your_Site_Key" & GT; & LT; / Div & GT;
& lt; BR / & GT;
& lt; Input Type = "Skicka" värde = "Skicka" & GT;
& LT; / Form & GT;
& LT; / Body & GT;
& lt; / html & gt; 

06. Förstå och testa

Google ger en API-fil som innehåller CAPTCHA-logiken. När API.JS är laddade, analyserar koden i den DOM och ersätter någon & lt; div & gt; Taggar som innehåller rätt klassmärke. & lt; skicka in och gt; Taggar lämnas ensamma som detta skrivande. Hur som helst, kör koden i en webbläsare av val för att se resultaten ovan.

07. Ladda några element

Att skapa en leveranskedja i Express.js kräver lite intelligens. En väldigt användbar hjälpare är Bodyparer. När de är inbäddade i ett återgivande arbetsflöde kan de enskilda fälten som returneras från servern nås med hjälp av objektorienterade designmönster som mycket förenklar hanteringen av dem.

 VAR Express = Kräver ("Express");
var bodyparser = kräver ("kroppsparser");
Var Request = Kräv ("Begäran");

Var myApp = Express ();

myapp.use (Bodyparser.json ());
myapp.use (bodyparser.urlencoded ({Extended: True})); 

08. Förbered dig för att verifiera ...

Googles kryssruta gör sin magi i bakgrunden - när det är klart, kallas ett nytt fält G-reCAPTCHA-svar läggs till i formuläret för attribut. Dessa data måste skickas till Googles servrar för verifiering. Den långa strängen i koden som åtföljer detta steg är att ersättas med den enda Google som är tilldelad till dig.

 myapp.post ("/ tammestest", funktion (förfrågan, svar) {
var recaptcha_url = "https://www.google.com/recaptcha/api/siteVerify?";
reCAPTCHA_URL + = "SECRET = 6LEWMZGUAAAAAIRSB2GV5AKKX2CWYFULKZRMD7WS & AMP;";
reCAPTCHA_URL + = "Response =" + Request.Body ["G-reCAPTCHA-Response"] + "& amp;";
reCAPTCHA_URL + = "REMOTEIP =" + Request.Connection.Remoteaddress; 

09. ... och fråga på Googles servrar

Nästa handling innefattar att avfyra URL-adressen till servern. Detta åstadkommes via en traditionell JSON-förfrågan baserat på adress som skapats i föregående steg. Dess resultat analyseras sedan - om ett fel kastas, kommer ett fel att returneras till klientsidan.

 Begäran (reCAPTCHA_URL, funktion (fel,
resp, kropp) {
kropp = json.parse (kropp);
Om (Body.Success! == odefinierad & amp; & amp;! kropp.
Framgång) {
Retur svar.Send ({"Meddelande":
"CAPTCHA-validering misslyckades"});
}
Response.Header ("Innehållstyp",
"Application / JSON"). Skicka (kropp);
});
}); 

10. Ställ det lös

Express.js HTTP-server måste släppas ut. Detta uppnås bäst genom att använda applisten struktur. Tänk på att hamnar med ett nummer som är mindre än 1024 är begränsade till rotanvändaren på unixoid operativsystem - 3000 är därför en säker satsning.

 var server = myapp.listen (3000, funktion () {
Console.log ("Lyssna på" + Server.
adress (). hamn);
}); 

11. Justera formuläret

Slutligen måste vår form i kontakt med den lokala servern som kör inuti node.js. Detta uppnås bäst genom att justera åtgärdssträngen - var noga med att peka på målet till en giltig domän, speciellt om du inte använder en lokal express.js-server.

 & lt; kropp & gt;
& lt; form action = "http: // localhost: 3000 / tamstest" metod = "post" & gt;
& LT; Div Class = "G-reCAPTCHA" Data-SiteKey = "6LewmzGuaaaaaeepswpvp6hlulnjxa_scwtwhyhge" & GT; & LT; / Div & GT;
& lt; br / & gt; 

12. Ta upp det!

Test av vårt klientserversystem kräver två servrar på grund av Googles ursprungsverifiering. Lyckligtvis ger Python en snabb http-server - använd den för att ge index.htm, medan Express.js blir anlitade för att utföra verifieringen av det återvände svaret.

 Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodeverify $
noddex.js
Lyssna på 3000
Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodeverify $
python3-m http.server
Servering http på 0.0.0.0 port 8000 ... 

13. Utför en torr körning

När du kör, markera kryssrutan och uppfylla alla utmaningar BIG G kan kasta på dig. Servern kräver vanligtvis inte mycket vad gäller verifiering och fortsätter att visa innehållet ovan.

14. Inaktivera knappen Skicka

Googles exemplar ignorerar knappen Klient-sida Skicka som en angripare alltid kan göra det återkommande med lite javascript. När du har inaktiverat Skicka-knappen i förhållande till CAPTCHA förbättrar inte säkerheten, har den positiva effekter på användbarhet. Låt oss börja med att inaktivera knappen efter start.

& lt; form action = "http: // localhost: 3000 / tamstest" metod = "post" & gt;
& LT; Div Class = "G-reCAPTCHA" Data-SiteKey = "6LewmzGuaaaaaeepswpvp6hlulnjxa_scwtwhyhge" & GT; & LT; / Div & GT;
& lt; BR / & GT;
& lt; Input Type = "Skicka" värde = "Skicka" funktionshindrade och GT;
& LT; / Form & GT; 

15. Hantera CAPTCHA-händelser

Nästa upp måste en händelsehanterare läggas till. Googles CAPTCHA API kommer att åberopa det när användaren passerade ett verifieringsförsök från sin klientsidans synvinkel.

 & lt; html & gt;
& lt; huvud & gt; . . .
& lt; script & gt;
funktion ondcfired (värde) {
konsol.log (värde);
}
& lt; / script & gt;
& LT; / Head & GT;
& lt; kropp & gt;
& lt; form action = "http: // localhost: 3000 /
Tammestest "Metod =" Post "& GT;
Div Class = "G-reCAPTCHA" Data-SiteKey = "6LEWMZGUAAAAAEPSWPVP6HLULNJXA_SCWTWHYHGE" DATA-CALLBACK =
"Ondcfired" & GT; & LT; / Div & GT; 

16. Utflykt: Dynamisk CAPTCHA RENDERING

Google begränsar inte utvecklare till Spawning Recaptcha-element under sidbelastningen. De framställa() Metod som finns i Recaptcha API låter dig ange en eller flera & lt; div & gt; Taggar på webbplatsen som ska omvandlas till recaptcha-widgets.

 var myCallback = Funktion (Val) {konsol.
logg (Val); };
grectaptcha.Render (
document.getElementBoid ('My-ID'),
{
Återuppringning: MyCallback,
SiteKey: mysitey
}); 

17. Aktivera knappen om det behövs ...

Med det är en huvudfråga kvar. Skicka-knappen måste återaktiveras när klickhändelsen som tillhandahålls av Recaptcha anländer i vår ansökningskod. Laddar jquery i ett så enkelt exempel är onödigt, så fall tillbaka till något vanligt javascript istället.

 & lt; script & gt;
funktion ondcfired (värde) {
document.getelementbyid
("Knapp"). Inaktiverad = falskt;
}
& lt; / script & gt; 

 & lt; Input Type = "Skicka" id = "-knapp"
värde = "Skicka" funktionshindrade och GT; 

18. ... och städa upp efter oss

Google kan inte lagra utmaningsresponsdata för alltid. På grund av det, Verifieringstiderna är ganska snabbt - som standard, vårt program får inte det. Lyckligtvis innehåller API ett ytterligare fält som kan användas för att meddela.

 Funktion OndCexpired (värde) {
document.getElementByid ("-knapp").
inaktiverad = sant;
} 

 & lt; Div Class = "G-reCAPTCHA" Data-SiteKey = "6LewmzGuaaaaaeepswpvp6hlulnjxa_scwtwhge"
Data-Callback = "Ondcfired" Data-Expired-Callback = "OndcExpired" & GT; & LT; / Div & GT; 

19. Använd ytterligare attribut

Huvudet här För att hitta en lista över egenskaper som ingår i JavaScript API. De låter dig justera olika beteenden - till exempel, kan recaptcha-widgeten också göras i ett nattvänligt färgschema!

20. Arbeta transparent ...

Google introducerade nyligen en tredje version av Recaptcha API som inte kräver explicit användarinteraktion. Istället laddar du helt enkelt det under sidinitialiseringen - Koden övervakar automatiskt beteendet hos användaren som kör vild på webbplatsen.

 & lt; script src = "https://www.google.com/recaptcha/api.js?render=Recaptcha_site_key" & GT; & LT; / Script & GT;
& lt; script & gt;
grecaptcha.Ready (funktion () {
grecaptcha.execute ('recaptcha_site_key',
{Åtgärd: "hemsida"}).
Då (funktion (token) {
...
});
});
& lt; / script & gt; 

21. ... och ge ytterligare information

Plug-in-vinsten från ytterligare data om åtgärden som utförs på webbplatsen. Snippet som åtföljer detta steg kommer att meddela att användaren för närvarande besöker din hemsida. Mer information om API finns i dokumentationen.

 & lt; script & gt;
grecaptcha.Ready (funktion () {
grecaptcha.execute ('recaptcha_site_key',
{Åtgärd: "hemsida"});
});
& lt; / script & gt; 

Följ med oss ​​på Rich Mix, Shoreditch den 26 september för generera CSS, en skräddarsydd konferens för webbdesigners med dig av Creative Bloq, Net och Web Designer. Boka din tidiga fågelbiljett före den 15 augusti på www.generateconf.com .

Den här artikeln publicerades ursprungligen i utgåva 287 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 287 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

• 8 Essential WordPress Security Secrets
• Hur Codepen gjorde sig säker
• 9 Säkerhetstips för att skydda din webbplats från hackare