AWS WAF에서 CAPTCHA 응답 처리 - AWS WAF, AWS Firewall Manager및 AWS Shield Advanced

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

AWS WAF에서 CAPTCHA 응답 처리

이 섹션에서는 CAPTCHA 응답을 처리하는 예제를 제공합니다.

CAPTCHA 작업이 포함된 AWS WAF 규칙은 요청에 유효한 CAPTCHA 타임스탬프가 있는 토큰이 없는 경우 일치하는 웹 요청에 대한 평가를 종료합니다. 요청이 GET text/html 호출인 경우 CAPTCHA 작업은 CAPTCHA 퍼즐이 포함된 중간 광고를 클라이언트에게 제공합니다. CAPTCHA JavaScript API를 통합하지 않을 경우 중간 광고에서 퍼즐이 실행되고 최종 사용자가 문제를 성공적으로 풀면 자동으로 요청이 다시 제출됩니다.

CAPTCHA JavaScript API를 통합하고 CAPTCHA 처리를 사용자 지정하면 종료되는 CAPTCHA 응답을 감지하여 사용자 지정 CAPTCHA를 제공하고 나서, 최종 사용자가 문제를 성공적으로 해결하면 클라이언트의 웹 요청을 다시 제출해야 합니다.

다음 코드 예제에서는 이를 수행하는 방법을 보여줍니다.

참고

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>