Stoppen Sie die Bots mit Google ReCaptcha

Die Halten von Bots Out ist immer ein Zahlenspiel - leider ist die Verfügbarkeit von benutzerfreundlichen Machine-Lernbibliotheken, die viele klassische CAPTCHA-Typen einfach machen. Google steht an der Spitze des Botting-Sturms - schließlich existiert etwas nur, wenn es in den Indizes von Big G (prominent) gefunden werden kann.

Aufgrund dieser widmen Google Engineers erhebliche Mengen an Anstrengungen zur Gestaltung von Anti-Bot-Systemen und -lösungen. Sie werden Dritten über ein Produkt namens Recaptcha zur Verfügung gestellt, das wir in den folgenden Schritten zusammengehen. Für mehr Werkzeuge, die nicht mit Bots zusammenhängen, sehen Sie unsere Webdesign-Tools. Post.

Vor dem Erste Schritte müssen jedoch ein paar grundlegende Dinge gelöscht werden. Zunächst einmal: Bots auszuhalten, ist immer ein serverseitiges Spiel. Inspizieren der Rückgabewerte Ihres Anti-Bot-Maßes auf dem Client ist idiotisch. Ein Angreifer kann den Quellcode analysieren oder einfach mit der Rendite-Validierung umgehen.

Beachten Sie jedoch, dass nicht alle Bots gleich erzeugt werden. Das Sperren des GoogleBots führt zum Beispiel dazu, dass Ihre Website nicht mehr indexiert wird. Ähnliche Probleme können mit anderen branchenspezifischen Bots auftreten, die oft so gut wie schaden sind. Schließlich könnten Bots in einigen Fällen ein kleineres Böse sein - wenn der Verkehr lediglich Sie brauchen, ist ein Bot-Klick heraus, um nur ein Klick zu sein.

• 8 Erstaunliche Google-APIs (und wie man sie benutzt)

01. Anmeldung ein Go-Go!

Google hält Recaptcha-Benutzer in der Nähe ein Auge. Kopf hier und verwenden Sie Ihr Google-Konto, um sich anzumelden. Fügen Sie "localhost" neben Ihrer bevorzugten Domäne unter Domains hinzu. Wählen Sie den Checkbox-Typ "Ich habe keinen Checkbox-Typ", da es sich um die bekannteste Anti-Bot-Messung handelt.

02. Standort- und Serverschlüssel speichern

Google belohnt Persistenz beim Arbeiten über den Setup-Prozess, indem er einen Server und einen Site-Schlüssel anzeigt. Obwohl letztere mit Dritten geteilt werden kann, stellen Sie sicher, dass der geheime Schlüssel niemals die Grenzen Ihrer Serverumgebung verlässt.

03. Verstehen Sie die Site-Überprüfung

Google verwendet eine Variation des Challenge-Response-Prozesses, um die Ergebnisintegrität sicherzustellen. CAPTCHA-Instanzen Gibt einen kryptographischen Wert zurück, den der Server in einem von Big G gehosteten Überprüfungssystem "einschalten soll - wenn die Ergebnisse gültig sein, wird eine korrekte HTTP-Antwort an Ihre Back-End-Logik zurückgegeben.

04. Richten Sie express.js einrichten

Es ist wichtig, eine Turn-Key-Lösung zu demonstrieren, die den gesamten Authentifizierungsfluss zeigt. Aufgrund dessen müssen wir mit einem "Server" von Sorts-Sorts anfangen - Express JS war kürzlich ein häufiges Thema, also bereitstellen Sie es an ein neu erstelltes Projekt-Skelett.

 Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodeVerifizieren $
npm init --y.
Schrieb an /home/tamhan/nodespace/nodeverify/package.json:
  . . .
Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodeVerifizieren $
NPM installieren Body-Parser Express-Anforderung --Save
. . .
+ [email protected].
+ [email protected].
+ [email protected] 

05. Bereiten Sie sich auf den Servieren vor

