Tratamento de resposta de CAPTCHA do AWS WAF - AWS WAF, AWS Firewall Manager, e AWS Shield Advanced

Tratamento de resposta de CAPTCHA do AWS WAF

Esta seção fornece um exemplo de como lidar com uma resposta CAPTCHA.

Uma regra AWS WAF com uma ação CAPTCHA encerra a avaliação de uma solicitação da web correspondente se a solicitação não tiver um token com um timestamp de CAPTCHA válido. Se a solicitação for uma chamada GET de texto/html, a ação CAPTCHA então serve ao cliente uma intersticial com um quebra-cabeça CAPTCHA. Quando você não integra a API CAPTCHA JavaScript, a intersticial executa o quebra-cabeça e, se o usuário final o resolver com sucesso, reenvia automaticamente a solicitação.

Ao integrar a API CAPTCHA JavaScript e personalizar o tratamento do CAPTCHA, você precisa detectar a resposta final do CAPTCHA, fornecer seu CAPTCHA personalizado e, se o usuário final resolver o quebra-cabeça, reenviar a solicitação da web do cliente.

O exemplo de código a seguir mostra como fazer isso.

nota

A resposta da ação CAPTCHA do AWS WAF tem um código de status HTTP 405, que usamos para reconhecer a resposta CAPTCHA nesse código. Se seu endpoint protegido usa um código de status HTTP 405 para comunicar qualquer outro tipo de resposta para a mesma chamada, esse código de exemplo também renderizará um quebra-cabeça CAPTCHA para essas respostas. 

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