

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

이제 업데이트된 환경을 사용하여 콘솔의 모든 위치에서 AWS WAF 기능에 액세스할 수 있습니다. 자세한 내용은 [콘솔 작업을 참조하세요](https://docs.aws.amazon.com/waf/latest/developerguide/working-with-console.html).

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

# AWS WAF JavaScript 통합
<a name="waf-javascript-api"></a>

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

JavaScript 통합 APIs를 사용하여 브라우저 및 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="{{protection pack (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>
```

**Topics**
+ [토큰에 사용할 도메인 제공](waf-js-challenge-api-set-token-domain.md)
+ [콘텐츠 보안 정책과 함께 JavaScript API 사용](waf-javascript-api-csp.md)
+ [지능형 위협 JavaScript API 사용](waf-js-challenge-api.md)
+ [CAPTCHA JavaScript API 사용](waf-js-captcha-api.md)