CAPTCHA 퍼즐을 렌더링하는 방법 - AWS WAF, AWS Firewall Manager, AWS Shield Advanced, 및 AWS Shield 네트워크 보안 디렉터

AWS WAF에 대한 새로운 콘솔 환경 소개

이제 업데이트된 환경을 사용하여 콘솔의 모든 위치에서 AWS WAF 기능에 액세스할 수 있습니다. 자세한 내용은 업데이트된 콘솔 환경 작업 섹션을 참조하십시오.

CAPTCHA 퍼즐을 렌더링하는 방법

이 섹션에서는 renderCaptcha 구현 예제를 제공합니다.

클라이언트 인터페이스의 원하는 위치에서 AWS WAF renderCaptcha 호출을 사용할 수 있습니다. 이 호출은 AWS WAF에서 CAPTCHA 퍼즐을 검색하여 렌더링하고 확인을 위해 결과를 AWS WAF로 보냅니다. 전화를 걸 때 퍼즐 렌더링 구성과 최종 사용자가 퍼즐을 완료했을 때 실행할 콜백을 제공합니다. 옵션에 대한 자세한 내용은 앞 섹션인 CAPTCHA JavaScript API 사양 섹션을 참조하세요.

이 호출을 지능형 위협 통합 API의 토큰 관리 기능과 함께 사용하십시오. 이 호출은 CAPTCHA 퍼즐의 성공적인 완료를 확인하는 토큰을 클라이언트에게 제공합니다. 지능형 위협 통합 API를 사용하여 토큰을 관리하고 AWS WAF 보호 팩(웹 ACL)으로 보호되는 엔드포인트에 대한 클라이언트 호출에 토큰을 제공할 수 있습니다. 지능형 위협 API에 대한 자세한 내용은 지능형 위협 JavaScript API 사용 섹션을 참조하세요.

예제 구현

다음 예제 목록은 <head> 섹션의 AWS WAF 통합 URL 배치를 포함하는 표준 CAPTCHA 구현을 보여줍니다.

이 목록은 지능형 위협 통합 API의 AwsWafIntegration.fetch 래퍼를 사용하는 성공 콜백으로 renderCaptcha 함수를 구성합니다. 이 함수에 대한 자세한 내용은 통합 fetch 래퍼 사용 방법 섹션을 참조하세요.

<head>
    <script type="text/javascript" src="<Integration URL>/jsapi.js" defer></script>
</head>

<script type="text/javascript">
    function showMyCaptcha() {
        var container = document.querySelector("#my-captcha-container");
        
        AwsWafCaptcha.renderCaptcha(container, {
            apiKey: "...API key goes here...",
            onSuccess: captchaExampleSuccessFunction,
            onError: captchaExampleErrorFunction,
            ...other configuration parameters as needed...
        });
    }
    
    function captchaExampleSuccessFunction(wafToken) {
        // Captcha completed. wafToken contains a valid WAF token. Store it for
        // use later or call AwsWafIntegration.fetch() to use it easily.
        // It will expire after a time, so calling AwsWafIntegration.getToken()
        // again is advised if the token is needed later on, outside of using the
        // fetch wrapper.
        
        // Use WAF token to access protected resources
        AwsWafIntegration.fetch("...WAF-protected URL...", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: "{ ... }" /* body content */
        });
    }
    
    function captchaExampleErrorFunction(error) {
        /* Do something with the error */
    }
</script>

<div id="my-captcha-container">
    <!-- The contents of this container will be replaced by the captcha widget -->
</div>
예제 구성 설정

다음 예제 목록은 너비 및 제목 옵션이 기본값이 아닌 값으로 설정된 renderCaptcha를 보여줍니다.


        AwsWafCaptcha.renderCaptcha(container, {
            apiKey: "...API key goes here...",
            onSuccess: captchaExampleSuccessFunction,
            onError: captchaExampleErrorFunction,
            dynamicWidth: true, 
            skipTitle: true
        });

구성 옵션에 대한 전체 정보는 CAPTCHA JavaScript API 사양 섹션을 참조하세요.