[Next.js] middleware가 쿠키를 못 읽는 이유? Secure와 HTTPS의 함정

#Next.js #pN룰 #디자인시스템 #Middleware #HTTPS #MUI #BDS #Playwright #CSRF

 

 

✅ BDS + MUI 마이그레이션 중 겪은 middleware 디버깅 & 코드리뷰 회고

현재 프로젝트는 Buzzle Design System (BDS)과 MUI를 기반으로 한 디자인 시스템 마이그레이션이 최우선 과제로 진행 중이다.
이와 함께 접근 제어를 위한 middleware 설정과 인증 구조 개선이 병렬로 진행되고 있다.
이번 주에는 matcher 설정 누락, Secure 쿠키 인식 불가, 그리고 500 에러까지 겪으며 학습 포인트가 많았던 한 주였다.

---

✅ 우선순위: 디자인 시스템 마이그레이션

• React 기반 UI 컴포넌트를 BDS + MUI 조합으로 정리 중
• 컴포넌트 일관성 확보 및 스타일 통합이 목표
• 기존 페이지는 단계적으로 마이그레이션 예정

✅ 코드리뷰: 뱅크샐러드 pN 룰 기반 피드백

이번 주간 코드리뷰에서는 뱅크샐러드의 pN 룰을 적용하여 중요도 기반 피드백을 시도했다.
특히 middleware matcher 누락 이슈는 p2 (기능 오류 가능성 있음)로 분류되어 빠르게 리뷰되고 수정되었다.

✅ 문제 1: /mypage 경로 접근 시 middleware 미작동

• middleware.ts는 구현되어 있었지만, export const config.matcher가 누락됨
• matcher: '/mypage/:path*'를 추가하며 적용 시도
• 하지만 현재는 middleware 적용 이후 500 에러가 발생 중
• 원인은 추후 HTTPS 환경 안정화 이후 디버깅 예정

✅ 문제 2: Secure 쿠키 → HTTP 환경에서 전송되지 않음

로그인 시 서버가 발급한 Authentication, Refresh 쿠키에는 Secure 속성이 포함되어 있었고,
현재 개발환경은 http://localhost였기 때문에, 브라우저가 해당 쿠키를 서버로 전송하지 않음.

이로 인해 middleware에서는 쿠키가 undefined로 처리되었으며,
Secure 쿠키는 HTTPS 환경에서만 유효하다는 것을 직접 확인했다.

✅ 대응 중인 항목

1. middleware matcher 설정 완료 → 현재 500 에러 상황
2. HTTPS 로컬 개발환경 구축 예정 (ex. mkcert)
3. 쿠키 속성 검토: Secure, SameSite=Lax, Path=/ 적용 확인

다음 주에는 mkcert 기반 HTTPS dev 환경을 적용하고, middleware 내부 에러 원인까지 디버깅할 계획이다.

---

✅ 실사용자 시나리오 기반 E2E 테스트 자동화

디자인 시스템 마이그레이션과 함께, Playwright 기반 사용자 여정 테스트 룰을 도입했다.
기존 MCP 룰 기반 자동화에서는 MUI, BDS 컴포넌트를 제대로 인식하지 못하는 문제가 있었기 때문에,
직접 커스터마이징한 test-playwright.mdc 룰 파일을 통해 접근성, 반응형, 성능을 중심으로 자동화 테스트를 구축했다.

• ARIA 속성, Tab 네비게이션 등 접근성 요소 검증
• localStorage 기반 애니메이션 스킵 처리
• 반응형 대응 (뷰포트 변경, 모바일 메뉴 클릭 등)
• 로그인 → 마이페이지 접근 → 세션 유지 플로우 검증

✅ 인증 로직 리팩토링 방향 정립: useAuth 훅 설계

기존에는 userModel로 인증 상태를 관리하고 있었지만, HttpOnly + Secure 쿠키 기반 인증 구조에서는 클라이언트에서 토큰을 직접 제어할 수 없기 때문에,
향후 적용을 목표로 useAuth 훅을 설계해두었다. 현재는 마이그레이션이 우선 과제이기 때문에, 실제 적용은 이후 단계에서 진행될 예정이다.

• 쿠키 존재 여부로 인증 상태를 1차 판단
• userModel을 대체할 수 있는 내부 상태 기반 인증 흐름 설계
• 보안 강화를 위한 localStorage 제거 구조 도입 예정

• 쿠키 존재 여부로 인증 상태 1차 판단
• refreshToken 없이 accessToken 만료 후 재로그인 유도
• userModel 제거 → 내부 상태 기반 인증 처리

✅ CSRF 대응: Axios 인터셉터 + Retry 로직 구현

CSRF 방어를 위해 X-XSRF-TOKEN을 요청 헤더에 자동으로 추가하고,
403 에러가 발생할 경우, /csrf-token API를 통해 토큰을 재요청한 후 원래 요청을 자동 재시도하는 구조를 도입했다.

• retryCount, isRetrying 플래그로 재시도 조건 제어
• Axios 인터셉터를 통해 POST/PUT/DELETE 요청에만 헤더 삽입
• 403: "Missing csrf secret" 오류 발생 시 자동 재시도 처리

---

그래서 오늘의 TIL(Today I Learned) 학습 키워드

✨ 디자인 시스템 마이그레이션

✨ pN 기반 코드리뷰

✨ Secure 쿠키와 HTTPS 환경

✨ middleware matcher 설정

✨ Playwright 사용자 여정 테스트

✨ useAuth 훅 기반 인증 상태 관리

✨ Axios 인터셉터와 CSRF 자동화

--- AI로 작성한 실험적인 글입니다. ---