안녕하세요~ 고영이에요.
강화된 쿠키 옵션 트러블 슈팅 경험에 대한 글이에요.
요약
쿠키 옵션에 partitioned를 추가해줘야한다. 단, Express는 추가적인 설정이 필요하다.
const cookieOptions = {
httpOnly: true,
secure: true,
sameSite: 'none',
partitioned: true,
}배경
저는 제 메모장 앱의 로그인을 아래와 같이 설계했어요. 백엔드는 Express.js에요.
- FE 소셜로그인
- FE소셜로그인해서 응답받은 JWT BE로 전송
- BE JWT verify 후 유저 정보 session JWT로 변경
- BE 쿠키 저장 및 FE에 응답 res.cookie( SESSION_KEY, session, cookieOptions )
- FE 로컬스토리지에 session 저장
- FE session 있으면 checkSession api 전송. session 없으면 로그인 페이지로 이동
- FE checkSession 응답 받아서 성공했으면 session 갱신, 실패했으면 session 삭제 및 로그아웃
문제 발생
문제는 갑자기 잘되던 로그인이 안된다는 것이었어요. 로그인 api 헤더를 확인해보니 set-cookie 에서 오류가 발생하고 있었고 찾아보니 크롬의 쿠키 보안 정책이 강화되면서 partitioned 옵션을 넣어줘야하도록 변경된 것이었어요.
저는 BE에서 쿠키를 주입하고 있어서 Express에서 쿠키 옵션을 넣어줬어요. 그런데 Express에서 제공해주는 쿠키옵션에는 partitioned가 없었어요.
엥 그럼 어떻게 하지? 바로 구글링을 했죠. 찾아보니 Express에 추가적인 설정을 해야했어요.
해결
참고: https://github.com/expressjs/express/issues/5275#issuecomment-1851733379
위 이슈를 보고 3가지 설정을 해줬어요.
- package.json resolutions 추가 및 npm install
"resolutions": {
"cookie": "0.6.0"
}- cookie option에 partitioned 추가
저 같은 경우 세가지 옵션을 모두 설정해줘야 쿠키저장이 됐어요.
(secure: true, sameSite: 'none, partitioned: true)
const cookieOption = {
httpOnly: true,
secure: true,
sameSite: 'none',
partitioned: true,
}
res.cookie("cookie-name", "cookie-value", cookieOption)- typescript를 쓰고 있다면 CookieOptions 타입 덮어쓰기
import { CookieOptions } from 'express'
declare module "express" {
export interface CookieOptions {
partitioned?: boolean;
}
}마무리
여기까지 쿠키 partitioned 옵션을 적용해봤어요. 이 이후로는 쿠키 저장이 잘 되더라구요.
한가지 고민되는건 쿠키 정책이 계속 강화되는데 세션관리에 쿠키를 꼭 써야할까? 라는 의문이 들더라구요. 그래서 다음에는 쿠키를 사용하지 않고, BE에서 세션토큰을 생성해서 FE에 전달해주고 로컬스토리지에 저장한 다음, api 요청시에 http 헤더의 Authorization에 넣어서 인증을 하는게 좀더 관리가 쉬울 것 같다는 생각이 들었어요. 이렇게 하면 복잡한 쿠키 설정이 필요없어질 것 같아요.
실제로 로컬스토리지를 사용한 세션토큰을 사용해봤는데 크롬, 사파리 모두 잘 동작하더라구요. SSR을 인증을 위해서 쿠키를 사용해야하는 상황이 아니라면 로컬스토리지와 Authorization 헤더 사용을 적극 추천드립니다. 😊
읽어주셔서 감사해요. 다들 좋은하루 되세요~ 😙
