쿠키에 관련해서 질문드립니다.

Question

안녕하세요. 강의를 듣고 여러 프로젝트를 하면서 개념이 정리가 잘되지 않아서 이렇게 질문 드립니다.  실제로 일을 하다보면 여러 쿠키에 대한 여러 설정값이 나오더라구요. withcredentials, sameSite, secure, httponly 등등... 첫 번째로 서로 다른 도메인에서 쿠키를 주고 받으려면 클라, 서버 둘 다 withcredential = true 로 설정해야 된다는 것을 알고 있습니다.  만약 클라가 aaa.com이고 api요청을 api.aaa.com을 가지고 있는 서버에 준다고 하면  withcredential에 대한 설정을 어떻게 해야 하는 건지 궁금합니다.  aaa.com과 api.aaa.com은 sameSite이고 서로 다른 origin 인것까지는 이해했습니다.  인터넷에 여러 글을 찾아봐도 어떤 글은 서로 다른 도메인간의 쿠키 전달이라고 명시되어 있는 반면 아떤 글은 서로 다른 origin 간의 쿠키 전달 옵션이라고 되어 있어 혼란스럽습니다. 결론적으로 1. 도메인과 서브 도메인의 도메인 일치 여부 2. withcredential 옵션의 기준 -> 서로 다른 도메인인지, 서로 다른 origin인지 3. sameSite 가 같은 도메인을 의미하는지 그래서 클라: aaa.com 서버: api.aaa.com  환경에서 withCredentials 설정을 해줘야하는지 궁금합니다. 답변해주시면 감사합니다.

김영한 · Answer

안녕하세요. hoilm7님 쿠키는 강의에서 설명드린 것 처럼 다양한 범위를 가집니다. aaa.com으로 쿠키 도메인을 설정하면 api.aaa.com에서도 같은 쿠키를 접근할 수 있습니다. 일반적으로 웹 브라우저에서 링크를 누르거나 폼을 서밋하는 등의 행위를 할 때는 이렇게 쿠키를 자유롭게 사용할 수 있습니다. 그런데 문제는 자바스크립트를 사용해서 XHR, fetch 등의 기능을 사용할 때 발생합니다. 이 경우 origin이 같은 경우에만 호출할 수 있도록 동작하기 때문에 aaa.com에서 api.aaa.com으로 자바스크립트 XHR을 호출하면 쿠키가 넘어가지 않습니다. 따라서 이때는 클라이언트에 withCredential 옵션을 넣어주어야 하고 서버에서도 응답할 때 다음 두 값을 포함해서 응답해야 합니다. Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://aaa.com 더 자세한 내용은 다음 링크를 확인해주세요. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 감사합니다.