处理来自的验证码响应 AWS WAF - AWS WAF、 AWS Firewall ManagerAWS Shield Advanced、和 AWS Shield 网络安全总监

引入全新的主机体验 AWS WAF

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

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

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

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

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

当你集成 CAPTCHA JavaScript API 并自定义验证码处理时，你需要检测终止的验证码响应，提供你的自定义 CAPTCHA，然后如果最终用户成功解决了难题，则重新提交客户的 Web 请求。

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

注意

的 AWS 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>