Stoppen Sie die Bots mit Google reCAPTCHA

Stoppen Sie die Bots mit Google reCAPTCHA
(Bildnachweis: Zukunft)

Bots immer draußen zu halten ist ein Spiel mit Zahlen - leider machte die Verfügbarkeit benutzerfreundlicher Bibliotheken für maschinelles Lernen das Knacken vieler klassischer Captcha-Typen einfach. Google steht an der Spitze des Tiefsturms - schließlich existiert etwas nur, wenn es (prominent) in den Big G-Indizes zu finden ist.

Aus diesem Grund investieren die Google-Ingenieure erhebliche Anstrengungen in die Entwicklung 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 gemeinsam behandeln werden. Weitere Tools, die nichts mit Bots zu tun haben, finden Sie in unserem Webdesign-Tools Post.

Bevor Sie beginnen, müssen jedoch einige grundlegende Dinge geklärt werden. Zuallererst: Bots draußen zu halten ist immer ein serverseitiges Spiel. Das Überprüfen der Rückgabewerte Ihrer Anti-Bot-Maßnahme auf dem Client ist idiotisch. Ein Angreifer kann den Quellcode analysieren oder ihn einfach umgehen, indem er die Rückgabevalidierung patcht.



Denken Sie zweitens daran, dass nicht alle Bots gleich sind. Das Sperren des GoogleBot führt beispielsweise dazu, dass Ihre Website nicht mehr indiziert wird. Ähnliche Probleme können bei anderen branchenspezifischen Bots auftreten, die oft mehr nützen als schaden. Schließlich können Bots in einigen Fällen ein geringeres Übel sein - wenn Sie nur Datenverkehr benötigen, ist ein Bot-Klick nur ein Klick.

01. Melden Sie sich an!

Stoppen Sie die Bots mit Google reCAPTCHA: Melden Sie sich an!

Verwenden Sie Ihr Google-Konto, um sich bei ReCAPTCHA anzumelden(Bildnachweis: Tam Hanna)

Google behält die reCAPTCHA-Nutzer im Auge. Geh hierher und verwenden Sie Ihr Google-Konto, um sich anzumelden. Fügen Sie unter 'Domains' zusätzlich zu Ihrer bevorzugten Domain 'localhost' hinzu. Aktivieren Sie das Kontrollkästchen 'Ich bin kein Roboter', da dies die bekannteste Anti-Bot-Maßnahme ist.

02. Speichern Sie Site- und Serverschlüssel

Google belohnt die Beharrlichkeit bei der Durchführung des Einrichtungsprozesses durch die Anzeige eines Servers und eines Site-Schlüssels. Letzteres kann zwar an Dritte weitergegeben werden, stellen Sie jedoch sicher, dass der geheime Schlüssel niemals die Grenzen Ihrer Serverumgebung verlässt.

03. Site-Überprüfung verstehen

Google verwendet eine Variation des Challenge-Response-Prozesses, um die Integrität der Ergebnisse sicherzustellen. Captcha-Instanzen geben einen kryptografischen Wert zurück, den der Server an ein von Big G gehostetes Verifizierungssystem 'abgeben' soll. Wenn sich die Ergebnisse als gültig herausstellen, wird eine korrekte HTTP-Antwort an Ihre Back-End-Logik zurückgegeben.

04. Richten Sie Express.JS ein

Es ist wichtig, eine schlüsselfertige Lösung zu demonstrieren, die den gesamten Authentifizierungsablauf zeigt. Aus diesem Grund müssen wir mit einer Art 'Server' beginnen. Express JS war in letzter Zeit ein häufiges Thema. Stellen Sie es daher auf einem neu erstellten Projektskelett bereit.

beste Schutzhülle für MacBook Pro 15
tamhan@tamhan-thinkpad:~/nodespace/nodeverify$ npm init --y Wrote to /home/tamhan/nodespace/nodeverify/package.json: . . . tamhan@tamhan-thinkpad:~/nodespace/nodeverify$ npm install body-parser express request --save . . . + body-parser@1.18.3 + request@2.88.0 + express@4.16.4

05. Zum Servieren vorbereiten

Zum Laden des bekannten Kontrollkästchens 'Ich bin kein Roboter' ist eine HTML-Datei erforderlich. Da dies ein Beispiel ist, das den Interaktionsfluss demonstriert, beginnen Sie mit einem statischen Dokument, das das diesem Schritt beigefügte Markup enthält.

reCAPTCHA demo: Simple page

06. Verstehe und teste

Stoppen Sie die Bots mit Google reCAPTCHA: Verstehen und testen

Führen Sie den Code aus, um diese Ergebnisse anzuzeigen(Bildnachweis: Tam Hanna)

