Beispiele für die Integration mit Google Cloud Armor

In diesem Dokument finden Sie Beispiele für die Implementierung der Funktionen von reCAPTCHA for WAF für Google Cloud Armor.

Sie können ein oder mehrere reCAPTCHA for WAF-Funktionen in einer einzelnen Anwendung verwenden.

Wenn Sie mehr als eine Funktion verwenden möchten, müssen Sie für jede dieser Funktionen einen reCAPTCHA-Schlüssel erstellen und in Ihrer Anwendung verwenden. Wenn Sie beispielsweise reCAPTCHA-Aktionstokens und die reCAPTCHA-Abfrageseite verwenden möchten, müssen Sie einen Aktionstokenschlüssel und einen Schlüssel für die Abfrageseite erstellen und in Ihrer Anwendung verwenden.

Beispiel 1: reCAPTCHA-Sitzungstokens und reCAPTCHA-Abfrageseite verwenden

Sie können auf Seiten, auf die ein Nutzer zugreifen kann, ein reCAPTCHA-Sitzungstoken hinzufügen, damit das Cookie regelmäßig aktualisiert wird, z. B. eine Anmeldeseite. Konfigurieren Sie eine Google Cloud Armor-Sicherheitsrichtlinienregel, um die Anfrage an eine reCAPTCHA-Herausforderungsseite weiterzuleiten, wenn die Punktzahl niedrig ist.

Die folgende Abbildung zeigt einen Workflow, der Features der reCAPTCHA-Sitzungstoken- und reCAPTCHA-Herausforderung verwendet:

Beispiel 2: reCAPTCHA-Aktionstokens und reCAPTCHA-Abfrageseite verwenden

Sie können ein reCAPTCHA-Aktionstoken hinzufügen, um eine Nutzeraktion zu schützen, z. B. den Bezahlvorgang. Konfigurieren Sie eine Google Cloud Armor-Sicherheitsrichtlinienregel, um die Anfrage unter einer der folgenden Bedingungen an eine reCAPTCHA-Herausforderungsseite weiterzuleiten:

  • Die Punktzahl ist niedrig.
  • Das Attribut action_name des Aktionstokens stimmt nicht mit der geschützten Nutzeraktion überein.

Die folgende Abbildung zeigt einen Workflow, der Features der reCAPTCHA-Aktions- und reCAPTCHA-Herausforderung verwendet:

Das folgende Beispielskript zeigt, wie ein reCAPTCHA-Aktionstoken verwendet und zur reCAPTCHA-Herausforderungsseite weitergeleitet wird, wobei das Aktionstoken als Header angehängt wird:

   <script src="https://www.google.com/recaptcha/enterprise.js?render=ACTION_TOKEN_SITE_KEY"></script>
    <script>
     function onSuccess(token) {
       const xhr = new XMLHttpRequest();
       xhr.open('GET','http://www.example.com/checkout', false);
       xhr.setRequestHeader("X-Recaptcha-Token", token);
       xhr.onreadystatechange = function() {
         // Make sure that the request is finished and response is ready with 200
         if (this.readyState == 4 && this.status == 200) {
           // Display the response, it could be a reCAPTCHA challenge
           // page based on your Google Cloud Armor security rule settings.
            document.open();
            document.write(xhr.responseText);
            document.close();

         }
       };
       xhr.send(null);
     }

     grecaptcha.enterprise.ready(function () {
       document.getElementById("execute-button").onclick = () => {
         grecaptcha.enterprise.execute('ACTION_TOKEN_SITE_KEY', {
         }).then(onSuccess, onError);
       };
     });
    </script>

Nächste Schritte