Examples of integration with Google Cloud Armor

This document shows examples of how to implement the features of reCAPTCHA Enterprise for WAF for Google Cloud Armor.

You can use one or more features of reCAPTCHA Enterprise for WAF in a single application.

Example 1: Using reCAPTCHA session-tokens and reCAPTCHA challenge page

You can add a reCAPTCHA session-token on pages that a user might access so that the cookie gets refreshed periodically, for example, a login page. Configure a Google Cloud Armor security policy rule to redirect the request to a reCAPTCHA challenge page when the score is low.

The following illustration shows a workflow that uses reCAPTCHA session-token and reCAPTCHA challenge page features:

Example 2: Using reCAPTCHA action-tokens and reCAPTCHA challenge page

You can add a reCAPTCHA action-token to protect a user action, such as checkout. Configure a Google Cloud Armor security policy rule to redirect the request to a reCAPTCHA challenge page in any of the following conditions:

  • The score is low.
  • The action_name attribute of the action-token does not match the user action that is protected.

The following illustration shows a workflow that uses reCAPTCHA action-token and reCAPTCHA challenge page features:

The following sample script shows how to use a reCAPTCHA action-token and redirect to a reCAPTCHA challenge page with the action-token attached as header:

   <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>

What's next