Das Kontrollkästchen "I AM kein Roboter" erfordert eine HTML-Datei erforderlich. In Anbetracht dessen, dass dies eine Probe ist, die den Interaktionsfluss demonstriert, beginnen Sie mit einem statischen Dokument, das den auf diesem Schritt dargestellten Aufschlag enthält.

 & lt; html & gt;
& lt; head & gt;
& lt; titel & gt; recaptcha Demo: einfache Seite
& lt; / title & gt;
& lt; Skript SRC = "https://www.google.com/recaptcha/api.js" async acher & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; Forme Action = "?" Methode = "post" & gt;
& lt; div class = "g-recaptcha" Daten-SiteKey = "your_site_key" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; Eingabetyp = "Senden" Wert = "Senden" und GT;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt; 

06. Verstehen und testen

Google bietet eine API-Datei mit der CAPTCHA-Logik. Wenn API.JS geladen ist, analysiert der darin enthaltene Code das DOM und ersetzt alle & lt; div & gt; Tags mit dem richtigen Klassen-Tag enthalten. & lt; Senden & GT; Tags werden ab diesem Schreiben allein gelassen. Führen Sie den Code in einem Browser in einem Browser aus, um die oben angegebenen Ergebnisse anzuzeigen.

07. Legen Sie einige Elemente ein

Die Erstellung einer Lieferkette in express.js erfordert ein bisschen Intelligenz. Ein wirklich nützlicher Helfer ist Bodyparser. Wenn in einen Rendering-Workflow eingebettet ist, können die vom Server zurückgegebenen einzelnen Feldern mitobjektorientierten Designmustern aufgerufen werden, die die Umgang mit ihnen erheblich vereinfachen.

 var express = erfordern ("express");
var bodyparser = erfordern ("Body-Parser");
VAR-Anforderung = erfordern ("Anforderung");

var myapp = express ();

myapp.use (bodyserser.json ());
myapp.use (BodyRarser.urlencoded ({Extended: True})); 

08. Bereiten Sie sich auf die Überprüfung vorbereiten ...

Googles Checkbox macht seine Magie im Hintergrund - wann fertig ist ein neues Feld angerufen G-Recaptcha-Antwort wird zu den Formatattributen hinzugefügt. Diese Daten müssen zur Überprüfung an die Server von Google gesendet werden. Die lange Zeichenfolge im Code, die diesen Schritt begleitet, ist durch denjenigen, der Ihnen zugewiesen wurde, ersetzt.

 myapp.post ("/ Tamstest", Funktion (Anforderung, Antwort) {
var recaptcha_url = "https://www.google.com/recaptcha/api/ssitsInity?";
recaptcha_url + = "secret = 6lewmzguaaaaaairsb2gv5akkx2cwykzrmd7ws & amp;";
recaptcha_url + = "response =" + anfrage.körper ["g-recaptcha-antwort"] + "& amp;";
recaptcha_url + = "RemoteIP =" + Anforderung.Connection.remoteAddress; 

09. ... und Anfragen bei den Servern von Google

Die nächste Akte beinhaltet das Abfeuern der URL an den Server. Dies wird über eine traditionelle JSON-Anforderung erfüllt, die auf der in dem vorherigen Schritt erstellten Adresse basiert. Seine Ergebnisse werden dann analysiert - wenn ein Fehler geworfen wird, wird ein Fehler an die Client-Side-Anwendung zurückgegeben.

 Anforderung (recaptcha_url, Funktion (Fehler,
bzw. körper) {
Körper = json.parse (Körper);
wenn (body.success! == undefined & amp; & amp;!
Erfolg) {
Return Response.Send ({"Nachricht":
"CAPTCHA-Validierung fehlgeschlagen"});
}
response.header ("content-type",
"Application / JSON"). Senden (Körper);
});
}); 

10. Setzen Sie es locker

