Gestión de una respuesta de 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 de CAPTCHA de AWS WAF

En esta sección se incluye un ejemplo de cómo gestionar una respuesta de CAPTCHA.

Una regla AWS WAF con una acción CAPTCHA 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 integra la API de JavaScript de CAPTCHA, el intersticial ejecuta el rompecabezas y, si el usuario final lo resuelve correctamente, vuelve a enviar la solicitud automáticamente.

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

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

nota

La respuesta de acción CAPTCHA de AWS WAF tiene un código de estado HTTP 405, que utilizamos para reconocer la respuesta CAPTCHA en este código. 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>