백엔드 → 프론트엔드(localhost) 쿠키 전송 문제

🧷 출처

이미지 출처: https://www.devyummi.com/page?id=66934f448a005e7d8f32213a

🔥 문제 상황

이미지 출처: https://www.devyummi.com/page?id=66934f448a005e7d8f32213a

로그인 책임을 백엔드가 맡고 있는 카카오, 구글 소셜 로그인을 구현중이였다.

소셜 로그인 성공 시, 백엔드에서 생성한 jwt 토큰 쿠키가 브라우저(localhost)에 저장되어야 하는데 저장이 되고 있지 않았다.

🏃‍♀️ 첫 번째 시도

• 개발 환경
  • 프론트엔드
    • http://localhost:5173
    • window.location.href = 'http://1.11.111.11:8080/oauth2/authorization/kakao';
      • 소셜 로그인 버튼 클릭 시, 페이지 이동
      • http프로토콜
      • 서버 주소(아이피): 1.11.111.11:8080 (해당 주소는 실제 서버 아이피가 아님)
  • 백엔드
    • 쿠키 설정
      • SameSite = lax
      • secure = false

위 환경에서 테스트 시, 클라이언트 localhost에 jwt 토큰 쿠키가 저장되지 않고 http://1.11.111.11:8080 서버쪽에 쿠키가 저장되었다.

🏃‍♀️ 두 번째 시도

서버와 localhost 도메인이 달라 쿠키가 저장되지 않는다고 생각했다. 백엔드의 쿠키 설정을 수정해보았다.

• 쿠키 설정
  • SameSite = none
  • secure = true

첫 번째 시도와 마찬가지로 서버쪽에 쿠키가 저장되었다. 다음 설정들도 클라이언트쪽으로 쿠키가 전송되지 않았다.

1. 클라이언트 localhost https 적용
2. 백엔드 쿠키 설정 domain:localhost 지정

👀 간단히 쿠키 속성에 대해 알아보자

• domain
  • 쿠키가 전송될 수 있는 도메인을 지정하는 속성
  • domain=test.com으로 설정하면, test.com과 sub.test.com에서도 쿠키가 전송된다.
• secure
  • 쿠키가 https 연결에서만 전송되도록 한다.
• HttpOnly
  • 자바스크립트로 쿠키를 읽거나 수정할 수 없도록 한다.
• SameSite
  • Strict: 오직 같은 사이트에서의 요청에만 전송된다.
  • lax: 같은 사이트에서의 요청 및 Get 요청, 링크 이동 등에는 쿠키가 전송된다. 단, POST, PUT, DELETE 요청은 쿠키가 전송되지 않는다.
  • none: 모든 사이트 간 요청에서 전송된다. 단 secure=true 속성이 설정되야 한다.

🏃‍♀️ 세 번째 시도(성공)

서버 주소를 아이피가 아닌 도메인으로 설정했다. 그 결과 브라우저 localhost에 jwt 토큰 쿠키가 정상적으로 저장되었다.

• 개발 환경
  • 프론트엔드
    • http://localhost:5173
    • window.location.href = 'https://custom-domain.com/oauth2/authorization/kakao';
      • 아이피 주소가 아닌 도메인으로 변경
  • 백엔드
    • 쿠키 설정
      • SameSite = lax
      • secure = true

🤔 첫 번째 시도에서는 왜 쿠키를 전달받지 못했을까?

먼저 localhost는 특수한 도메인으로 간주된다. SameSite가 lax 또는 strict로 설정된 경우, 일부 브라우저 localhost는 서버에서 보내준 쿠키를 저장할 수 있다. 또한, secure=true로 설정되었어도 https가 아닌 http 환경에서 secure 쿠키가 동작할 수 있다. (firefox의 경우 strict로 설정된 경우 쿠키가 저장되지 않았다.)

 

localhost가 보안 정책에서 조금 느슨하다면, 첫 번째 시도에서 쿠키는 localhost에 저장되어야 한다. 하지만 저장되지 않았는데 이 이유를 gpt는 다음과 같이 답했다.(100% 신뢰하지 마세요!)

• 브라우저는 IP 주소와 도메인 이름을 다르게 처리할 수 있습니다.
• IP 주소로 접속했을 때와 정상적인 도메인 이름으로 접속했을 때 브라우저는 쿠키의 SameSite, Secure 속성을 다르게 적용할 수 있습니다.
• 특히, 도메인 이름이 아닌 IP 주소로 접근하면 쿠키가 SameSite=Strict나 SameSite=Lax 설정에서 쿠키 전송이 차단될 가능성이 더 높습니다.
• IP 주소는 브라우저의 보안 모델에서 도메인처럼 신뢰되지 않을 수 있으며, 특히 보안 쿠키 정책이 더 엄격하게 적용될 수 있습니다.

브라우저 정책 상 IP 주소(http://1.11.111.11:8080/oauth2/authorization/kakao)로 접근하여 쿠키 전송이 차단될 걸로 보인다.

 

🤔 두 번째 시도에서는 왜 쿠키를 전달받지 못했을까?

SameSite = None으로 설정하여 모든 사이트간 쿠키가 전송되지만, http 프로토콜을 사용하는 백엔드(http://1.11.111.11:8080)가 secure = true 쿠키 설정이 되어 있어 전송되지 않았다.

 

🧩 케이스 정리

• window.location.href = http://1.11.111.11:8080~~~
  • SameSite = lax, secure = false: 1.11.111.11 서버에 jwt 토큰 쿠키 저장 (localhost로 전송 X)
  • SameSite = none, secure = true: 1.11.111.11 서버에 jwt 토큰 쿠키 저장 (localhost로 전송 X)
• window.location.href = 'https://custom-domain~~~
  • SameSite = lax, secure = false: localhost에 jwt 토큰 쿠키 저장
  • SameSite = lax, secure = true: localhost에 jwt 토큰 쿠키 저장
  • SameSite = none, secure = true: localhost에 jwt 토큰 쿠키 저장