2026. 4. 1. 16:02ㆍ문제해결
개요
이 글에서는 개인 프로젝트 invest72에서 웹서버에 있는 자바스크립트가 웹 애플리케이션 서버가 발급한 XSRF-TOKEN 쿠키 값을 읽지 못하는 에러를 해결하는 경험을 소개합니다. 문제 해결 경험에서는 문제가 발생한 배경, 문제 원인, 해결 방법에 대해서 소개합니다.
배경
현재 배포중인 웹서버와 웹 애플리케이션 상태는 다음과 같습니다.
- 웹서버(React) : `https://invest72.web.app`
- 웹 애플리케이션 서버(Spring) : `https://invest72-api.duckdns.org`
- CSRF 공격을 막기 위해서 웹 애플리케이션 서버에서 CSRF 토큰을 발급합니다. 이 토큰은 XSRF-TOKEN 쿠키에 값을 담아서 응답합니다.
- XSRF-TOKEN 쿠키의 속성은 `HttpOnly=false`, `Secure`, `SameSite=None`, `domain=invest72-api.duckdns.org`, `Path=/` 입니다.
- 클라이언트에서 HTTP 요청시 XSRF-TOKEN 쿠키 값을 읽어서 X-XSRF-TOKEN 헤더에 담아 전송하는 것으로 구현되어 있습니다.
- 클라이언트가 HTTP 요청시 Axios 라이브러리를 사용합니다.
문제가 발생한 배경은 클라이언트(웹서버)가 웹 애플리케이션 서버에 로그인을 요청을 수행하고 정상적으로 쿠키 방식으로 세션 ID와 XSRF-TOKEN 쿠키를 저장할 수 있었습니다. 그러나 GET 메서드를 포함한 POST, PUT과 같은 HTTP 요청시 X-XSRF-TOKEN 헤더에 XSRF-TOKEN 쿠키의 값을 담지 않고 전송하고 있습니다. 결국 CSRF 토큰 값을 검증하지 못하고 403 Forbidden 응답을 받게 됩니다. 그림으로 표현하면 다음과 같습니다.
자바스크립트 디버깅 결과 `document.cookie` 호출시 빈 공백이 출력된 것을 확인하였습니다. 그러나 쿠키 저장소를 보면 정상적으로 JSESSIONID와 XSRF-TOKEN 쿠키가 저장된 것을 확인할 수 있었습니다.
문제 원인
문제가 발생한 원인은 배포환경에서는 자바스크립트가 실행되는 페이지의 도메인(invest72.web.app)과 발급 받은 쿠키의 도메인(invest72-api.duckdns.org)이 일치하지 않으면 쿠키값에 접근하지 못하기 때문입니다. 해당 문제 원인을 파악하는데 시간이 걸린 이유는 `httpOnly=false` 옵션을 설정하면 크로스 도메인 상태에서도 쿠키값을 읽을 수 있다고 착각하였습니다. 로컬 개발 환경에서는 웹 서버와 웹 애플리케이션 서버 모두 도메인이 `localhost`였기 때문에 정상적으로 X-XSRF-TOKEN 헤더에 값을 전달할 수 있었고 배포 환경에서는 데이터베이스의 데이터가 이미 존재했기 때문에 별도에 금융 상품 수정 테스트를 하지 않아서, 로컬 개발 환경에서 X-XSRF-TOKEN 헤더에 값을 전달 성공한 것을 배포 환경에서 성공했다고 혼동하였습니다.
기존까지 알고 있었던 생각은 쿠키에 `httpOnly=false` 속성을 설정하면 크로스 도메인 상태여도 쿠키의 값을 읽을 수 있다고 생각하였습니다. 이 생각이 맞는지 확인하기 위해서 MDN 문서 등을 탐색하였습니다.
MDN 문서의 Cookie 관련된 설명을 보면 다음과 같이 설명되어 있습니다. 다음 설명을 보면 쿠키의 도메인이 자바스크립트의 출처(origin)의 도메인과 일치해야 한다고 설명하고 있습니다. 그리고 외부 도메인 쿠키에 접근하는 것은 무시된다고 설명하고 있습니다. 다음 설명을 통해서 크로스 도메인 상태에서 자바스크립트가 다른 도메인의 쿠키 값을 읽는 것은 불가능하다는 것을 알게 되었습니다.
해결 방법
위 도메인 불일치 문제를 해결하기 위해서 `invest72.site` 라는 도메인을 가비아 플랫폼을 통해서 구매하였고, 웹서버는 `www.invest72.site`, 웹 애플리케이션은 `api.invest72.site`라는 서브 도메인으로 설정하여 배포하였습니다.
또한 서브 도메인 기반으로 변경되었기 때문에 XSRF-TOKEN 쿠키의 속성중 `SameSite=None` 속성을 `SameSite=Lax` 속성으로 변경하였습니다. 문제를 해결하고 실행 과정을 그림으로 표현하면 다음과 같습니다.
정리
- 배포된 웹서버와 웹 애플리케이션 서버가 도메인이 서로 다른 크로스-도메인 상태에서는 자바스크립트가 다른 도메인을 가진 쿠키에 접근이 불가능합니다.
- `httpOnly=false` 속성은 도메인(서브 도메인 포함)이 서로 매칭되는 상태에서 쿠키의 값을 읽을 수 있는 것이지 도메인이 다르다면 쿠키값에 접근할 수 없다.
References
'문제해결' 카테고리의 다른 글
| Spring AOP 로깅 메모리 누수 문제 해결 (0) | 2026.01.20 |
|---|---|
| 프로메테우스(Prometheus) 컨테이너 배포시 "data/queries.active" 파일 작성 실패 문제 해결 (0) | 2026.01.20 |
| VisualVM Profiler 사용할 때 특정 Profile Class가 표시되지 않는 문제 해결 (0) | 2025.12.15 |
| Github Action, act 로컬 테스트 실행시 SSH Private Key 저장 문제 해결 (0) | 2025.12.05 |
| Gradle 빌드 수행시 JDK 버전과 Lombok 라이브러리 버전 충돌로 인한 빌드 실패 문제 해결 (0) | 2025.11.29 |