FLO CMS와 FLO MCP를 신버전으로 옮기면서, 앞에 nginx를 두고 path와 menu에 따라 legacy와 신버전을 같이 내렸다. 둘은 같은 parent domain 아래에 있었고, 그 cookie를 양쪽 script가 같이 읽었다. domain은 실제 이름 대신 example.com으로 적는다.
문제 파악
파트너사 쪽 불편을 줄이려고 옛 버전과 신버전을 같이 제공했다. 그 기간은 약 1년이었다. 신버전은 menu가 끝날 때마다 그 menu부터 넘겼다.
legacy는 Vue2 SPA instance였고, 신버전은 Vue3 SPA instance였다. 이 구성은 FLO CMS와 FLO MCP에서 썼다.
문제 정의
이건 동시 운영의 cookie 공유 문제였다. nginx가 path와 menu마다 Vue2와 Vue3 instance로 나누고, 같은 parent domain의 cookie를 양쪽 script가 읽어 Axios 요청 header에 넣어야 했다.
문제 해결
nginx는 path와 menu마다 Vue2 SPA instance 또는 Vue3 SPA instance로 요청을 보냈다.
이 기간의 인증 session 값은 parent domain에 묶인 cookie에 두었다. Domain=.example.com 이라 같은 parent domain의 양쪽 화면이 그 cookie를 읽을 수 있었다. Vue2와 Vue3가 둘 다 script로 그 cookie를 읽고, token을 Axios 요청 header에 직접 붙였다. 그래서 옛 페이지와 새 페이지를 같이 둘 수 있었다.
login은 신버전에서만 했다. logout하면 공유 cookie를 지웠고, 그러면 양쪽이 함께 풀렸다.
Drawing diagram
개선할 점
동시 운영 동안 token cookie는 JS에서 읽을 수 있었다. 그 약 1년 동안 token은 XSS에 노출됐다. 다음에 같은 구성을 하면, JS가 읽는 cookie가 남는 그 기간을 먼저 보겠다.
참고
- MDN, Set-Cookie (Domain): https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie