Intégrer reCAPTCHA pour WAF à Cloudflare

action-token

Vous devez exécuter reCAPTCHA sur vos pages Web pour générer des jetons d'action. Une fois que reCAPTCHA a généré un jeton d'action, vous devez l'associer à un en-tête de requête prédéfini partout où vous devez protéger les actions utilisateur, comme checkout. Par défaut, les jetons d'action sont valides pendant 30 minutes, mais ce délai peut varier en fonction du trafic. Vous devez associer le jeton d'action à un en-tête de requête prédéfini avant son expiration, afin que Cloudflare puisse évaluer les attributs du jeton.

Pour implémenter un jeton d'action reCAPTCHA, procédez comme suit :

1. Créez une clé de jeton d'action pour votre site Web.

   gcloud

   Pour créer des clés reCAPTCHA, utilisez la commande gcloud recaptcha keys create.

   Avant d'utiliser les données de la commande ci-dessous, effectuez les remplacements suivants :

   • DISPLAY_NAME : nom de la clé. Généralement un nom de site.
   • INTEGRATION_TYPE : type d'intégration. Spécifiez score ou checkbox.
   • DOMAIN_NAME : domaines ou sous-domaines de sites Web autorisés à utiliser la clé.

     Spécifiez plusieurs domaines sous la forme d'une liste d'éléments séparés par une virgule. Facultatif : Spécifiez --allow-all-domains pour désactiver la validation du domaine.

     La désactivation de la validation de domaine est un risque pour la sécurité, car il n'existe aucune restriction sur le site. Par conséquent, votre clé reCAPTCHA est accessible et utilisée par n'importe quel utilisateur.

   • WAF_FEATURE : nom de la fonctionnalité WAF. Spécifiez action-token.
   • WAF_SERVICE : nom du fournisseur de services WAF. Spécifiez cloudflare pour Cloudflare.

   Exécutez la commande gcloud recaptcha keys create :

   Linux, macOS ou 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 réponse contient la clé reCAPTCHA nouvellement créée.

   REST

   Pour obtenir des informations de référence sur les types de clés et les types d'intégration, consultez les sections Clé et Type d'intégration.

   Avant d'utiliser les données de requête ci-dessous, effectuez les remplacements suivants :

   • DISPLAY_NAME : nom de la clé. Généralement un nom de site.
   • INTEGRATION_TYPE : type d'intégration. Spécifiez score ou checkbox.
   • DOMAIN_NAME : domaines ou sous-domaines de sites Web autorisés à utiliser la clé.

     Spécifiez plusieurs domaines sous la forme d'une liste d'éléments séparés par une virgule. Facultatif : Spécifiez --allow-all-domains pour désactiver la validation du domaine.

     La désactivation de la validation de domaine est un risque pour la sécurité, car il n'existe aucune restriction sur le site. Par conséquent, votre clé reCAPTCHA est accessible et utilisée par n'importe quel utilisateur.

   • WAF_FEATURE : nom de la fonctionnalité WAF. Spécifiez action-token.
   • WAF_SERVICE : nom du fournisseur de services WAF. Spécifiez cloudflare pour Cloudflare.

   Méthode HTTP et URL :

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

   Corps JSON de la requête :

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

   Pour envoyer votre requête, choisissez l'une des options suivantes :

   curl

   Enregistrez le corps de la requête dans un fichier nommé request.json, puis exécutez la commande suivante :

   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

   Enregistrez le corps de la requête dans un fichier nommé request.json, puis exécutez la commande suivante :

   $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

   Vous devriez recevoir une réponse JSON de ce type :

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

   Notez votre clé de jeton d'action pour une utilisation ultérieure.

2. Intégrez le code JavaScript reCAPTCHA sur vos pages Web à l'aide de la clé de jeton d'action que vous avez créée. Pour obtenir des instructions, reportez-vous au document correspondant au type d'intégration de votre clé de jeton d'action.
   • Pour le type d'intégration SCORE, consultez Intégrer des clés basées sur des scores à l'interface.
   • Pour le type d'intégration CHECKBOX, consultez Afficher le widget reCAPTCHA sur l'interface.
3. Après avoir reçu le jeton de reCAPTCHA, associez-le à un en-tête de requête prédéfini au format suivant :

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

   Vous pouvez utiliser des langages tels que XHR, Ajax ou l'API Fetch pour associer le jeton à un en-tête de requête prédéfini.

   L'exemple de script suivant montre comment protéger l'action execute et associer le jeton à un en-tête de requête prédéfini à l'aide de JavaScript + 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

