处理来自 Amazon WAF 的验证码响应 - Amazon WAF、Amazon Firewall Manager、Amazon Shield Advanced 和 Amazon Shield 网络安全分析器
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

介绍 Amazon WAF 的全新控制台体验

现在，您可以使用更新后的体验访问控制台中任意位置的 Amazon WAF 功能。有关更多详细信息，请参阅 使用更新的控制台体验。

处理来自 Amazon WAF 的验证码响应

本节提供了处理验证码响应的示例。

如果匹配的 Web 请求没有带有有效验证码时间戳的令牌，则带有 CAPTCHA 操作的 Amazon WAF 规则将终止对该请求的评估。如果请求是 GET 文本/html 调用，则该 CAPTCHA 操作将向客户端提供带有验证码拼图的插页式广告。如果不集成验证码 JavaScript API，则会运行拼图；如果最终用户成功完成拼图，则会自动重新提交请求。

当您集成验证码 JavaScript API 并自定义验证码处理时，您需要检测终止的验证码响应，提供自定义验证码，然后如果最终用户成功完成拼图，则重新提交客户端的 Web 请求。

以下代码示例演示如何执行此操作。

注意

Amazon WAF CAPTCHA 操作响应的状态码为 HTTP 405，我们用它来识别此代码中的 CAPTCHA 响应。如果您的受保护端点使用 HTTP 405 状态代码为同一调用传递任何其他类型的响应，本示例代码也会为这些响应显示验证码拼图。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="<Integration URL>/jsapi.js" defer></script>
</head>
<body>
    <div id="my-captcha-box"></div>
    <div id="my-output-box"></div>

    <script type="text/javascript">
    async function loadData() {
        // Attempt to fetch a resource that's configured to trigger a CAPTCHA
        // action if the rule matches. The CAPTCHA response has status=HTTP 405.
        const result = await AwsWafIntegration.fetch("/protected-resource");

        // If the action was CAPTCHA, render the CAPTCHA and return

        // NOTE: If the endpoint you're calling in the fetch call responds with HTTP 405
        // as an expected response status code, then this check won't be able to tell the
        // difference between that and the CAPTCHA rule action response.

        if (result.status === 405) {
            const container = document.querySelector("#my-captcha-box");
            AwsWafCaptcha.renderCaptcha(container, {
                apiKey: "...API key goes here...",
                onSuccess() {
                    // Try loading again, now that there is a valid CAPTCHA token
                    loadData();
                },
            });
            return;
        }

        const container = document.querySelector("#my-output-box");
        const response = await result.text();
        container.innerHTML = response;
    }

    window.addEventListener("load", () => {
        loadData();
    });
    </script>
</body>
</html>