Ejemplos de integración con Google Cloud Armor

En este documento, se muestran ejemplos de cómo implementar las funciones de reCAPTCHA para WAF en Google Cloud Armor.

Puedes usar una o más funciones de reCAPTCHA para WAF en una sola aplicación.

Si quieres usar más de una función, debes crear una clave de reCAPTCHA para cada una de ellas y usarlas en tu aplicación. Por ejemplo, si quieres usar los tokens de acción y la página de desafío de reCAPTCHA, debes crear una clave de token de acción y una clave de página de desafío, y usarlas en tu aplicación.

Ejemplo 1: Usa tokens de sesión de reCAPTCHA y la página de desafío de reCAPTCHA

Puedes agregar un token de sesión de reCAPTCHA en las páginas a las que un usuario podría acceder para que la cookie se actualice periódicamente, por ejemplo, una página de acceso. Configura una regla de política de seguridad de Google Cloud Armor para redireccionar la solicitud a una página de desafío de reCAPTCHA cuando la puntuación sea baja.

La siguiente ilustración muestra un flujo de trabajo que usa funciones de página de desafío de reCAPTCHA y token de sesión de reCAPTCHA:

Ejemplo 2: Usa tokens de acción de reCAPTCHA y la página de desafío de reCAPTCHA

Puedes agregar un token de acción de reCAPTCHA para proteger una acción del usuario, como la confirmación de la compra. Configura una regla de política de seguridad de Google Cloud Armor para redireccionar la solicitud a una página de desafío de reCAPTCHA en cualquiera de las siguientes condiciones:

  • La puntuación es baja.
  • El atributo action_name del token de acción no coincide con la acción del usuario que está protegida.

La siguiente ilustración muestra un flujo de trabajo que usa funciones de página de desafío de reCAPTCHA y token de acción de reCAPTCHA:

En la siguiente secuencia de comandos de ejemplo, se muestra cómo usar un token de acción de reCAPTCHA y redireccionar a una página de desafío de reCAPTCHA con el token de acción adjunto como encabezado:

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

¿Qué sigue?