Integra reCAPTCHA para WAF con Cloudflare

action-token

Debes tener reCAPTCHA en funcionamiento en tus páginas web para generar tokens de acción. Después de que reCAPTCHA genera un token de acción, lo adjuntas a un encabezado de solicitud predefinido donde necesites proteger cualquier acción del usuario, como checkout. De forma predeterminada, los tokens de acción son válidos durante 30 minutos, pero pueden variar según el tráfico. Debes adjuntar el token de acción a un encabezado de solicitud predefinido antes de que venza el token para que Cloudflare pueda evaluar los atributos del token.

Para implementar un token de acción de reCAPTCHA, haz lo siguiente:

1. Crea una clave de token de acción para tu sitio web.

   gcloud

   Para crear claves de reCAPTCHA, usa el comando gcloud recaptcha keys create.

   Antes de usar cualquiera de los datos de comando a continuación, realiza los siguientes reemplazos:

   • DISPLAY_NAME: Nombre de la clave. Por lo general, es el nombre del sitio.
   • INTEGRATION_TYPE: Tipo de integración. Especifica score o checkbox.
   • DOMAIN_NAME: Dominios o subdominios de sitios web autorizados para usar la clave.

     Especifica varios dominios como una lista separada por comas. Opcional: Especifica --allow-all-domains para inhabilitar la verificación del dominio.

     Inhabilitar la verificación del dominio es un riesgo de seguridad porque no hay restricciones en el sitio, por lo que cualquier persona puede acceder a tu clave de reCAPTCHA y usarla.

   • WAF_FEATURE: Es el nombre de la función del WAF. Especifica action-token.
   • WAF_SERVICE: Nombre del proveedor de servicios del WAF. Especifica cloudflare para Cloudflare.

   Ejecuta el comando gcloud recaptcha keys create:

   Linux, macOS o Cloud Shell

   gcloud recaptcha keys create \
   --web \
   --display-name=DISPLAY_NAME  \
   --integration-type=INTEGRATION_TYPE \
   --domains=DOMAIN_NAME \
   --waf-feature=WAF_FEATURE \
   --waf-service=WAF_SERVICE

   Windows (PowerShell)

   gcloud recaptcha keys create `
   --web `
   --display-name=DISPLAY_NAME  `
   --integration-type=INTEGRATION_TYPE `
   --domains=DOMAIN_NAME `
   --waf-feature=WAF_FEATURE `
   --waf-service=WAF_SERVICE

   Windows (cmd.exe)

   gcloud recaptcha keys create ^
   --web ^
   --display-name=DISPLAY_NAME  ^
   --integration-type=INTEGRATION_TYPE ^
   --domains=DOMAIN_NAME ^
   --waf-feature=WAF_FEATURE ^
   --waf-service=WAF_SERVICE

   La respuesta contiene la clave de reCAPTCHA recién creada.

   REST

   Para obtener información de referencia de la API sobre los tipos de claves y los tipos de integración, consulta Key y Integration type.

   Antes de usar cualquiera de los datos de solicitud a continuación, realiza los siguientes reemplazos:

   • DISPLAY_NAME: Nombre de la clave. Por lo general, es el nombre del sitio.
   • INTEGRATION_TYPE: Tipo de integración. Especifica score o checkbox.
   • DOMAIN_NAME: Dominios o subdominios de sitios web autorizados para usar la clave.

     Especifica varios dominios como una lista separada por comas. Opcional: Especifica --allow-all-domains para inhabilitar la verificación del dominio.

     Inhabilitar la verificación del dominio es un riesgo de seguridad porque no hay restricciones en el sitio, por lo que cualquier persona puede acceder a tu clave de reCAPTCHA y usarla.

   • WAF_FEATURE: Es el nombre de la función del WAF. Especifica action-token.
   • WAF_SERVICE: Nombre del proveedor de servicios del WAF. Especifica cloudflare para Cloudflare.

   Método HTTP y URL:

   POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

   Cuerpo JSON de la solicitud:

   
   {
     "displayName": "DISPLAY_NAME",
      'wafSettings': "  {
          "wafService": "WAF_SERVICE",
     
   "wafFeature": "WAF_FEATURE"
     }
     "webSettings": {
       "allowedDomains": "DOMAINS",
       "integrationType": "TYPE_OF_INTEGRATION"
      }
      
   }
   

   Para enviar tu solicitud, elige una de estas opciones:

   curl

   Guarda el cuerpo de la solicitud en un archivo llamado request.json y ejecuta el siguiente comando:

   curl -X POST \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json; charset=utf-8" \
        -d @request.json \
        "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

   PowerShell

   Guarda el cuerpo de la solicitud en un archivo llamado request.json y ejecuta el siguiente comando:

   $cred = gcloud auth print-access-token
   $headers = @{ "Authorization" = "Bearer $cred" }
   
   Invoke-WebRequest `
       -Method POST `
       -Headers $headers `
       -ContentType: "application/json; charset=utf-8" `
       -InFile request.json `
       -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

   Deberías recibir una respuesta JSON similar a la que se muestra a continuación:

   
   {
     "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
   "displayName": "DISPLAY_NAME,
   
   "webSettings": {
     "allowAllDomains": true,
     "allowedDomains": [
       "localhost"
     ],
   
    "integrationType": "SCORE",
   
   
   },
   "wafSettings": {
     "wafService": "cloudflare",
   
     "wafFeature": "ACTION_TOKEN"
     
   
   }
   }
   
   

   Registra tu clave de token de acción para usarla más adelante.

2. Integra el JavaScript de reCAPTCHA en tus páginas web con la clave del token de acción que creaste. Para obtener instrucciones, consulta el documento que corresponde al tipo de integración de tu clave de token de acción.
   • Para el tipo de integración SCORE, consulta Cómo integrar claves basadas en la puntuación con el frontend.
   • Para el tipo de integración CHECKBOX, consulta Cómo renderizar el widget de reCAPTCHA en el frontend.
3. Después de recibir el token de reCAPTCHA, adjúntalo a un encabezado de solicitud predefinido con el siguiente formato:

    X-Recaptcha-Token: value-of-your-action-token
   

   Puedes usar lenguajes como XHR, Ajax o la API de Fetch para adjuntar el token a un encabezado de solicitud predefinido.

   La siguiente secuencia de comandos de ejemplo muestra cómo proteger la acción execute y adjuntar el token a un encabezado de solicitud predefinido con JavaScript y XHR:

     
     <script>
       src="https://www.google.com/recaptcha/enterprise.js?render=ACTION_TOKEN_KEY"></script>
   
       <script>
       function onSuccess(action_token) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET','YOUR_URL', false);
            // Attach the action-token to the predefined request header
            xhr.setRequestHeader("X-Recaptcha-Token", action_token);
            xhr.send(null);
          }
          function onError(reason) {
            alert('Response promise rejected: ' + reason);
          grecaptcha.enterprise.ready(function () {
            document.getElementById("execute-button").onclick = () => {
              grecaptcha.enterprise.execute('ACTION_TOKEN_KEY', {
              }).then(onSuccess, onError);
            };
          });
         }
       </script>
     
     

session-token

El JavaScript de reCAPTCHA establece un token de sesión de reCAPTCHA como una cookie en el navegador del usuario final después de la evaluación. El navegador del usuario final adjunta la cookie y la actualiza mientras el código JavaScript de reCAPTCHA permanezca activo.

Para proporcionar un token de sesión como cookie, instala una clave de token de sesión en al menos una de tus páginas web que el usuario final explore antes de la página que debe protegerse. Por ejemplo, si quieres proteger la página de confirmación de compra, instala una clave de token de sesión en la página principal o en la página del producto.

Puedes incluir el código JavaScript de reCAPTCHA en tus páginas web configurando el archivo wrangler.toml cuando instales el paquete de reCAPTCHA para Cloudflare o instalar la clave de sesión en tus páginas web. Incluir el código JavaScript de reCAPTCHA de Cloudflare integra reCAPTCHA con la clave del token de sesión sin necesidad de instalar las claves manualmente en tus páginas web.

Puedes usar esta cookie para proteger las solicitudes posteriores y las cargas de página del usuario final en un dominio específico. De forma predeterminada, los tokens de sesión son válidos durante 30 minutos. Sin embargo, si el usuario final permanece en la página en la que implementaste el token de sesión, reCAPTCHA actualizará el token de sesión periódicamente para evitar que venza.

Instala tokens de sesión en cada página que deba protegerse con reCAPTCHA. Te recomendamos que protejas todas las páginas con reCAPTCHA y que uses reglas de Google Cloud Armor para aplicar el acceso en todas las páginas, excepto la primera que exploran los usuarios finales.

   recaptcha-ca-t=value-of-your-session-token;domain=domain;expires=expiration_time

Para implementar un token de sesión de reCAPTCHA, haz lo siguiente:

1. Crea una clave de token de sesión para tu sitio web.

   gcloud

   Para crear claves de reCAPTCHA, usa el comando gcloud recaptcha keys create.

   Antes de usar cualquiera de los datos de comando a continuación, realiza los siguientes reemplazos:

   • DISPLAY_NAME: Nombre de la clave. Por lo general, es el nombre del sitio.
   • INTEGRATION_TYPE: Tipo de integración. Especifica score.
   • DOMAIN_NAME: Dominios o subdominios de sitios web autorizados para usar la clave.

     Especifica varios dominios como una lista separada por comas. Opcional: Especifica --allow-all-domains para inhabilitar la verificación del dominio.

     Inhabilitar la verificación del dominio es un riesgo de seguridad porque no hay restricciones en el sitio, por lo que cualquier persona puede acceder a tu clave de reCAPTCHA y usarla.

   • WAF_FEATURE: Es el nombre de la función del WAF. Especifica session-token.
   • WAF_SERVICE: Nombre del proveedor de servicios del WAF. Especifica cloudflare para Cloudflare.

   Ejecuta el comando gcloud recaptcha keys create:

   Linux, macOS o Cloud Shell

   gcloud recaptcha keys create \
   --web \
   --display-name=DISPLAY_NAME  \
   --integration-type=INTEGRATION_TYPE \
   --domains=DOMAIN_NAME \
   --waf-feature=WAF_FEATURE \
   --waf-service=WAF_SERVICE

   Windows (PowerShell)

   gcloud recaptcha keys create `
   --web `
   --display-name=DISPLAY_NAME  `
   --integration-type=INTEGRATION_TYPE `
   --domains=DOMAIN_NAME `
   --waf-feature=WAF_FEATURE `
   --waf-service=WAF_SERVICE

   Windows (cmd.exe)

   gcloud recaptcha keys create ^
   --web ^
   --display-name=DISPLAY_NAME  ^
   --integration-type=INTEGRATION_TYPE ^
   --domains=DOMAIN_NAME ^
   --waf-feature=WAF_FEATURE ^
   --waf-service=WAF_SERVICE

   La respuesta contiene la clave de reCAPTCHA recién creada.

   REST

   Para obtener información de referencia de la API sobre los tipos de claves y los tipos de integración, consulta Key y Integration type.

   Antes de usar cualquiera de los datos de solicitud a continuación, realiza los siguientes reemplazos:

   • DISPLAY_NAME: Nombre de la clave. Por lo general, es el nombre del sitio.
   • INTEGRATION_TYPE: Tipo de integración. Especifica score.
   • DOMAIN_NAME: Dominios o subdominios de sitios web autorizados para usar la clave.

     Especifica varios dominios como una lista separada por comas. Opcional: Especifica --allow-all-domains para inhabilitar la verificación del dominio.

     Inhabilitar la verificación del dominio es un riesgo de seguridad porque no hay restricciones en el sitio, por lo que cualquier persona puede acceder a tu clave de reCAPTCHA y usarla.

   • WAF_FEATURE: Es el nombre de la función del WAF. Especifica session-token.
   • WAF_SERVICE: Nombre del proveedor de servicios del WAF. Especifica cloudflare para Cloudflare.

   Método HTTP y URL:

   POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

   Cuerpo JSON de la solicitud:

   
   {
     "displayName": "DISPLAY_NAME",
      'wafSettings': "  {
          "wafService": "WAF_SERVICE",
     
   "wafFeature": "WAF_FEATURE"
     }
     "webSettings": {
       "allowedDomains": "DOMAINS",
       "integrationType": "TYPE_OF_INTEGRATION"
      }
      
   }
   

   Para enviar tu solicitud, elige una de estas opciones:

   curl

   Guarda el cuerpo de la solicitud en un archivo llamado request.json y ejecuta el siguiente comando:

   curl -X POST \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json; charset=utf-8" \
        -d @request.json \
        "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

   PowerShell

   Guarda el cuerpo de la solicitud en un archivo llamado request.json y ejecuta el siguiente comando:

   $cred = gcloud auth print-access-token
   $headers = @{ "Authorization" = "Bearer $cred" }
   
   Invoke-WebRequest `
       -Method POST `
       -Headers $headers `
       -ContentType: "application/json; charset=utf-8" `
       -InFile request.json `
       -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

   Deberías recibir una respuesta JSON similar a la que se muestra a continuación:

   
   {
     "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
   "displayName": "DISPLAY_NAME,
   
   "webSettings": {
     "allowAllDomains": true,
     "allowedDomains": [
       "localhost"
     ],
   
    "integrationType": "SCORE",
   
   
   },
   "wafSettings": {
     "wafService": "cloudflare",
   
     "wafFeature": "SESSION_TOKEN"
   
   
   }
   }
   
   

   Registra tu clave de token de sesión para usarla más adelante.

   Si deseas insertar el código JavaScript de reCAPTCHA desde Cloudflare, omite el siguiente paso y configura wranger.toml.

