Google Cloud Armor との統合の例

このドキュメントでは、Google Cloud Armor 用に WAF 用 reCAPTCHA Enterprise の機能を実装する方法の例を示します。

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

複数の機能を使用する場合は、これらの機能ごとに reCAPTCHA キーを作成し、アプリケーションで使用する必要があります。たとえば、reCAPTCHA アクション トークンと reCAPTCHA 課題ページを使用する場合は、アクション トークンキーと課題ページキーを作成してアプリケーションで使用する必要があります。

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

次のステップ