Gestión de una respuesta CAPTCHA de AWS WAF - AWS WAF, AWS Firewall Manager, y AWS Shield Advanced

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Gestión de una respuesta CAPTCHA de AWS WAF

Una AWS WAF regla con una CAPTCHA acción finaliza la evaluación de una solicitud web coincidente si la solicitud no tiene un token con una marca de tiempo de CAPTCHA válida. Si la solicitud es una llamada de texto/html GET, la acción CAPTCHA envía al cliente un intersticial con un rompecabezas de CAPTCHA. Si no integras la JavaScript API de CAPTCHA, el intersticial resuelve el rompecabezas y, si el usuario final lo resuelve correctamente, vuelve a enviar la solicitud automáticamente.

Al integrar la JavaScript API de CAPTCHA y personalizar el manejo del CAPTCHA, es necesario detectar la respuesta de CAPTCHA que termina, entregar el CAPTCHA personalizado y, a continuación, si el usuario final resuelve el acertijo con éxito, volver a enviar la solicitud web del cliente.

El siguiente ejemplo de código muestra cómo hacerlo.

nota

La respuesta de AWS WAF CAPTCHA acción tiene un código de estado HTTP 405, que utilizamos para reconocer la respuesta en este código. CAPTCHA Si su punto de conexión protegido utiliza un código de estado HTTP 405 para comunicar cualquier otro tipo de respuesta para la misma llamada, este código de ejemplo también renderizará un rompecabezas de CAPTCHA para esas respuestas. 

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