2. Agrega la clave session-token y waf=session al código JavaScript de reCAPTCHA.

   En la siguiente secuencia de comandos de ejemplo, se muestra cómo implementar un token de sesión en una página web:

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <title>reCAPTCHA WAF Session Token</title>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=SESSION_TOKEN_KEY&waf=session" async defer></script>
    <body></body>
   </head>
   </html>

challenge-page

Cuando implementas una página de desafío de reCAPTCHA, reCAPTCHA redirecciona a una página intersticial en la que determina si es necesario mostrarle un desafío CAPTCHA a un usuario. Por lo tanto, es posible que los desafíos de CAPTCHA no sean visibles para todos los usuarios.

Para implementar una página de desafío de reCAPTCHA, haz lo siguiente:

1. Crea una clave de página de desafío para tu sitio web.

   gcloud

   Para crear claves de reCAPTCHA, usa el comando gcloud recaptcha keys create.

   Antes de usar cualquiera de los datos de comando a continuación, realiza los siguientes reemplazos:

   • DISPLAY_NAME: Nombre de la clave. Por lo general, es el nombre del sitio.
   • INTEGRATION_TYPE: Tipo de integración. Especifica invisible.
   • DOMAIN_NAME: Dominios o subdominios de sitios web autorizados para usar la clave. Especifica --allow-all-domains.
   • WAF_FEATURE: Es el nombre de la función del WAF. Especifica challenge-page.
   • WAF_SERVICE: Nombre del proveedor de servicios del WAF. Especifica cloudflare para Cloudflare.

   Ejecuta el comando gcloud recaptcha keys create:

   Linux, macOS o Cloud Shell

   gcloud recaptcha keys create \
   --web \
   --display-name=DISPLAY_NAME  \
   --integration-type=INTEGRATION_TYPE \
   --domains=DOMAIN_NAME \
   --waf-feature=WAF_FEATURE \
   --waf-service=WAF_SERVICE

   Windows (PowerShell)

   gcloud recaptcha keys create `
   --web `
   --display-name=DISPLAY_NAME  `
   --integration-type=INTEGRATION_TYPE `
   --domains=DOMAIN_NAME `
   --waf-feature=WAF_FEATURE `
   --waf-service=WAF_SERVICE

   Windows (cmd.exe)

   gcloud recaptcha keys create ^
   --web ^
   --display-name=DISPLAY_NAME  ^
   --integration-type=INTEGRATION_TYPE ^
   --domains=DOMAIN_NAME ^
   --waf-feature=WAF_FEATURE ^
   --waf-service=WAF_SERVICE

   La respuesta contiene la clave de reCAPTCHA recién creada.

   REST

   Para obtener información de referencia de la API sobre los tipos de claves y los tipos de integración, consulta Key y Integration type.

   Antes de usar cualquiera de los datos de solicitud a continuación, realiza los siguientes reemplazos:

   • DISPLAY_NAME: Nombre de la clave. Por lo general, es el nombre del sitio.
   • INTEGRATION_TYPE: Tipo de integración. Especifica invisible.
   • DOMAIN_NAME: Dominios o subdominios de sitios web autorizados para usar la clave. Especifica --allow-all-domains.
   • WAF_FEATURE: Es el nombre de la función del WAF. Especifica challenge-page.
   • WAF_SERVICE: Nombre del proveedor de servicios del WAF. Especifica cloudflare para Cloudflare.

   Método HTTP y URL:

   POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

   Cuerpo JSON de la solicitud:

   
   {
     "displayName": "DISPLAY_NAME",
      'wafSettings': "  {
          "wafService": "WAF_SERVICE",
     
   "wafFeature": "WAF_FEATURE"
     }
     "webSettings": {
       "allowedDomains": "DOMAINS",
       "integrationType": "TYPE_OF_INTEGRATION"
      }
      
   }
   

   Para enviar tu solicitud, elige una de estas opciones:

   curl

   Guarda el cuerpo de la solicitud en un archivo llamado request.json y ejecuta el siguiente comando:

   curl -X POST \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json; charset=utf-8" \
        -d @request.json \
        "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

   PowerShell

   Guarda el cuerpo de la solicitud en un archivo llamado request.json y ejecuta el siguiente comando:

   $cred = gcloud auth print-access-token
   $headers = @{ "Authorization" = "Bearer $cred" }
   
   Invoke-WebRequest `
       -Method POST `
       -Headers $headers `
       -ContentType: "application/json; charset=utf-8" `
       -InFile request.json `
       -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

   Deberías recibir una respuesta JSON similar a la que se muestra a continuación:

   
   {
     "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
   "displayName": "DISPLAY_NAME,
   
   "webSettings": {
     "allowAllDomains": true,
     "allowedDomains": [
       "localhost"
     ],
   
     "integrationType": "INVISIBLE",
    
   
   },
   "wafSettings": {
     "wafService": "cloudflare",
   
     "wafFeature": "CHALLENGE_PAGE"
     
   
   }
   }
   
   

   Registra la clave de la página de desafío para usarla más adelante.

2. Para redireccionar a los usuarios a la página de desafío de reCAPTCHA y recibir un token de reCAPTCHA, crea una política de firewall con la acción redirect en las páginas protegidas.

express

Para implementar reCAPTCHA Express, crea una clave de Express.

1. In the Google Cloud console, activate Cloud Shell.

   Activate Cloud Shell

   At the bottom of the Google Cloud console, a Cloud Shell session starts and displays a command-line prompt. Cloud Shell is a shell environment with the Google Cloud CLI already installed and with values already set for your current project. It can take a few seconds for the session to initialize.

2. gcloud

   Para crear claves de reCAPTCHA, usa el comando gcloud recaptcha keys create.

   Antes de usar cualquiera de los datos de comando a continuación, realiza los siguientes reemplazos:

   • DISPLAY_NAME: Nombre de la clave. Por lo general, es el nombre del sitio.
   • WAF_SERVICE: Nombre del proveedor de servicios del WAF. Especifica cloudflare para Cloudflare.

   Ejecuta el comando gcloud recaptcha keys create:

   Linux, macOS o Cloud Shell

   gcloud recaptcha keys create \
   --express \
   --display-name=DISPLAY_NAME  \
   --waf-service=WAF_SERVICE

   Windows (PowerShell)

   gcloud recaptcha keys create `
   --express `
   --display-name=DISPLAY_NAME  `
   --waf-service=WAF_SERVICE

   Windows (cmd.exe)

   gcloud recaptcha keys create ^
   --express ^
   --display-name=DISPLAY_NAME  ^
   --waf-service=WAF_SERVICE

   La respuesta contiene la clave de reCAPTCHA recién creada.

   REST

   Para obtener información de referencia de la API sobre los tipos de claves y los tipos de integración, consulta Key y Integration type.

   Antes de usar cualquiera de los datos de solicitud a continuación, realiza los siguientes reemplazos:

   • DISPLAY_NAME: Nombre de la clave. Por lo general, es el nombre del sitio.
   • WAF_SERVICE: Nombre del proveedor de servicios del WAF. Especifica cloudflare para Cloudflare.

   Método HTTP y URL:

   POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

   Cuerpo JSON de la solicitud:

   
   {
     "displayName": "DISPLAY_NAME",
      'wafSettings': "  {
          "wafService": "WAF_SERVICE",
     
   }
   

   Para enviar tu solicitud, elige una de estas opciones:

   curl

   Guarda el cuerpo de la solicitud en un archivo llamado request.json y ejecuta el siguiente comando:

   curl -X POST \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json; charset=utf-8" \
        -d @request.json \
        "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

   PowerShell

   Guarda el cuerpo de la solicitud en un archivo llamado request.json y ejecuta el siguiente comando:

   $cred = gcloud auth print-access-token
   $headers = @{ "Authorization" = "Bearer $cred" }
   
   Invoke-WebRequest `
       -Method POST `
       -Headers $headers `
       -ContentType: "application/json; charset=utf-8" `
       -InFile request.json `
       -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

   Deberías recibir una respuesta JSON similar a la que se muestra a continuación:

   
   {
     "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
   "displayName": "DISPLAY_NAME,
   
   },
   "wafSettings": {
     "wafService": "cloudflare",
   
     
   
   }
   }
   
   

   Registra tu clave de Express para usarla más adelante.