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

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

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

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

当你集成 CAPTCHA JavaScript API 并自定义验证码处理时，你需要检测终止的验证码响应，提供你的自定义 CAPTCHA，然后如果最终用户成功解决了难题，则重新提交客户的 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>