

**推出 的新主控台體驗 AWS WAF**

您現在可以使用更新後的體驗，在主控台的任何位置存取 AWS WAF 功能。如需詳細資訊，請參閱[使用 主控台](https://docs.aws.amazon.com/waf/latest/developerguide/working-with-console.html)。

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

# 從 處理 CAPTCHA 回應 AWS WAF
<a name="waf-js-captcha-api-conditional"></a>

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

如果請求沒有具有有效 CAPTCHA 時間戳記的字符，則具有CAPTCHA動作的 AWS WAF 規則會終止對相符 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>
```