[트러블] 쿠키 인식 오류. (다른 도메인 쿠키 접근 불가)

문제발견

로컬환경에서는 react-cookie를 통해 해당 쿠키 값을 가져올 수 있었다.

 

배포하니 쿠키를 가져올 수 없다.

 

 

 

 

원인분석

 

다른 도메인의 쿠키에는 접근할 수 없다.

이 사실을 깨닫기까지 너무 오래 걸렸다.

 

 

현재 프론트엔드는 github.io 도메인에 배포가 되어있다.

결과적으로 wooin-dev.github.io에서는 foohaha-~ 도메인인 쿠키에 접근할 수 없다.

 

 

직접 확인해보기

다른 도메인의 쿠키만 있는 경우

 

console.log( ) 해보아도 나오지 않는다.

 

 

도메인이 섞여있는 경우

카카오 영입 사이트의 쿠키목록

 

careers.kakao.com 사이트에서 쿠키 접근하기

 

careers.kakao.com에서 서브도메인인 careers를 제외하고 kakao.com의 도메인인 쿠키에는 접근이 가능했다.

+ HttpOnly = true; 인 쿠키에도 접근이 불가능했다.

 

 => HttpOnly가 체크되어있지 않고, 같은 도메인인 쿠키 12개만 정확히 불러와졌다.

 

 

배운 점

 

• 클라이언트와 자바스크립트가 어떻게 동작하는지 디테일을 알지 못해서 빠르게 문제해결을 하지 못 했다.
  순수 JS의 공부의 필요성도 조금 느끼므로 백엔드 공부를 어느정도 하고 나서 공부해봄직하다.
• chatGPT에서도 백엔드 서버 도메인을 보니 같은 도메인을 사용하는 것으로 확인했다.
  아무래도 이게 깔끔해보이는데.. 하나 실수했다.
• 써드파티쿠키라고 불러지는 개념은 광고배너를 뿌리는 도메인에서 쿠키를 발급하여, site추적을 가능하게 하기도 한다고 하더라. (https://ko.javascript.info/cookie#ref-335 부록 참고)
• 크롬에서 크로스 사이트에서 가져온 쿠키를 이후 버젼에서는 막힐 것이라고 알려주고 있다. 깔끔한 방식을 어떻게 해오는지 세미나나 컨퍼런스 자료같은 거라도 통해서 현업에서의 방식이 궁금하다.

크로스 사이트에서 쿠키를 가져오니, 이후엔 막힐거라고 경고해주는 크롬.

 

공부할 점

 

로그인상태인 것을 인식하기 위해 쿠키를 불러왔다.

지금 백엔드 서버를 다른 도메인으로 두어서 다른 방법이 필요해 보인다.

 

도메인을 떠나서도 로그인 상태를 단순히 recoil과 같은 전역 변수에다가 관리를 해야할지.

하지만 전역관리 변수가 쿠키의 상태에 의존하여 관리되어야 할지도 의문이다.

 

1. 쿠키가 삭제되었는데 로그인상태로 인식될 시.

2. 쿠키는 있는데 로그인상태로 인식되지 않을 때.

 

이 두케이스만 생각해봐도 보완할 점이 많아 보인다.

현업에서는 어떻게 하는 지 너무 궁금하다.

 

이와 관련된 부분은 구글링을 해봐도 시원한 답이 나오질 않는다.

 

 

참고 링크

 

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

https://ko.javascript.info/cookie#ref-335

https://developer.chrome.com/docs/privacy-sandbox/third-party-cookie-phase-out/?utm_source=devtools