웹 개발에서 인증 방식으로 httpOnly + secure 옵션이 적용된 쿠키 기반 인증을 사용하는 경우, 로컬 개발 환경과 실제 배포 환경에서 작동 방식이 달라질 수 있다.
쿠키 옵션 요약
- httpOnly: 자바스크립트에서 쿠키 접근을 막음 (XSS 방지용)
- secure: HTTPS 환경에서만 쿠키가 전송됨
- SameSite: 크로스 사이트 요청에서 쿠키 전송 여부를 설정 (Lax, Strict, None)
개발 환경(localhost)에서의 주의점
1. secure 쿠키는 HTTP 환경에선 전송되지 않는다
- secure: true로 설정된 쿠키는 HTTPS 요청에서만 브라우저가 전송함.
- 개발 환경 (localhost, http://)에서는 쿠키가 아예 안 붙는다.
- 로컬 개발 시엔 secure: false로 설정하거나, HTTPS 개발 환경을 구축해야 함.
2. 도메인이 다르면 브라우저가 쿠키를 공유하지 않는다
브라우저는 도메인이 다르면 쿠키를 공유하지 않음.
즉, 프론트와 백엔드의 도메인이 서로 다르면 쿠키를 보내지 않게 된다.
- 프론트엔드: http://localhost:3000
- 백엔드 API: http://localhost:8080
이처럼 포트만 다른 localhost라 해도 도메인이 다르다고 판단함.
해결 방법
- CORS 설정 시 credentials: true 추가
- 프론트에서도 fetch 혹은 axios에 withCredentials: true 명시
- 서버에서 Access-Control-Allow-Credentials: true와 Access-Control-Allow-Origin을 프론트 주소로 명시
문제 상황
쿠키 기반 인증(특히 httpOnly + secure 쿠키)을 사용할 때는 프론트-백엔드 주소를 환경에 맞게 맞춰주는 게 필수다.
그러므로 로컬에서 작업할 때 일일이 백엔드에서 주소를 환경에 맞게 바꾸는 불편함이 있다. 어떻게 해결할까?
기록하자