reCAPTCHA Enterprise for WAF と Google Cloud Armor の統合機能を実装する

このドキュメントでは、Google Cloud Armor の reCAPTCHA 課題ページ、reCAPTCHA アクション トークン、reCAPTCHA セッション トークンを実装する方法について説明します。

始める前に

reCAPTCHA アクション トークンまたはセッション トークンを使用するには、次の手順で reCAPTCHA Enterprise API を有効にします。

  1. Cloud Console で [reCAPTCHA Enterprise API] ページに移動します。

    [reCAPTCHA Enterprise API] に移動

  2. ページの上部にあるプロジェクト セレクタにプロジェクト名が表示されていることを確認します。

    プロジェクトの名前が表示されない場合は、プロジェクト セレクタをクリックしてプロジェクトを選択します。

  3. [有効にする] をクリックします。

reCAPTCHA 課題ページを実装する

reCAPTCHA Enterprise は実装を自動的に処理するため、reCAPTCHA 課題ページの実装手順はありません。

次のステップとして、Google Cloud Armor セキュリティ ポリシーを構成します。

reCAPTCHA アクション トークンの実装

アクション トークンを生成するには、reCAPTCHA Enterprise がウェブページで実行されている必要があります。reCAPTCHA Enterprise がアクション トークンを生成したら、ご購入手続きなどのユーザー アクションを保護する必要がある場合に、アクション トークンを事前定義されたリクエスト ヘッダーに添付します。デフォルトでは、action-token の有効期間は 30 分で、それより短い時間が有効になります。したがって、トークンが期限切れになる前に、アクション トークンを事前定義されたリクエスト ヘッダーに添付して、Google Cloud Armor がトークン属性を評価できるようにする必要があります。

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

  1. 新しい reCAPTCHA スコアベースのサイトキーまたはチェックボックス サイトキーを作成します
  2. サイトキーのアクション トークン機能を有効にするには、サイトキーを recaptcha-waf-eng@google.com に送信します。
  3. サイトキーに対してアクション トークン機能が有効になると、確認メールが届きます。
  4. ウェブページに有効なサイトキーをインストールします。手順については、サイトキーに対応するドキュメントをご覧ください。

  5. reCAPTCHA Enterprise からトークンを受信したら、次の形式の事前定義されたリクエスト ヘッダーにトークンを添付します。

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

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

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

    <script src="https://www.google.com/recaptcha/enterprise.js?render=SITE_KEY_ACTION_TOKEN_ENABLED"></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('SITE_KEY_ACTION_TOKEN_ENABLED', {
         }).then(onSuccess, onError);
       };
     });
    </script>

次のステップとして、Google Cloud Armor セキュリティ ポリシーを構成します。

reCAPTCHA セッション トークンの実装

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

セッション トークンを Cookie として提供するには、次の要件を満たす少なくとも 1 つのウェブページに reCAPTCHA スコアベースのサイトキーをインストールします。

  • このウェブページは、保護の必要なページの前にエンドユーザーが参照するページである必要があります。たとえば、購入手続きページを保護するには、reCAPTCHA スコアベースのサイトキーをホームページまたは商品ページにインストールします。
  • このウェブページは Google Cloud Armor セキュリティ ポリシーで保護されています。

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

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

reCAPTCHA セッション トークンの例を次に示します。

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

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

  1. reCAPTCHA スコアベースの新しいサイトキーを作成します
  2. サイトキーのセッション トークン機能を有効にするには、recaptcha-waf-eng@google.com にサイトキーを送信します。
  3. サイトキーに対するセッション トークン機能が有効になると、確認メールが届きます。
  4. セッション トークン機能と 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=SITE_KEY_SESSION_TOKEN_ENABLED&waf=session" async defer></script>
    </head>
  </html>

次のステップとして、Google Cloud Armor セキュリティ ポリシーを構成します。

1 つのアプリケーションで複数の機能を使用する例

1 つのアプリケーションで 1 つ以上の WAF 用の reCAPTCHA Enterprise 機能を使用できます。

例 1: reCAPTCHA セッション トークンと reCAPTCHA 課題ページを使用する

ユーザーがアクセスする可能性のあるページ(たとえば ログインページなど)に、reCAPTCHA セッション トークンを追加して、Cookie を定期的に更新できます。スコアが低いときにリクエストを reCAPTCHA 課題ページにリダイレクトするように、Google Cloud Armor セキュリティ ポリシー ルールを構成します。

次の図は、reCAPTCHA セッション トークンと reCAPTCHA 課題ページの機能を使用するワークフローを示しています。

例 2: reCAPTCHA アクション トークンと reCAPTCHA 課題ページを使用する

reCAPTCHA アクション トークンを追加して、ご購入手続きなどのユーザー アクションを保護できます。次のいずれかの状況でリクエストを reCAPTCHA 課題ページにリダイレクトするように、Google Cloud Armor セキュリティ ポリシー ルールを構成します。

  • スコアが低い。
  • アクション トークンの action_name 属性が、保護されているユーザー アクションと一致しない。

次の図は、reCAPTCHA アクション トークンと reCAPTCHA 課題ページの機能を使用するワークフローを示しています。

次のサンプル スクリプトは、reCAPTCHA アクション トークンを使用し、アクション トークンがヘッダーとして添付された reCAPTCHA 課題ページにリダイレクトする方法を示しています。

   <script src="https://www.google.com/recaptcha/enterprise.js?render=SITE_KEY_ACTION_TOKEN_ENABLED"></script>
    <script>
     function onSuccess(token) {
       const xhr = new XMLHttpRequest();
       xhr.open('GET','http://www.abc.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 the 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('SITE_KEY_ACTION_TOKEN_ENABLED', {
         }).then(onSuccess, onError);
       };
     });
    </script>

次のステップ