Beispiele für die Integration mit Google Cloud Armor

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

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

Wenn Sie mehrere Funktionen 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 Aktionstoken-Schlü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 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 Checkout. Konfigurieren Sie eine 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 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