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

后续步骤