Express.js HTTP-Server muss entfesselt sein. Dies wird am besten mit der App.Listen-Struktur erreicht. Beachten Sie, dass Anschlüsse mit einer Zahl, die kleiner als 1024 ist, auf den Root-Benutzer auf Unixoid-Betriebssystemen beschränkt sind - 3000 ist daher eine sichere Wette.

 VAR SERVER = MYAPP.LISTEN (3000, Funktion () {
console.log ("Hören auf" + Server.
Adresse (). Port);
}); 

11. Passen Sie das Formular an

Schließlich muss unser Formular mit dem lokalen Server in Kontakt treten, der innerhalb von Node.js ausgeführt wird. Dies ist am besten durch Anpassen der Aktionszeichenfolge, um das Ziel auf eine gültige Domäne zu zeigen, insbesondere wenn Sie keinen lokalen express.js-Server verwenden.

 & lt; body & gt;
& lt; Forme Action = "http: // localhost: 3000 / tamstest" Methode = "post" & gt;
& lt; div class = "g-recaptcha" Daten-SiteKey = "6LEWMZGUAAAAAAAAAEWPVP6HLULNJXA_SCWTWHYHGE" & GT; & lt; / div & gt;
& lt; br / & gt; 

12. Bring es auf!

Das Testen unseres Client-Server-Systems erfordert zwei Server aufgrund von Überprüfung von Google. Glücklicherweise bietet Python einen schnellen HTTP-Server - verwenden Sie es, um Index.htm bereitzustellen, während Express.js eingesetzt wird, um die Überprüfung der zurückgegebenen Antwort auszuführen.

 Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodeVerifizieren $
Knoten Index.js.
Hören auf 3000.
Tamhan @ Tamhan-ThinkPad: ~ / nodespace / nodeVerifizieren $
python3 -m http.server.
Servieren von http auf 0.0.0.0 Port 8000 ... 

13. Führen Sie einen Trockenlauf aus

Überprüfen Sie beim Laufen, überprüfen Sie das Kontrollkästchen und erfüllen Sie alle Herausforderungen, die Big G erfüllt. Der Server verlangt in der Regel nicht viel in Bezug auf die Überprüfung und fährt zum Anzeigen der oben angegebenen Inhalte fort.

14. Deaktivieren Sie die Schaltfläche Senden

Die Beispiele von Google ignorieren die kundenseitige Submit-Taste, da ein Angreifer immer wieder mit einem JavaScript erscheint. Während der Deaktivierung des Abstellknopfes in Bezug auf den CAPTCHA nicht die Sicherheit verbessert, hat er positive Auswirkungen auf die Benutzerfreundlichkeit. Lassen Sie uns anfangen, indem Sie den Knopf nach dem Start deaktivieren.

 & lt; Forme Action = "http: // localhost: 3000 / tamstest" Methode = "Post" & gt;
& lt; div class = "g-recaptcha" Daten-SiteKey = "6LEWMZGUAAAAAAAAAEWPVP6HLULNJXA_SCWTWHYHGE" & GT; & lt; / div & gt;
& lt; br / & gt;
& lt; Eingangstyp = "Senden" Wert = "Senden" deaktiviert & gt;
& lt; / form & gt; 

15. Griff CAPTCHA Events

Als nächstes muss ein Ereignishandler hinzugefügt werden. Die CAPCCHA-API von Google ruft es an, wenn der Benutzer von seiner kundenseitigen Sicht einen Überprüfungsversuch bestanden hat.

 & lt; html & gt;
& lt; head & gt; . . .
& lt; script & gt;
Funktion terdcFired (Wert) {
console.log (Wert);
}
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; Forme Action = "http: // localhost: 3000 /
Tamstest "Methode =" Post "& gt;
& lt; div class = "g-recaptcha" Daten-SiteKey = "6LEWMZGUAAAAAAAAEPSWPVP6HLULNJXA_SCWTWHYHGE" Data-Callback =
"ontcfired" & gt; & lt; / div & gt; 

16. Exkursion: Dynamisches Captcha-Rendering

