處理來自的CAPTCHA回應 AWS WAF - AWS WAFAWS Firewall Manager、 和 AWS Shield Advanced

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

處理來自的CAPTCHA回應 AWS WAF

本節提供處理CAPTCHA回應的範例。

同時 AWS WAF 規則與 CAPTCHA 如果請求沒有具有有效CAPTCHA時間戳的令牌，則操作將終止匹配 Web 請求的評估。如果請求是GET文本/HTML 調用，則 CAPTCHA 然後，行動為客戶提供一個插頁式的謎題。CAPTCHA當您未整合時 CAPTCHA JavaScript API，插頁式會執行謎題，如果最終使用者成功解決，則會自動重新提交要求。

當您整合CAPTCHA JavaScript API並自訂CAPTCHA處理時，您需要偵測終止CAPTCHA回應、提供您的自訂項目CAPTCHA，然後如果最終使用者成功解決難題，請重新提交用戶端的 Web 要求。

下列程式碼範例示範其做法：

注意

所以此 AWS WAF CAPTCHA 動作響應的狀態碼為 HTTP 405，我們用它來識別 CAPTCHA 在此代碼中的響應。如果您的受保護端點使用 HTTP 405 狀態碼來通信同一調用的任何其他類型的響應，則此示例代碼也將為這些響應提供CAPTCHA難題。

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