Cloudflare WAF 설정으로 API 보호하기

Cloudflare WAF Free Tier를 활용해 Next.js API Route와 백엔드 간의 통신을 무료로 보호하는 방법을 공유합니다.

2025년 12월 24일

GhostGains 프로젝트의 백엔드 API(api.ghostgains.app)는 서비스 구조상 퍼블릭하게 열려있었다. cloudflare workers로 서버리스 api가 d1 데이터베이스와 연결되어있는데 아무런 보호 조치 없이 열어두자니 크롤링이나 악성 트래픽이 걱정됐다. 실제로 구글애널틱스로 프론트 상황만 봐도 각종 나라에서 마구잡이로 요청이 들어온다. 이건 누군가 스크립트로 요청을 난사하면 D1(DB) 읽기 비용이나 Workers 호출 비용이 줄줄 샐 수 있다.

그래서 애플리케이션 코드는 건드리지 않고, Cloudflare WAF(Web Application Firewall) 의 프리 티어 기능을 활용해 인프라 레벨에서 깔끔하게 접근을 제어했다.

Secret Header

핵심은 브라우저가 백엔드 API에 직접 접근하지 못하게 차단하고, 오직 Next.js 서버를 통해서만 요청하도록 강제하는 것이다.

  1. Browser: Next.js 서버로 데이터 요청. (백엔드 주소 모름)
  2. Next.js Server: 환경변수에 저장된 Secret Key를 헤더에 포함시켜 백엔드 API 호출.
  3. Cloudflare WAF: 요청 헤더에 Secret Key가 없거나 일치하지 않으면 Edge 단계에서 즉시 차단(Block).

이 구조를 사용하면 백엔드 서버는 인가된 요청(Next.js 서버)만 받아들이게 된다.

1. Next.js API Route 구현 (Proxy)

클라이언트(브라우저)에 비밀 키가 노출되지 않도록, Server Component나 API Route에서만 백엔드와 통신해야 한다.

lib/api.ts에 서버 사이드 전용 fetch 함수를 작성해서 사용했다.

// lib/api.ts (Server-side only)

export async function fetchFromAPI(endpoint: string) {
  // ⚠️ Node.js 런타임에서만 실행됨. 브라우저 network 탭엔 헤더가 안 찍힘.
  const res = await fetch(`https://api.ghostgains.app${endpoint}`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      // Cloudflare WAF가 검사할 비밀 키 주입
      'x-auth-key': process.env.API_SECRET_KEY!, 
    },
    next: { revalidate: 3600 }
  });

  if (!res.ok) throw new Error(`API Error: ${res.status}`);
  return res.json();
}

프론트엔드에서는 이 함수를 통해 데이터를 요청한다. 실제 백엔드와의 통신은 Next.js 서버가 대리(Proxy) 수행하므로 보안 키는 안전하게 숨겨진다.

2. Cloudflare WAF 설정 (Free Tier)

Cloudflare는 Free Tier에서도 강력한 WAF 기능을 제공한다. 대시보드에서 간단한 규칙(Rule) 생성만으로 적용 가능하다.

  1. Cloudflare Dashboard 접속 > 해당 도메인 선택
  2. 좌측 메뉴 Security > WAF 클릭
  3. [+ Create rule] 버튼 클릭
  4. 아래와 같이 차단 규칙 설정:

Expression Preview:

(http.request.headers["x-auth-key"] ne "YOUR_SECRET_KEY_HERE")
  • Field: Header
  • Name: x-auth-key (코드와 일치해야 함)
  • Operator: does not equal
  • Value: 설정한_비밀_키_값
  • Action: Block

설정 후 Deploy를 누르면 즉시 적용된다.

3. 테스트 및 검증

설정이 완료되면 curl 명령어로 테스트해본다.

헤더 없이 요청 시 (차단 확인):

curl [https://api.ghostgains.app/assets](https://api.ghostgains.app/assets)
# 결과: 403 Forbidden (Cloudflare 화면 리턴)

헤더 포함 요청 시 (정상 응답):

curl -H "x-auth-key: 설정한_비밀_키_값" [https://api.ghostgains.app/assets](https://api.ghostgains.app/assets)
# 결과: 정상 JSON 데이터 리턴

브라우저에서 헤더 키 없이 접근 (차단 확인)

api.ghostgains.app - Cloudflare WAF 설정 화면

결론

이 방식의 가장 큰 장점은 비용 효율성이다.

WAF가 Edge Network에서 유효하지 않은 요청을 사전에 쳐내주므로, 백엔드 서버(Workers)는 실행조차 되지 않아 비용이 0원이다. 토이 프로젝트나 사이드 프로젝트에서 API를 보호하는 가장 가성비 좋은 방법이라 생각한다.