Le code JavaScript reCAPTCHA définit un jeton de session reCAPTCHA en tant que cookie sur le navigateur de l'utilisateur final après l'évaluation. Le navigateur de l'utilisateur final associe le cookie et l'actualise tant que le code JavaScript reCAPTCHA reste actif.

Pour fournir un jeton de session en tant que cookie, installez une clé de jeton de session sur au moins l'une de vos pages Web que l'utilisateur final parcourt avant la page à protéger. Par exemple, si vous souhaitez protéger la page de paiement, installez une clé de jeton de session sur la page d'accueil ou sur la page du produit.

Vous pouvez inclure le JavaScript reCAPTCHA sur vos pages Web en configurant le fichier wrangler.toml lors de l'installation du package reCAPTCHA pour Cloudflare ou installer la clé de session sur vos pages Web. L'inclusion du JavaScript reCAPTCHA de Cloudflare permet d'intégrer reCAPTCHA à l'aide de la clé de jeton de session, sans avoir à installer manuellement les clés sur vos pages Web.

Vous pouvez utiliser ce cookie pour protéger les requêtes ultérieures de l'utilisateur final et les chargements de page sur un domaine spécifique. Les jetons de session sont valides par défaut pendant 30 minutes. Toutefois, si l'utilisateur final reste sur la page où vous avez implémenté le jeton de session, reCAPTCHA actualise régulièrement le jeton de session pour empêcher son expiration.

Installez des jetons de session sur chaque page devant être protégée par reCAPTCHA. Nous vous recommandons de protéger chaque page avec reCAPTCHA et d'utiliser des règles Google Cloud Armor pour appliquer l'accès à toutes les pages, à l'exception de la première page que les utilisateurs finaux parcourent.

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

Pour implémenter un jeton de session reCAPTCHA, procédez comme suit :

1. Créez une clé de jeton de session pour votre site Web.

   gcloud

   Pour créer des clés reCAPTCHA, utilisez la commande gcloud recaptcha keys create.

   Avant d'utiliser les données de la commande ci-dessous, effectuez les remplacements suivants :

   • DISPLAY_NAME : nom de la clé. Généralement un nom de site.
   • INTEGRATION_TYPE : type d'intégration. Spécifiez score.
   • DOMAIN_NAME : domaines ou sous-domaines de sites Web autorisés à utiliser la clé.

     Spécifiez plusieurs domaines sous la forme d'une liste d'éléments séparés par une virgule. Facultatif : Spécifiez --allow-all-domains pour désactiver la validation du domaine.

     La désactivation de la validation de domaine est un risque pour la sécurité, car il n'existe aucune restriction sur le site. Par conséquent, votre clé reCAPTCHA est accessible et utilisée par n'importe quel utilisateur.

   • WAF_FEATURE : nom de la fonctionnalité WAF. Spécifiez session-token.
   • WAF_SERVICE : nom du fournisseur de services WAF. Spécifiez cloudflare pour Cloudflare.

   Exécutez la commande gcloud recaptcha keys create :

   Linux, macOS ou 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 réponse contient la clé reCAPTCHA nouvellement créée.

   REST

   Pour obtenir des informations de référence sur les types de clés et les types d'intégration, consultez les sections Clé et Type d'intégration.

   Avant d'utiliser les données de requête ci-dessous, effectuez les remplacements suivants :

   • DISPLAY_NAME : nom de la clé. Généralement un nom de site.
   • INTEGRATION_TYPE : type d'intégration. Spécifiez score.
   • DOMAIN_NAME : domaines ou sous-domaines de sites Web autorisés à utiliser la clé.

     Spécifiez plusieurs domaines sous la forme d'une liste d'éléments séparés par une virgule. Facultatif : Spécifiez --allow-all-domains pour désactiver la validation du domaine.

     La désactivation de la validation de domaine est un risque pour la sécurité, car il n'existe aucune restriction sur le site. Par conséquent, votre clé reCAPTCHA est accessible et utilisée par n'importe quel utilisateur.

   • WAF_FEATURE : nom de la fonctionnalité WAF. Spécifiez session-token.
   • WAF_SERVICE : nom du fournisseur de services WAF. Spécifiez cloudflare pour Cloudflare.

   Méthode HTTP et URL :

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

   Corps JSON de la requête :

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

   Pour envoyer votre requête, choisissez l'une des options suivantes :

   curl

   Enregistrez le corps de la requête dans un fichier nommé request.json, puis exécutez la commande suivante :

   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

   Enregistrez le corps de la requête dans un fichier nommé request.json, puis exécutez la commande suivante :

   $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

   Vous devriez recevoir une réponse JSON de ce type :

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

   Notez votre clé de jeton de session pour une utilisation ultérieure.

   Si vous souhaitez injecter le code JavaScript reCAPTCHA à partir de Cloudflare, ignorez l'étape suivante et configurez wranger.toml.

2. Ajoutez la clé de jeton de session et waf=session au code JavaScript reCAPTCHA.

   L'exemple de script suivant montre comment implémenter un jeton de session sur une page 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

Lorsque vous implémentez une page de test reCAPTCHA, reCAPTCHA redirige vers une page interstitielle où il détermine s'il est nécessaire de présenter un test CAPTCHA à un utilisateur. Par conséquent, il est possible que les tests CAPTCHA ne soient pas visibles pour tous les utilisateurs.

Pour implémenter une page de test reCAPTCHA, procédez comme suit :

1. Créez une clé de page de validation pour votre site Web.

   gcloud

   Pour créer des clés reCAPTCHA, utilisez la commande gcloud recaptcha keys create.

   Avant d'utiliser les données de la commande ci-dessous, effectuez les remplacements suivants :

   • DISPLAY_NAME : nom de la clé. Généralement un nom de site.
   • INTEGRATION_TYPE : type d'intégration. Spécifiez invisible.
   • DOMAIN_NAME : domaines ou sous-domaines de sites Web autorisés à utiliser la clé. Spécifiez --allow-all-domains.
   • WAF_FEATURE : nom de la fonctionnalité WAF. Spécifiez challenge-page.
   • WAF_SERVICE : nom du fournisseur de services WAF. Spécifiez cloudflare pour Cloudflare.

   Exécutez la commande gcloud recaptcha keys create :

   Linux, macOS ou 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 réponse contient la clé reCAPTCHA nouvellement créée.

   REST

   Pour obtenir des informations de référence sur les types de clés et les types d'intégration, consultez les sections Clé et Type d'intégration.

   Avant d'utiliser les données de requête ci-dessous, effectuez les remplacements suivants :

   • DISPLAY_NAME : nom de la clé. Généralement un nom de site.
   • INTEGRATION_TYPE : type d'intégration. Spécifiez invisible.
   • DOMAIN_NAME : domaines ou sous-domaines de sites Web autorisés à utiliser la clé. Spécifiez --allow-all-domains.
   • WAF_FEATURE : nom de la fonctionnalité WAF. Spécifiez challenge-page.
   • WAF_SERVICE : nom du fournisseur de services WAF. Spécifiez cloudflare pour Cloudflare.

   Méthode HTTP et URL :

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

   Corps JSON de la requête :

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

   Pour envoyer votre requête, choisissez l'une des options suivantes :

   curl

   Enregistrez le corps de la requête dans un fichier nommé request.json, puis exécutez la commande suivante :

   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

   Enregistrez le corps de la requête dans un fichier nommé request.json, puis exécutez la commande suivante :

   $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

   Vous devriez recevoir une réponse JSON de ce type :

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

   Notez la clé de votre page de validation pour une utilisation ultérieure.

2. Pour rediriger les utilisateurs vers la page de test reCAPTCHA et recevoir un jeton reCAPTCHA, créez une règle de pare-feu avec l'action redirect sur les pages protégées.

express

Pour implémenter reCAPTCHA Express, créez une clé 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

   Pour créer des clés reCAPTCHA, utilisez la commande gcloud recaptcha keys create.

   Avant d'utiliser les données de la commande ci-dessous, effectuez les remplacements suivants :

   • DISPLAY_NAME : nom de la clé. Généralement un nom de site.
   • WAF_SERVICE : nom du fournisseur de services WAF. Spécifiez cloudflare pour Cloudflare.

   Exécutez la commande gcloud recaptcha keys create :

   Linux, macOS ou 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 réponse contient la clé reCAPTCHA nouvellement créée.

   REST

   Pour obtenir des informations de référence sur les types de clés et les types d'intégration, consultez les sections Clé et Type d'intégration.

   Avant d'utiliser les données de requête ci-dessous, effectuez les remplacements suivants :

   • DISPLAY_NAME : nom de la clé. Généralement un nom de site.
   • WAF_SERVICE : nom du fournisseur de services WAF. Spécifiez cloudflare pour Cloudflare.

   Méthode HTTP et URL :

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

   Corps JSON de la requête :

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

   Pour envoyer votre requête, choisissez l'une des options suivantes :

   curl

   Enregistrez le corps de la requête dans un fichier nommé request.json, puis exécutez la commande suivante :

   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

   Enregistrez le corps de la requête dans un fichier nommé request.json, puis exécutez la commande suivante :

   $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

   Vous devriez recevoir une réponse JSON de ce type :

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

   Notez votre clé express pour une utilisation ultérieure.