Cloudflare Turnstile은 Google reCaptcha, hCaptcha를 대체할 스팸 방지 검증 솔루션이다.

2022년 9월 28일에 출시됐으며, Google reCaptcha나 hCaptcha와 다르게, 이미지를 클릭해서 봇이 아님을 증명하거나 이상한 퍼즐들을 풀 필요 없이 웹사이트에 검증 기능을 추가할 수 있다고 한다.

Turnstile에 대한 자세한 내용 (blog.cloudflare.com)을 확인해보자.

사용법

Turnstile을 사용하는 방법은 공식 문서를 참고하면 된다.

사용절차 간단하게 살펴보기

주의: 아래의 절차들은 이 글의 출판 시점과는 달라졌을 수도 있다.
정확하고 공식적인 사용 방법은 공식 문서를 참고하라.

1. Cloudflare.com 접속

2. Turnstile (Beta) 메뉴 -> Add Site 링크 클릭

3. 아래 폼에 정보 채워넣기

• Site Name: Turnstile을 둘 사이트에 붙이는 이름
• Domain: Turnstile이 표시될 웹사이트의 도메인 주소
  • ngrok 도메인을 써도 작동함. ngrok을 통해 로컬 환경에서 사용해봐도 됨.

4. Create 버튼을 누르면, sitekey와 secret를 받을 수 있다.

5. Turnstile을 표시할 프론트엔드 웹사이트 HTML에 다음과 같이 코드를 추가한다.

   1. head 태그 안에 아래 script 태그를 추가한다.

   <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

   2. Turnstile 위젯을 표시할 위치를 지정해야 한다. 아래와 같이 div 태그를 원하는 위치에 추가한다. data-sitekey 속성에는 실제 sitekey를 넣어줘야 한다.

   <div class="cf-turnstile" data-sitekey="${sitekey}"></div>

   3. 프론트엔드에서 검증이 완료됐을 때, cf-turnstile-response라는 name을 가진 hidden input 태그에 Cloudflare에 제출해 검증해볼 수 있는 토큰이 value로 채워질 것이다.

   <input type="hidden" name="cf-turnstile-response" value="0x4AAAAAAAArpEAAAJIFNVIJA-qqq" id="cf-chl-widget-2wqtz_response">

6. 실제로 검증해볼 때는 서버에서 이 cf-turnstile-response 토큰을 획득해 Cloudflare에 제출해봐야 한다.
   https://challenges.cloudflare.com/turnstile/v0/siteverify 엔드포인트에 검증 토큰을 제출한다.

7. 응답으로 아래와 같이 검증결과가 리턴될 것이다.

{
	"success": true,
	"challenge_ts": "2022-10-02T12:45:43.063Z",
	"hostname": "1ef84b4f323f.ap.ngrok.io",
	"error-codes": [],
	"action": "",
	"cdata": ""
}

success가 true이면 스팸성 클라이언트가 아님, false면 스팸성 클라이언트라고 검증된 것이다.