Gestion d'une réponse CAPTCHA depuis AWS WAF - AWS WAF, AWS Firewall Manager, et AWS Shield Advanced

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Gestion d'une réponse CAPTCHA depuis AWS WAF

Une AWS WAF règle comportant une CAPTCHA action met fin à l'évaluation d'une requête Web correspondante si celle-ci ne contient pas de jeton avec un horodatage CAPTCHA valide. Si la demande est un appel GET text/html, l'CAPTCHAaction envoie alors au client un interstitiel contenant un casse-tête CAPTCHA. Lorsque vous n'intégrez pas l' JavaScript API CAPTCHA, l'interstitiel exécute le puzzle et, si l'utilisateur final le résout avec succès, soumet automatiquement à nouveau la demande.

Lorsque vous intégrez l' JavaScript API CAPTCHA et que vous personnalisez votre gestion des CAPTCHA, vous devez détecter la réponse CAPTCHA finale, fournir votre CAPTCHA personnalisé, puis si l'utilisateur final résout le casse-tête avec succès, soumettre à nouveau la demande Web du client.

L'exemple de code suivant montre comment procéder :

Note

La réponse à l' AWS WAF CAPTCHAaction possède un code d'état HTTP 405, que nous utilisons pour reconnaître la CAPTCHA réponse dans ce code. Si votre point de terminaison protégé utilise un code d'état HTTP 405 pour communiquer tout autre type de réponse pour le même appel, cet exemple de code affichera également un casse-tête CAPTCHA pour ces réponses. 

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