Google Cloud Armor와 통합 예시

이 문서에서는 Google Cloud Armor에 WAF용 reCAPTCHA 기능을 구현하는 방법을 예시로 보여줍니다.

단일 애플리케이션에서 WAF용 reCAPTCHA 기능을 하나 이상 사용할 수 있습니다.

기능을 두 개 이상 사용하려면 기능마다 reCAPTCHA 키를 만들고 애플리케이션에서 사용해야 합니다. 예를 들어 reCAPTCHA 작업 토큰과 reCAPTCHA 테스트 페이지를 사용하려면 작업 토큰 키와 테스트 페이지 키를 만들고 애플리케이션에서 사용해야 합니다.

예시 1: reCAPTCHA 세션 토큰 및 reCAPTCHA 테스트 페이지 사용

사용자가 액세스할 수 있는 페이지에 reCAPTCHA 세션 토큰을 추가하여 쿠키가 주기적으로 새로고침되도록 할 수 있습니다(예: 로그인 페이지). 점수가 낮을 경우 Google Cloud Armor 보안 정책 규칙을 구성하여 요청을 reCAPTCHA 테스트 페이지로 리디렉션합니다.

다음 이미지는 reCAPTCHA 세션 토큰과 reCAPTCHA 테스트 페이지 기능을 사용하는 워크플로를 보여줍니다.

예시 2: reCAPTCHA 작업 토큰 및 reCAPTCHA 테스트 페이지 사용

reCAPTCHA 작업 토큰을 추가하여 결제와 같은 사용자 작업을 보호할 수 있습니다. 다음 조건에서 Google Cloud Armor 보안 정책 규칙을 구성하여 reCAPTCHA 테스트 페이지로 요청을 리디렉션합니다.

  • 점수가 낮습니다.
  • 작업 토큰의 action_name 속성이 보호되는 사용자 작업과 일치하지 않습니다.

다음 이미지는 reCAPTCHA 작업 토큰 및 reCAPTCHA 테스트 페이지 기능을 사용하는 워크플로를 보여줍니다.

다음 샘플 스크립트는 reCAPTCHA 작업 토큰을 사용하고 작업 토큰이 헤더로 연결된 reCAPTCHA 테스트 페이지로 리디렉션하는 방법을 보여줍니다.

   <script src="https://www.google.com/recaptcha/enterprise.js?render=ACTION_TOKEN_SITE_KEY"></script>
    <script>
     function onSuccess(token) {
       const xhr = new XMLHttpRequest();
       xhr.open('GET','http://www.example.com/checkout', false);
       xhr.setRequestHeader("X-Recaptcha-Token", token);
       xhr.onreadystatechange = function() {
         // Make sure that the request is finished and response is ready with 200
         if (this.readyState == 4 && this.status == 200) {
           // Display the response, it could be a reCAPTCHA challenge
           // page based on your Google Cloud Armor security rule settings.
            document.open();
            document.write(xhr.responseText);
            document.close();

         }
       };
       xhr.send(null);
     }

     grecaptcha.enterprise.ready(function () {
       document.getElementById("execute-button").onclick = () => {
         grecaptcha.enterprise.execute('ACTION_TOKEN_SITE_KEY', {
         }).then(onSuccess, onError);
       };
     });
    </script>

다음 단계