からのCAPTCHAレスポンスの処理 AWS WAF - AWS WAF、 AWS Firewall Manager、および AWS Shield Advanced

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

からのCAPTCHAレスポンスの処理 AWS WAF

このセクションでは、CAPTCHAレスポンスを処理する例を示します。

An AWS WAF を使用した ルール CAPTCHA アクションは、リクエストに有効なCAPTCHAタイムスタンプを持つトークンがない場合、一致するウェブリクエストの評価を終了します。リクエストがGETテキスト/HTML 呼び出しの場合、CAPTCHA 次に、 アクションは、パズルを含むインタースティシャルCAPTCHAをクライアントに提供します。を統合しない場合CAPTCHA JavaScript API、インタースティシャルはパズルを実行し、エンドユーザーがパズルを正常に解決すると、リクエストが自動的に再送信されます。

を統合しCAPTCHA JavaScript APIてCAPTCHA処理をカスタマイズするときは、終了CAPTCHAレスポンスを検出し、カスタム を提供しCAPTCHA、エンドユーザーがパズルを正常に解決したら、クライアントのウェブリクエストを再送信する必要があります。

次のコード例は、これを実行する方法を説明しています。

注記

- AWS WAF CAPTCHA アクションレスポンスのステータスコードは 405 HTTP で、 の認識に使用されます。CAPTCHA このコードの レスポンス。保護されたエンドポイントが 405 HTTP ステータスコードを使用して、同じ呼び出しに対して他のタイプのレスポンスを通信する場合、このサンプルコードはそれらのレスポンスの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>