Google stellt eine API-Datei bereit, die die Captcha-Logik enthält. Wenn api.js geladen wird, analysiert der darin enthaltene Code das DOM und ersetzt alle Tags, die das richtige Klassen-Tag enthalten. Tags bleiben zum jetzigen Zeitpunkt allein. Führen Sie den Code in beiden Fällen in einem Browser Ihrer Wahl aus, um die oben gezeigten Ergebnisse anzuzeigen.

07. Laden Sie einige Elemente

Das Erstellen einer Lieferkette in Express.JS erfordert ein wenig Intelligenz. Ein wirklich nützlicher Helfer ist BodyParser. In einen Rendering-Workflow eingebettet, kann auf die einzelnen vom Server zurückgegebenen Felder mithilfe objektorientierter Entwurfsmuster zugegriffen werden, was die Handhabung erheblich vereinfacht.

var Express = require('express'); var BodyParser = require('body-parser'); var Request = require('request'); var myApp = Express(); myApp.use(BodyParser.json()); myApp.use(BodyParser.urlencoded({ extended: true }));

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

Das Kontrollkästchen von Google zaubert im Hintergrund - wenn Sie fertig sind, wird ein neues Feld aufgerufen g-reCAPTCHA-Antwort wird zu den Formularattributen hinzugefügt. Diese Daten müssen zur Überprüfung an die Server von Google gesendet werden. Die lange Zeichenfolge im Code, der diesem Schritt beiliegt, wird durch die von Google zugewiesene ersetzt.

myApp.post('/tamstest', function(request, response) { var recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify?'; recaptcha_url += 'secret=6LewMZgUAAAAAIRSB2gv5akKx2cWyFUlKzRmd7ws&'; recaptcha_url += 'response=' + request.body['g-recaptcha-response'] + '&'; recaptcha_url += 'remoteip=' + request.connection.remoteAddress;

09. ... und erkundigen Sie sich bei Google

Im nächsten Schritt wird die URL zum Server ausgelöst. Dies wird über eine herkömmliche JSON-Anforderung erreicht, die auf der im vorherigen Schritt erstellten Adresse basiert. Die Ergebnisse werden dann analysiert. Wenn ein Fehler ausgegeben wird, wird ein Fehler an die clientseitige Anwendung zurückgegeben.

Request(recaptcha_url, function(error, resp, body) { body = JSON.parse(body); if(body.success !== undefined && !body. success) { return response.send({ 'message': 'Captcha validation failed' }); } response.header('Content-Type', 'application/json').send(body); }); });

10. Legen Sie es los

Der HTTP-Server von Express.JS muss freigeschaltet werden. Dies wird am besten mithilfe der Struktur app.listen erreicht. Beachten Sie, dass Ports mit einer Nummer kleiner als 1024 unter Unixoid-Betriebssystemen auf den Root-Benutzer beschränkt sind - 3000 ist daher eine sichere Sache.

var server = myApp.listen(3000, function() { console.log('Listening on ' + server. address().port); });

11. Passen Sie das Formular an

Schließlich muss unser Formular mit dem lokalen Server in Verbindung gebracht werden, der in Node.JS ausgeführt wird. Dies wird am besten durch Anpassen der Aktionszeichenfolge erreicht. Stellen Sie sicher, dass das Ziel auf eine gültige Domäne verweist, insbesondere wenn Sie keinen lokalen Express.JS-Server verwenden.


12. Bring es hoch!

Stoppen Sie die Bots mit Google reCAPTCHA: Rufen Sie es auf!

Verwenden Sie den schnellen HTTP-Server von Python, um das Client-Server-System zu testen(Bildnachweis: Tam Hanna)

Zum Testen unseres Client-Server-Systems sind aufgrund der Herkunftsüberprüfung von Google zwei Server erforderlich. Glücklicherweise bietet Python einen schnellen HTTP-Server - verwenden Sie ihn, um index.htm bereitzustellen, während Express.JS mit der Überprüfung der zurückgegebenen Antwort beauftragt wird.

tamhan@tamhan-thinkpad:~/nodespace/nodeverify$ node index.js Listening on 3000 tamhan@tamhan-thinkpad:~/nodespace/nodeverify$ python3 -m http.server Serving HTTP on 0.0.0.0 port 8000 ...

13. Führen Sie einen Trockenlauf durch

Stoppen Sie die Bots mit Google reCAPTCHA: Führen Sie einen Probelauf durch

Testen Sie Ihr Captcha(Bildnachweis: Tam Hanna)

Aktivieren Sie beim Laufen das Kontrollkästchen und erfüllen Sie alle Herausforderungen, die Big G Ihnen stellen könnte. Der Server verlangt normalerweise nicht viel in Bezug auf die Überprüfung und zeigt die oben gezeigten Inhalte an.

14. Deaktivieren Sie die Schaltfläche 'Senden'

Stoppen Sie die Bots mit Google reCAPTCHA: Deaktivieren Sie die Schaltfläche

