AWS WAF JavaScript 통합 - AWS WAF, AWS Firewall Manager및 AWS Shield Advanced

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

AWS WAF JavaScript 통합

이 섹션에서는 AWS WAF JavaScript 통합 사용 방법을 설명합니다.

JavaScript 통합 API를 사용하여 JavaScript를 실행하는 브라우저 및 기타 디바이스에서 AWS WAF 애플리케이션 통합을 구현할 수 있습니다.

CAPTCHA 퍼즐 및 자동 문제는 브라우저가 HTTPS 엔드포인트에 액세스하는 경우에만 실행할 수 있습니다. 토큰을 획득하려면 브라우저 클라이언트가 안전한 컨텍스트에서 실행되어야 합니다.

  • 지능형 위협 API를 사용하면 클라이언트 측 자동 브라우저 챌린지를 통해 토큰 인증을 관리하고 보호된 리소스로 보내는 요청에 토큰을 포함할 수 있습니다.

  • CAPTCHA 통합 API가 지능형 위협 API에 추가되므로 클라이언트 애플리케이션에서 CAPTCHA 퍼즐의 배치와 특성을 사용자 지정할 수 있습니다. 이 API는 지능형 위협 API를 활용하여 최종 사용자가 CAPTCHA 퍼즐을 성공적으로 완료한 후 해당 페이지에서 사용할 AWS WAF 토큰을 획득합니다.

이러한 통합을 사용하면 클라이언트의 원격 프로시저 호출에 유효한 토큰이 포함되도록 할 수 있습니다. 애플리케이션 페이지에 이러한 통합 API가 있으면 유효한 토큰을 포함하지 않은 요청을 차단하는 등 완화 규칙을 웹 ACL에 구현할 수 있습니다. 규칙의 Challenge 또는 CAPTCHA 작업을 사용하여 클라이언트 애플리케이션이 획득한 토큰을 강제로 사용하도록 하는 규칙을 구현할 수도 있습니다.

지능형 위협 API 구현 예제

다음 목록은 웹 애플리케이션 페이지의 지능형 위협 API의 일반적인 구현의 기본 구성 요소를 보여줍니다.

<head>
<script type="text/javascript" src="Web ACL integration URL/challenge.js" defer></script>
</head>
<script>
const login_response = await AwsWafIntegration.fetch(login_url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: login_body
  });
</script>
CAPTCHA JavaScript API 구현 예제

CAPTCHA 통합 API를 사용하면 최종 사용자의 CAPTCHA 퍼즐 환경을 사용자 지정할 수 있습니다. CAPTCHA 통합은 브라우저 확인 및 토큰 관리를 위해 JavaScript 지능형 위협 통합을 활용하고 CAPTCHA 퍼즐을 구성 및 렌더링하는 기능을 추가합니다.

다음 목록은 웹 애플리케이션 페이지에서 CAPTCHA JavaScript API를 일반적으로 구현하는 기본 구성 요소를 보여줍니다.

<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) {
        // Use WAF token to access protected resources
        AwsWafIntegration.fetch("...WAF-protected URL...", {
            method: "POST",
            ...
        });
    }
    
    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>
주제