문제발생
요즘 슬랙클론 프로젝트에 프론트엔드 팀원으로 참여하고 있다.
프론트는 React.js 백엔드는 Node.js와 Express로 개발하는 중인데,
서버에서 쿠키를 정상적으로 보내지만(postman으로 확인), 크롬브라우저에는 쿠키가 저장되지 않는 경우가 발생했다.
원인확인
크롬 개발자도구의 Network 메뉴 - 해당 하는 네트워크 클릭 - 쿠키 메뉴 클릭
그리고 느낌표(!) 표시 있는 부분에 마우스를 올려서 문제를 확인할 수 있다.
(예시로 정상적인 쿠키를 캡쳐해온 것이라 에러가 표시되어있지 않지만, 쿠키에 문제가 있다면 위 사진 속 표 내부에 에러가 표시될 것이다.)
서버에서 보낸 쿠키가 크롬브라우저에 정상적으로 등록되지 않았던 이유는,
서버에서 쿠키에 세팅한 sameSite, secure 속성이 chrome의 정책에 맞지 않았기 때문이다.
sameSite란 웹 애플리케이션에서 CSRF(교차 사이트 요청 위조)공격을 방지하기 위해 HTTP 쿠키에서 설정할 수 있는 속성이다.
지정할 수 있는 값으로는 Lax,Strict,None 이 있으며, 기본 값은 Lax 이다.
Lax
크롬 브라우저에서 기본값으로 설정된 값.
보통 Strict 처럼 보수적이지만, 몇가지 예외(form을 통한 get 등) 에 대해서는 허용하는 정책이다
Strict
가장 보수적인 정책. Strict로 설정된 쿠키는 크로스 사이트 요청에는 항상 전송함
None
가장 개방적인 정책. 하지만 보안적으로 문제가 발생할 수 있음
해결
프로젝트에서는 post 요청을 통해 쿠키를 받기 때문에 sameSite 속성에 None을 사용하는데, 이런 경우 secure을 true로 설정하고, https로 통신해야한다.
프론트엔드와 백엔드 모두 인증서를 발급받고, https로 통신하여 문제를 해결했다.
참고