Das Deaktivieren der Senden-Schaltfläche beim Start ist gut für die Benutzerfreundlichkeit(Bildnachweis: Tam Hanna)

In den Beispielen von Google wird die clientseitige Schaltfläche zum Senden ignoriert, da ein Angreifer sie mit JavaScript immer wieder anzeigen kann. Das Deaktivieren des Submit-Reglers in Bezug auf Captcha verbessert zwar nicht die Sicherheit, wirkt sich jedoch positiv auf die Benutzerfreundlichkeit aus. Beginnen wir mit der Deaktivierung der Schaltfläche nach dem Start.


15. Behandeln Sie CAPTCHA-Ereignisse

Stoppen Sie die Bots mit Google reCAPTCHA: Behandeln Sie CAPTCHA-Ereignisse

Fügen Sie nun einen Ereignishandler hinzu(Bildnachweis: Tam Hanna)

Als nächstes muss ein Ereignishandler hinzugefügt werden. Die CAPTCHA-API von Google ruft sie immer dann auf, wenn der Nutzer einen Überprüfungsversuch aus clientseitiger Sicht bestanden hat.

. . . function onDCFired(value){ console.log(value); }

16. Ausflug: Dynamisches CAPTCHA-Rendering

Google beschränkt Entwickler nicht darauf, beim Laden von Seiten reCAPTCHA-Elemente zu erzeugen. Das machen() Mit der in der reCAPTCHA-API gefundenen Methode können Sie eine oder mehrere festlegen Tags auf der Website, die in reCAPTCHA-Widgets umgewandelt werden sollen.

var myCallback = function(val) { console. log(val); }; grecaptcha.render( document.getElementsById(‘my-id'), { callback: myCallback, sitekey: mySiteKey });

17. Schaltfläche bei Bedarf aktivieren ...

Damit bleibt ein Hauptproblem. Die Schaltfläche 'Senden' muss erneut aktiviert werden, wenn das von reCAPTCHA bereitgestellte Klickereignis in unserem Anwendungscode eintrifft. Das Laden von jQuery in ein so einfaches Beispiel ist nicht erforderlich. Verwenden Sie stattdessen nur einfaches JavaScript.

function onDCFired(value){ document.getElementById ('Button').disabled = false; }

18. ... und nach uns aufräumen

Google kann Challenge-Antwortdaten nicht für immer speichern. Aus diesem Grund läuft die Überprüfung ziemlich schnell ab - standardmäßig findet unser Programm nichts davon heraus. Glücklicherweise enthält die API ein zusätzliches Feld, über das Sie benachrichtigen können.

function onDCExpired(value){ document.getElementById('Button'). disabled = true; }

19. Verwenden Sie zusätzliche Attribute

Stoppen Sie die Bots mit Google reCAPTCHA: Behandeln Sie CAPTCHA-Ereignisse

Es gibt viele nützliche Eigenschaften zum Spielen(Bildnachweis: Tam Hanna)

Geh hierher um eine Liste der Eigenschaften zu finden, die in der JavaScript-API enthalten sind. Mit ihnen können Sie verschiedene Verhaltensweisen anpassen - zum Beispiel kann das reCAPTCHA-Widget auch in einem nachtfreundlichen Farbschema gerendert werden!

20. Transparent arbeiten…

Google hat kürzlich eine dritte Version der reCAPTCHA-API eingeführt, für die keine explizite Benutzerinteraktion erforderlich ist. Stattdessen laden Sie es einfach während der Seiteninitialisierung - der Code überwacht automatisch das Verhalten des Benutzers, der auf der Website wild läuft.

grecaptcha.ready(function() { grecaptcha.execute(‘recaptcha_site_key', {action: ‘homepage'}). then(function(token) { ... }); });

21. ... und zusätzliche Informationen bereitstellen

Das Plug-In profitiert von weiteren Daten über die Aktion, die auf der Website ausgeführt wird. Das diesem Schritt beigefügte Snippet gibt an, dass der Benutzer derzeit Ihre Homepage besucht. Weitere Informationen zur API finden Sie in der Dokumentation.

grecaptcha.ready(function() { grecaptcha.execute(‘reCAPTCHA_site_key', {action: ‘homepage'}); });

Generate CSS - die Konferenz für Webdesigner: 26. September, Rich Mix, Shoreditch, London

(Bildnachweis: Zukunft)

Besuchen Sie uns am 26. September in Rich Mix, Shoreditch, für Generate CSS, eine maßgeschneiderte Konferenz für Webdesigner, die Ihnen von Creative Bloq, net und Web Designer angeboten wird. Buchen Sie Ihr Early Bird Ticket vor dem 15. August unter www.generateconf.com .

Dieser Artikel wurde ursprünglich in Ausgabe 287 des Creative Web Design Magazins veröffentlicht Webdesigner . Ausgabe 287 hier kaufen oder Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel: