WAF 用 reCAPTCHA を Cloudflare と統合する

アクション トークン

アクション トークンを生成するには、reCAPTCHA をウェブページで実行する必要があります。checkout などのユーザー アクションを保護する必要がある場合、reCAPTCHA がアクション トークンを生成したら、事前定義されたリクエスト ヘッダーにアクション トークンを添付します。デフォルトでは、アクション トークンは 30 分間有効ですが、トラフィックによって異なる場合があります。Cloudflare がトークン属性を評価できるように、トークンが期限切れになる前にアクション トークンを事前定義されたリクエスト ヘッダーに添付する必要があります。

reCAPTCHA アクション トークンを実装するには、次の手順を実行します。

1. ウェブサイトのアクション トークンキーを作成します。

   gcloud

   reCAPTCHA キーを作成するには、gcloud recaptcha keys create コマンドを使用します。

   後述のコマンドデータを使用する前に、次のように置き換えます。

   • DISPLAY_NAME: キーの名前。通常はサイトの名前です。
   • INTEGRATION_TYPE: 統合の種類 score または checkbox を指定します。
   • DOMAIN_NAME: キーの使用を許可されたウェブサイトのドメインまたはサブドメイン。

     複数のドメインをカンマ区切りのリストとして指定します。 省略可: --allow-all-domains を指定して、ドメインの所有権の証明を無効にします。

     サイトの制限はないため、ドメインの所有権の証明の無効化はセキュリティ リスクとなります。したがって、reCAPTCHA キーは誰でもアクセスして使用できます。

   • WAF_FEATURE: WAF 機能の名前。 action-token を実行します。
   • WAF_SERVICE: WAF サービス プロバイダの名前。 cloudflare には cloudflare を指定します。

   gcloud recaptcha keys create コマンドを実行します。

   Linux、macOS、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

   レスポンスには、新しく作成された reCAPTCHA キーが含まれます。

   REST

   キーの種類と統合タイプに関する API リファレンス情報については、鍵と統合タイプをご覧ください。

   リクエストのデータを使用する前に、次のように置き換えます。

   • DISPLAY_NAME: キーの名前。通常はサイトの名前です。
   • INTEGRATION_TYPE: 統合の種類 score または checkbox を指定します。
   • DOMAIN_NAME: キーの使用を許可されたウェブサイトのドメインまたはサブドメイン。

     複数のドメインをカンマ区切りのリストとして指定します。 省略可: --allow-all-domains を指定して、ドメインの所有権の証明を無効にします。

     サイトの制限はないため、ドメインの所有権の証明の無効化はセキュリティ リスクとなります。したがって、reCAPTCHA キーは誰でもアクセスして使用できます。

   • WAF_FEATURE: WAF 機能の名前。 action-token を実行します。
   • WAF_SERVICE: WAF サービス プロバイダの名前。 cloudflare には cloudflare を指定します。

   HTTP メソッドと URL:

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

   リクエストの本文（JSON）:

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

   リクエストを送信するには、次のいずれかのオプションを選択します。

   curl

   リクエスト本文を request.json という名前のファイルに保存して、次のコマンドを実行します。

   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

   リクエスト本文を request.json という名前のファイルに保存して、次のコマンドを実行します。

   $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

   次のような JSON レスポンスが返されます。

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

   後で使用するために、アクション トークン サイトキーを記録します。

2. ウェブページの reCAPTCHA JavaScript を、作成したアクション トークン キーと統合します。手順については、アクション トークンキーの統合タイプに対応するドキュメントをご覧ください。
   • SCORE 統合タイプについては、スコアベースのキーをフロントエンドに統合するをご覧ください。
   • CHECKBOX 統合タイプについては、フロントエンドで reCAPTCHA ウィジェットをレンダリングするをご覧ください。
3. reCAPTCHA からトークンを受信したら、次の形式の事前定義されたリクエスト ヘッダーにトークンを添付します。

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

   XHR、Ajax、Fetch API などの言語および Fetch API を使用して、事前定義されたリクエスト ヘッダーにトークンを添付できます。

   次のサンプル スクリプトでは、JavaScript と XHR を使用して、execute アクションを保護し、事前定義されたリクエスト ヘッダーにトークンを添付する方法を示します。

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

セッション トークン

reCAPTCHA JavaScript は、評価後に reCAPTCHA セッション トークンをエンドユーザーのブラウザの Cookie として設定します。エンドユーザーのブラウザには Cookie が添付され、reCAPTCHA JavaScript がアクティブである限り、その Cookie は更新されます。

セッション トークンを Cookie として提供するには、保護の必要なページの前にエンドユーザーが閲覧するウェブページの少なくとも 1 つにセッション トークン キーをインストールします。たとえば、購入手続きページを保護するには、セッション トークン キーをホームページまたは商品ページにインストールします。

Cloudflare 用 reCAPTCHA パッケージのインストール時に wrangler.toml ファイルを構成することで、ウェブページに reCAPTCHA JavaScript を含めるか、ウェブページにセッションキーをインストールします。Cloudflare の reCAPTCHA JavaScript を含めると、ウェブページにキーを手動でインストールしなくても、セッション トークン キーを使用して reCAPTCHA を統合できます。

この Cookie を使用すると、エンドユーザーの後続のリクエストや特定のドメインでのページの読み込みを保護できます。セッション トークンはデフォルトで 30 分間有効です。ただし、エンドユーザーがセッション トークンを実装したページにとどまる場合、reCAPTCHA はセッション トークンを定期的に更新して期限切れにならないようにします。

reCAPTCHA で保護する必要がある各ページにセッション トークンをインストールします。すべてのページを reCAPTCHA で保護し、Google Cloud Armor ルールを使用して、エンドユーザーがブラウジングする最初のページを除くすべてのページへのアクセスを適用することをおすすめします。

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

reCAPTCHA セッション トークンを実装するには、次の手順を行います。

1. ウェブサイトのセッション トークンキーを作成します。

   gcloud

   reCAPTCHA キーを作成するには、gcloud recaptcha keys create コマンドを使用します。

   後述のコマンドデータを使用する前に、次のように置き換えます。

   • DISPLAY_NAME: キーの名前。通常はサイトの名前です。
   • INTEGRATION_TYPE: 統合の種類 score を実行します。
   • DOMAIN_NAME: キーの使用を許可されたウェブサイトのドメインまたはサブドメイン。

     複数のドメインをカンマ区切りのリストとして指定します。 省略可: --allow-all-domains を指定して、ドメインの所有権の証明を無効にします。

     サイトの制限はないため、ドメインの所有権の証明の無効化はセキュリティ リスクとなります。したがって、reCAPTCHA キーは誰でもアクセスして使用できます。

   • WAF_FEATURE: WAF 機能の名前。 session-token を実行します。
   • WAF_SERVICE: WAF サービス プロバイダの名前。 cloudflare には cloudflare を指定します。

   gcloud recaptcha keys create コマンドを実行します。

   Linux、macOS、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

   レスポンスには、新しく作成された reCAPTCHA キーが含まれます。

   REST

   キーの種類と統合タイプに関する API リファレンス情報については、鍵と統合タイプをご覧ください。

   リクエストのデータを使用する前に、次のように置き換えます。

   • DISPLAY_NAME: キーの名前。通常はサイトの名前です。
   • INTEGRATION_TYPE: 統合の種類 score を実行します。
   • DOMAIN_NAME: キーの使用を許可されたウェブサイトのドメインまたはサブドメイン。

     複数のドメインをカンマ区切りのリストとして指定します。 省略可: --allow-all-domains を指定して、ドメインの所有権の証明を無効にします。

     サイトの制限はないため、ドメインの所有権の証明の無効化はセキュリティ リスクとなります。したがって、reCAPTCHA キーは誰でもアクセスして使用できます。

   • WAF_FEATURE: WAF 機能の名前。 session-token を実行します。
   • WAF_SERVICE: WAF サービス プロバイダの名前。 cloudflare には cloudflare を指定します。

   HTTP メソッドと URL:

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

   リクエストの本文（JSON）:

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

   リクエストを送信するには、次のいずれかのオプションを選択します。

   curl

   リクエスト本文を request.json という名前のファイルに保存して、次のコマンドを実行します。

   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

   リクエスト本文を request.json という名前のファイルに保存して、次のコマンドを実行します。

   $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

   次のような JSON レスポンスが返されます。

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

   後で使用できるように、セッション トークン キーを記録します。

   Cloudflare から reCAPTCHA JavaScript を挿入する場合は、次の手順をスキップして wranger.toml を構成します。

2. セッション トークン キーと waf=session を reCAPTCHA JavaScript に追加します。

   次のサンプル スクリプトは、セッション トークンをウェブページに実装する方法を示しています。

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

確認ページ

reCAPTCHA による確認ページを実装すると、reCAPTCHA によってインタースティシャル ページにリダイレクトされ、CAPTCHA 確認をユーザーに表示する必要があるかどうかが判定されます。そのため、CAPTCHA による確認はすべてのユーザーには表示されない可能性があります。

reCAPTCHA 課題ページを実装するには、次の手順を行います。

1. ウェブサイトの課題ページのキーを作成します。

   gcloud

   reCAPTCHA キーを作成するには、gcloud recaptcha keys create コマンドを使用します。

   後述のコマンドデータを使用する前に、次のように置き換えます。

   • DISPLAY_NAME: キーの名前。通常はサイトの名前です。
   • INTEGRATION_TYPE: 統合の種類 invisible を実行します。
   • DOMAIN_NAME: キーの使用を許可されたウェブサイトのドメインまたはサブドメイン。 --allow-all-domains を実行します。
   • WAF_FEATURE: WAF 機能の名前。 challenge-page を実行します。
   • WAF_SERVICE: WAF サービス プロバイダの名前。 cloudflare には cloudflare を指定します。

   gcloud recaptcha keys create コマンドを実行します。

   Linux、macOS、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

   レスポンスには、新しく作成された reCAPTCHA キーが含まれます。

   REST

   キーの種類と統合タイプに関する API リファレンス情報については、鍵と統合タイプをご覧ください。

   リクエストのデータを使用する前に、次のように置き換えます。

   • DISPLAY_NAME: キーの名前。通常はサイトの名前です。
   • INTEGRATION_TYPE: 統合の種類 invisible を実行します。
   • DOMAIN_NAME: キーの使用を許可されたウェブサイトのドメインまたはサブドメイン。 --allow-all-domains を実行します。
   • WAF_FEATURE: WAF 機能の名前。 challenge-page を実行します。
   • WAF_SERVICE: WAF サービス プロバイダの名前。 cloudflare には cloudflare を指定します。

   HTTP メソッドと URL:

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

   リクエストの本文（JSON）:

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

   リクエストを送信するには、次のいずれかのオプションを選択します。

   curl

   リクエスト本文を request.json という名前のファイルに保存して、次のコマンドを実行します。

   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

   リクエスト本文を request.json という名前のファイルに保存して、次のコマンドを実行します。

   $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

   次のような JSON レスポンスが返されます。

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

   後で使用できるように、確認ページのキーを記録します。

2. ユーザーを reCAPTCHA による確認ページにリダイレクトして reCAPTCHA トークンを受け取るには、保護されたページで redirect アクションを使用してファイアウォール ポリシーを作成します。

express

reCAPTCHA express を実装するには、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

   reCAPTCHA キーを作成するには、gcloud recaptcha keys create コマンドを使用します。

   後述のコマンドデータを使用する前に、次のように置き換えます。

   • DISPLAY_NAME: キーの名前。通常はサイトの名前です。
   • WAF_SERVICE: WAF サービス プロバイダの名前。 cloudflare には cloudflare を指定します。

   gcloud recaptcha keys create コマンドを実行します。

   Linux、macOS、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

   レスポンスには、新しく作成された reCAPTCHA キーが含まれます。

   REST

   キーの種類と統合タイプに関する API リファレンス情報については、鍵と統合タイプをご覧ください。

   リクエストのデータを使用する前に、次のように置き換えます。

   • DISPLAY_NAME: キーの名前。通常はサイトの名前です。
   • WAF_SERVICE: WAF サービス プロバイダの名前。 cloudflare には cloudflare を指定します。

   HTTP メソッドと URL:

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

   リクエストの本文（JSON）:

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

   リクエストを送信するには、次のいずれかのオプションを選択します。

   curl

   リクエスト本文を request.json という名前のファイルに保存して、次のコマンドを実行します。

   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

   リクエスト本文を request.json という名前のファイルに保存して、次のコマンドを実行します。

   $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

   次のような JSON レスポンスが返されます。

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

   後で使用するために、express キーを記録します。