与 Google Cloud Armor 集成的示例

本文档提供了一些示例,展示了如何为 Google Cloud Armor 实现 reCAPTCHA for WAF 的功能。

您可以在一款应用中使用一个或多个 reCAPTCHA for WAF 功能。

如果您想使用多项功能,则必须为每项功能分别创建 reCAPTCHA 密钥,并在应用中使用这些密钥。例如,如果您 使用 reCAPTCHA 操作令牌和 reCAPTCHA 验证页面,那么您必须 创建操作令牌密钥和挑战页面密钥, 应用。

示例 1:使用 reCAPTCHA 会话令牌和 reCAPTCHA 质询页面

您可以在用户可能会访问的页面(例如登录页面)中添加 reCAPTCHA 会话令牌,以便定期刷新 Cookie。配置 Google Cloud Armor 安全政策规则,以便在得分较低时将请求重定向到 reCAPTCHA 质询页面。

下图显示了使用 reCAPTCHA 会话令牌和 reCAPTCHA 质询页面功能的工作流程:

示例 2:使用 reCAPTCHA 操作令牌和 reCAPTCHA 质询页面

您可以添加 reCAPTCHA 操作令牌以保护用户操作,例如结账。配置 Google Cloud Armor 安全政策规则以将请求重定向到 满足以下任一条件的 reCAPTCHA 验证页面:

  • 得分很低。
  • 操作令牌的 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>

后续步骤