← 모든 기록
Cloudflare Turnstile로 문의 폼 스팸 막는 방법 대표 이미지
웹 운영

Cloudflare Turnstile로 문의 폼 스팸 막는 방법

Cloudflare Turnstile을 이용해 문의 폼 스팸을 무료로 차단하는 방법을 소개합니다. 계정 생성부터 코드 연동까지 단계별로 안내합니다.

Cloudflare Turnstile을 이용하면 문의 폼과 게시판에 쌓이는 스팸을 무료로 차단할 수 있습니다. 준비물은 Cloudflare 계정과 사이트 키 발급뿐이며, WordPress 플러그인 설치나 직접 코드 연동으로 간단히 적용할 수 있습니다. 이 글에서는 준비, 연동, 테스트, 문제 해결 순서로 안내합니다.

Cloudflare Turnstile이란?

Cloudflare Turnstile은 방문자가 복잡한 문자를 입력하지 않아도 되는 무료 캡차 서비스입니다. 브라우저의 환경 정보와 마우스 움직임, 페이지 체류 시간 등을 종합해 사람인지 봇인지 판별합니다. 사용자는 대부분의 경우 아무런 조작 없이 인증을 통과하므로 기존 캡차보다 문의 폼 작성이 훨씬 수월합니다. 관리자 입장에서는 별도의 비용 없이 스팸을 줄일 수 있다는 장점이 있습니다.

스팸성 게시글은 모든 방문자가 글을 작성할 수 있는 게시판에서 매크로 프로그램으로 작성될 수 있습니다. CloudFlare 무료 캡챠 인증을 연동하면 스팸 게시물 등록을 사전에 방지할 수 있습니다. 다만 Turnstile은 봇의 자동 등록을 막는 데 효과적이지만 사람이 직접 작성하는 악성 게시글까지 완벽히 걸러 주지는 않습니다. 본인인증 서비스(유료)를 추가하면 원천적으로 스팸 게시글 등록을 방지할 수 있습니다. 이와 같은 방법은 아임웹의 스팸 방지 FAQ에서도 안내하고 있습니다.

Turnstile 설정을 위한 준비: Cloudflare 계정 생성 및 사이트 키 발급

Turnstile을 적용하려면 먼저 Cloudflare 계정이 필요합니다. 계정을 만든 뒤에는 아래 순서에 따라 사이트를 등록하고 키를 발급받습니다.

  1. Cloudflare 대시보드에 로그인한 뒤 좌측 메뉴에서 Turnstile을 클릭합니다.
  2. Add site 버튼을 눌러 사이트 이름과 도메인을 입력합니다.
  3. 사용할 위젯 모드를 선택하고 저장합니다.
  4. 발급된 Site Key와 Secret Key를 복사해 안전한 곳에 보관합니다.

Site Key는 공개용 키이므로 HTML 코드에 포함되어도 괜찮습니다. Secret Key는 서버에서만 사용하는 비밀 키이므로 외부에 노출되지 않도록 환경 변수로 관리하는 것이 안전합니다. 두 키는 사이트별로 다르게 발급되므로 여러 개의 폼을 운영한다면 사이트마다 별도로 관리하세요.

위젯 모드는 적용 위치에 따라 선택하면 됩니다. 아래 표는 각 모드의 특징을 정리한 것입니다.

모드특징추천 상황
비간섭형사용자 조작 없이 자동으로 판별문의 폼처럼 작성 흐름을 방해하고 싶지 않은 곳
관리형필요할 때만 체크박스나 과제를 표시댓글처럼 다소 가벼운 인증이 적합한 곳
보이지 않는 방식위젯을 화면에 드러내지 않고 실행디자인 통일성을 우선하는 사이트

WordPress에서 Turnstile 플러그인 설치 및 설정

WordPress를 운영하고 있다면 코드를 직접 작성하지 않고 플러그인으로 Turnstile을 적용할 수 있습니다. Cloudflare가 공식으로 제공하는 플러그인을 사용하면 업데이트와 호환성 관리가 수월합니다.

  1. 워드프레스 관리자 플러그인 > 새로 추가 메뉴로 이동합니다.
  2. 검색창에 Turnstile을 입력하고 Cloudflare가 배포한 플러그인을 찾아 설치합니다.
  3. 설치가 끝나면 활성화를 누릅니다.
  4. 설정 화면에서 Site Key와 Secret Key를 입력합니다.
  5. 문의 폼, 댓글, 회원가입 폼 등 적용 대상을 선택합니다.
  6. 설정 저장 후 공개 페이지에서 위젯이 정상적으로 보이는지 확인합니다.

플러그인마다 설정 화면의 메뉴 이름은 조금씩 다를 수 있습니다. 다만 Site Key와 Secret Key를 입력하는 필드가 반드시 있을 것이므로, 해당 입력란을 찾아 저장하면 됩니다. 만약 현재 쓰는 폼 플러그인이 Turnstile을 지원하지 않는다면, 코드로 직접 연동하는 방법을 검토해야 합니다.

직접 코드로 Turnstile 연동하기 (HTML, JavaScript)

WordPress를 사용하지 않거나 원하는 곳에 위젯을 붙여야 한다면 직접 코드로 연동해야 합니다. 연동 과정은 크게 세 가지로 나뉩니다.

  1. Cloudflare가 제공하는 Turnstile 스크립트를 페이지에 로드합니다.
  2. HTML 폼 안에 cf-turnstile 위젯이 렌더링될 자리를 만듭니다.
  3. 폼 제출 시 토큰을 서버로 보내고 siteverify API로 검증합니다.