Google lächelt die Entwickler nicht auf, um Recaptcha-Elemente während der Seitenlast zu regeln. Das machen() Methode in der recaptcha-API gefunden, können Sie einen oder mehrere festlegen & lt; div & gt; Tags auf der Website, die in recaptcha-Widgets umgewandelt werden sollen.

 var mycallback = function (val) {console.
Protokoll (Val); };
grecaptcha.render (
document.geteleementsById ('My-ID'),
{
Callback: Mycallback,
SiteKey: MySiteKey.
}); 

17. Aktivieren Sie bei Bedarf.

Damit bleibt ein Hauptproblem. Die Schaltfläche Senden muss erneut aktiviert werden, wenn die von ReCAPTCHA bereitgestellte Click-Ereignis in unserem Anwendungscode ankommt. Das Laden von Jquery in ein so einfaches Beispiel ist unnötig, so fallen stattdessen auf ein einfaches Javascript zurück.

 & lt; script & gt;
Funktion terdcFired (Wert) {
document.getelementById.
("Button"). Deaktiviert = FALSCH;
}
& lt; / script & gt; 

 & lt; Eingangstyp = "Senden" ID = "Button"
Wert = "Senden" deaktiviert & gt; 

18. ... und aufräumen nach uns

Google kann keine Challenge-Antwortdaten für immer speichern. Aufgrund dessen, Überprüfungszeiten nach recht schnell - standardmäßig ermittelt unser Programm nicht darüber. Glücklicherweise enthält die API ein zusätzliches Feld, das zur Benachrichtigung verwendet werden kann.

 Funktion terdcexpired (Wert) {
document.getelementById ("Button").
deaktiviert = true;
} 

 & lt; div class = "g-recaptcha" Daten-SiteKey = "6LEWMZGUAAAAAAAAEWPVP6HLULNJXA_SCWTWHYHGE"
Data-Callback = "OndcFired" -Daten-abgelaufener Rückruf = "Ondcexpired" & GT; & lt; / div & gt; 

19. Verwenden Sie zusätzliche Attribute

Kopf hier So finden Sie eine Liste der in der JavaScript-API enthaltenen Immobilien. Sie ließen Sie verschiedene Verhaltensweisen anpassen - zum Beispiel kann das ReCaptcha-Widget auch in einem nachtfreundlichen Farbschema gerendert werden!

20. Arbeit transparent arbeiten ...

Google hat kürzlich eine dritte Version der ReCaptcha-API eingeführt, die keine explizite Benutzerinteraktion erfordert. Stattdessen laden Sie es einfach während der Seite Initialisierung - Der Code überwacht automatisch das Verhalten des Benutzers, der wild auf der Website läuft.

 & lt; Skript 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',
{Aktion: 'Homepage'}).
dann (Funktion (Token) {
...
});
});
& lt; / script & gt; 

21. ... und zusätzliche Informationen bereitstellen

Das Plug-In-Gewinn aus weiteren Daten über die Aktion, die auf der Website ausgeführt wird. Das Snippet, das diesen Schritt begleitet, wird angeben, dass der Benutzer derzeit Ihre Homepage besucht. Weitere Informationen zur API finden Sie in der Dokumentation.

 & lt; script & gt;
grecaptcha.Ready (Funktion () {
grecaptcha.execute ('recaptcha_site_key',
{Aktion: 'Homepage'});
});
& lt; / script & gt; 

Begleiten Sie uns bei Rich Mix, Shoreditch am 26. September, um CSS zu generieren, eine maßgeschneiderte Konferenz für Webdesigner, die Sie von Creative Bloq, Net und Web Designer mitgebracht haben. Buchen Sie Ihr Früh-Bird-Ticket vor dem 15. August an www.generateconf.com .

Dieser Artikel wurde ursprünglich in Ausgabe 287 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . AUSGABEN 287 Hier kaufen oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

• 8 Essential WordPress Security Secrets
• Wie Codepen sich sicher gemacht hat
• 9 Sicherheitstipps zum Schutz Ihrer Website von Hackern