Playwright 라이브러리를 사용하여 E2E를 진행하던 도중 겪은 트러블 슈팅입니다.
서론
Playwright를 통해 Webkit, FireFox, Chromium을 E2E를 진행하던 도중 webkit에서 이슈가 발생했다.
실제 API 응답으로 로그인 후 HttpOnly 쿠키로 설정한 쿠키를 응답 헤더로부터 받게 되는데, 이상하게 webkit 환경에서만 해당 쿠키를 브라우저가 관리(저장)하지 않는 것이었다.
혹시 Playwright가 문제인가 싶어서 사파리 브라우저로 직접 테스트 해봤는데, 결과는 마찬가지로 쿠키를 사파리가 관리하지 않았다.
원인
기본적으로 쿠키의 secure 옵션을 활성화 하면, https 프로토콜을 통한 통신에서만 자동 전송 및 관리한다.
chromium과 firefox는 secure 옵션이 켜져있음에도 해당 옵션을 무시해준다.
하지만, webkit은 아니었다. webkit은 localhost 환경이든 아니든 secure 옵션이 켜져있으면 https 프로토콜로만 쿠키를 자동 전송해주는 것이었다.
추가로, next로 만든 프로젝트에서 npm run build 이후 npm run start로 실행될 경우 development 환경이 아니라, production 모드로 process.env.NODE_ENV가 설정되기 때문에 쿠키를 production 환경에서만 secure 설정을 해놨더라도 build start를 하면 로컬임에도 프로덕션 환경으로 인식된다.
해결
쿠키를 설정하는 로직에서 production 모드일 때에만 secure를 부여해줬는데, 이것이 원인이었다.
로컬에서 실행되는 환경과 배포 환경을 production으로 분리하기엔 어려움이 있어 어떻게 할지 고민하다가 환경 변수(DOMAIN으로 명명)를 하나 더 이용하였다.
response.cookies.set('accessToken', apiResponse.data.accessToken, {
httpOnly: true,
sameSite: 'lax',
secure: process.env.DOMAIN === process.env.NEXT_PUBLIC_PRODUCTION_DOMAIN,
path: '/',
expires: accessTokenExp || undefined,
});vercel에는 DOMAIN이란 환경 변수에 실제 배포 사이트 주소로 등록해놨고, 로컬 env에는 http:localhost:3000으로 등록해놨다.
쿠키 설정 로직을 수정하니 정상적으로 webkit 환경에서도 쿠키를 송수신할 수 있게 되었다.