HTML 폼에는 아래처럼 cf-turnstile 컨테이너를 넣으면 됩니다. (코드 블록은 JavaScript만 다루므로 실제 HTML 구조는 참고로만 이해하세요.)

const form = document.querySelector('#contact');
const tokenField = document.querySelector('[name="cf-turnstile-response"]');

form.addEventListener('submit', async (event) => {
  if (!tokenField.value) {
    event.preventDefault();
    alert('Turnstile 인증을 완료해 주세요.');
    return;
  }

  const response = await fetch(form.action, {
    method: 'POST',
    body: new FormData(form)
  });

  if (!response.ok) {
    event.preventDefault();
    alert('서버 검증에 실패했습니다. 잠시 후 다시 시도해 주세요.');
  }
});

이 JavaScript는 토큰이 비어 있을 때 폼 제출을 막는 역할을 합니다. 그러나 보안을 위해서는 반드시 서버에서 토큰을 다시 검증해야 합니다. 서버에서는 아래 흐름으로 검증합니다.

  1. 클라이언트가 받은 토큰을 siteverify API에 전달합니다.
  2. API 응답의 success 값이 true인지 확인합니다.
  3. true가 아니면 해당 요청을 거부합니다.

siteverify 요청에 사용하는 값은 다음과 같이 정리할 수 있습니다.

파라미터설명
secretCloudflare에서 발급받은 Secret Key
response클라이언트 폼에서 전달된 토큰
remoteip선택적으로 사용하는 사용자 IP 주소

이 검증을 거치면 매크로 프로그램이 직접 폼을 제출하는 시나리오를 효과적으로 차단할 수 있습니다. 특히 문의 폼이나 게시판처럼 공개된 입력 공간에서는 서버 검증 단계가 꼭 필요합니다.

실제 적용 확인 및 스팸 차단 테스트

Turnstile을 연동했다면 실제로 스팸이 차단되는지 확인해야 합니다. 아래 체크리스트를 하나씩 점검해 보세요.

  • 문의 폼 페이지에서 Turnstile 위젯이 표시되는가?
  • 일반 사용자처럼 브라우저에서 폼을 제출하면 정상적으로 전송되는가?
  • 개발자 도구의 네트워크 탭에서 siteverify 호출이 확인되는가?
  • API 응답의 success 값이 true로 오는가?
  • 토큰 없이 강제로 POST 요청을 보내면 서버가 거부하는가?

스팸을 실제로 발생시키지 않고 테스트하려면 시크릿 모드에서 페이지를 열어 위젯이 다시 렌더링되는지 확인하는 방법이 좋습니다. 또 폼을 여러 번 제출해 토큰이 매번 새로 발급되는지도 함께 점검하세요. 토큰이 재사용되면 일회용 인증이 제대로 동작하지 않는 것이므로 설정을 다시 확인해야 합니다.

만약 스팸이 계속 유입된다면 다음 기준으로 추가 조치를 결정할 수 있습니다.

  • Turnstile을 통과하는 자동화 공격이 지속될 때 → 본인인증 도입을 검토한다.
  • 특정 국가나 IP 대역에서 스팸이 집중될 때 → Cloudflare 방화벽 규칙을 추가한다.
  • 특정 단어가 반복될 때 → 서버에서 필터링 규칙을 적용한다.

문제 해결: Turnstile이 정상 작동하지 않을 때

Turnstile을 적용했는데 위젯이 나타나지 않거나 폼 전송이 실패한다면 아래 항목을 순서대로 확인하세요.

위젯이 렌더링되지 않는 경우

  • Site Key에 오타가 없는지 확인하세요. 오타가 있으면 위젯이 생성되지 않습니다.
  • 등록한 도메인과 실제 페이지 도메인이 일치하는지 확인하세요. localhost에서 테스트할 때는 Cloudflare에 localhost를 별도로 추가해야 할 수 있습니다.
  • 스크립트 로드 순서를 확인하세요. Turnstile 스크립트를 불러오기 전에 위젯 컨테이너가 존재해야 합니다.
  • 페이지에 JavaScript 오류가 있는지 개발자 도구 콘솔에서 확인하세요.

폼 제출이 실패하는 경우

  • cf-turnstile-response 필드의 이름이 서버와 일치하는지 확인하세요.
  • Secret Key가 서버 환경 변수에 올바르게 설정되었는지 확인하세요.
  • siteverify 응답의 error-codes 값을 확인해 구체적인 원인을 파악하세요.
  • 서버 시간과 Cloudflare 서버 시간이 크게 차이 나면 토큰 검증이 실패할 수 있습니다.

캐시로 인해 오래된 설정이 남아 있는 경우

  • Cloudflare CDN 캐시나 브라우저 캐시를 비운 뒤 다시 테스트하세요. 이전 JavaScript 파일이 로드되면 변경 사항이 반영되지 않을 수 있습니다.
  • 워드프레스 캐시 플러그인을 사용한다면 관련 캐시도 함께 삭제하세요.

이 과정에서 도메인 연결 자체가 원인일 수도 있습니다. Cloudflare DNS 설정을 변경한 직후라면 잠시 후 다시 시도해 보세요. 여전히 해결되지 않는다면 Cloudflare DNS 레코드 설정 오류 해결 방법 문서를 참고해 DNS 레코드가 올바르게 설정되었는지 점검하세요.

참고 자료