캡차를 버리고 턴스타일(turnstile)로

"문의하기가 안된다네요. 확인 좀 해주세요!"

우리 회사의 문의하기 기능은 구글의 캡차 v3가 적용되어 있다.
아무래도 아무것도 적용해놓지 않으면 스팸(공격성)성 글이 종종 들어왔었기 때문이다. (출근해서 이거때문에 귀찮아죽는 줄 알았다.)

그런데 이건 아무리 봐도 잘못된 선택이었던 것 같다.

구글이 점수를 지정해 주기 때문에 실제 사용자들도 부득이하게 봇으로 판단되는 경우가 은근히 있었다.
이로 인해 사람들은 불편했을 것이다. 상품 도입 등을 위해 문의하는데 안되면 당연히 이탈률이 있지 않았을까?

대안을 고민하면서도 사실 메인 업무가 중요해서 무시하던 중, 어디에선가 클라우드플레어에서 턴스타일(turnstile)이라는 캡차의 대안을 소개한 글이 불현듯 떠올랐다. 그래서 이걸 이번에 적용하기로 결심했다.

시작하기

먼저, 클라우드플레어의 턴스타일 페이지(https://www.cloudflare.com/ko-kr/products/turnstile)로 이동한다.
이후, 무료로 시작하기 버튼을 눌러 회원가입/로그인을 진행하면 콘솔화면으로 접근이 가능하다.

사이트 추가 및 API 키 생성하기

사이트 관리 시 필요한 이름을 입력하고, 이 턴스타일을 적용할 도메인을 입력해 주고 [create] 버튼을 눌러준다.
그러면 사이트 키와 시크릿 키가 발급된다..

이 사이트 키는 공개되는 프론트엔드에, 시크릿 키는 사용자들이 볼 수 없는 백엔드에서 사용되어야 합니다.

프론트엔드 작업하기

아래와 같이 render시 타겟의 id 값을 맞추고, 사이트키를 입력하면 아래 사진과 같이 턴스타일의 요소가 표시다.
이후 callback 함수에서 받아오는 token을 이용해 백엔드와 통신을 하여 정상적인 호출인지 / 봇인지를 판단할 수있다.
(또한 cf-turnstile-response 라는 input 요소의 value에 저장되니 그걸 사용해도 된다.)

  <body>
    <div class="area" id="area"></div>
  </body>

  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
  <script>
    turnstile.ready(function () {
    turnstile.render('#area', {
        sitekey: '<YOUR_SITE_KEY>',
        callback: function(token) {
          console.log(`Challenge Success ${token}`);
        },
      });
    });
  </script>

백엔드 작업하기

프론트엔드에서 백엔드로 해당 토큰을 넘겨주고, 백엔드에서는 클라우드플레어의 API 서버와 통신을 해야 합니다.
백엔드에서 아래와 같은 API 주소로 적절한 파라미터를 넘기면 그 아래와 같은 응답이 옵니다.

이 Success가 true일 경우 정상적인 호출이므로, 이후 프로세스를 진행하면 됩니다.

POST https://challenges.cloudflare.com/turnstile/v0/siteverify HTTP
{
  "secrert": "${발급받은 시크릿 키}"
  "response": "${callback으로 넘어온 token}"
  "remoteip": "${사용자의 IP}"   :: Optional
}

Response
{
  "success": true,
  "challenge_ts": "2022-02-28T15:14:30.096Z",
  "hostname": "example.com",
  "error-codes": [],
  "action": "login",
  "cdata": "sessionid-123456789"
}

조금 더 사용해 보고, 이게 더 괜찮은 방법인지를 파악할 수 있을 것 같다.
제발 문제없고 공격성 submit을 최대한 방지할 수 있기를!

참고

https://www.cloudflare.com/ko-kr/products/turnstile/

클라우드플레어 무료 캡챠 인증 대안

간편한 캡챠 대안, Cloudflare Turnstile을 무료로 이용하세요.

www.cloudflare.com

저작자표시 비영리 변경금지

'개발' 카테고리의 다른 글

IntelliJ / 코딩 컨벤션 적용하기 (0)	2023.03.13

캡차를 버리고 턴스타일(turnstile)로