문제 상황 배경

우리 회사의 플랫폼은 cookie로 user의 정보들을 저장하며, 읽어오고 있다.
코드로 예를 들어보자면,

1. 유저의 닉네임을 쿠키에 저장시킬 시, setCookie('user-name', ${nickname})
2. 유저의 닉네임을 불러올 시, getCookie('user-name')

이런 식으로 사용하고 있다.

FE단에서는 특정 페이지에, 유저가 로그인을 한 상태인지 판별하는 코드가 getCookie('user-name') 기준으로 되어 있었다.

로그인 페이지에서 cookie 값을 세팅하였으니 특정 페이지에 접속했을 때는 당연히 cookie 값을 기억하고 있으므로,
cookie가 불러와졌을 때는 페이지에 정상적으로 접속이 가능하며,
cookie가 없을 때는 페이지에 접속이 불가하도록 설계되어 있었던 것이다.

BE단에서는 유저의 로그인 토큰(csrf 라고 알고 있다)이 특정 시간 이후로는 만료되어 있도록 설정되어 있다.

즉, 특정 시간이 지난 이후로는 BE단에서는 세션이 끊겨 로그아웃이 되게 만들었으나,
FE단에서의 cookie는 아직 남아있어 로그아웃이 제대로 되지 않는 문제가 있었다.

문제 상황 요약

1. 아이폰을 이용하는 유저들은 사파리 브라우저로 우리 플랫폼을 이용한다.
2. 그리고 사파리 브라우저로, 플랫폼에 로그인을 한 채 그대로 방치시킨다. (가령 사파리 브라우저 앱을 끈다든지, 다른 탭으로 이동한다든지 등...)
3. 특정 시간이 지난 이후에는 로그아웃이 되었을 것이다.
4. 유저들은 로그아웃이 되었으니 로그인 페이지로 접속하여 다시 로그인을 시도한다.
5. 로그인 페이지에서의 유저의 로그인 유무 기준은, 한글로 저장된 getCookie('user-name') 기준으로 되어있다.
6. 폭풍 구글링 결과, 사파리에서는 한글 cookie 값을 불러오지 못한다는 것을 깨달음.
7. 그러므로, 사파리에서 로그아웃된 유저들은 cookie 값이 남아있는 상태이니 로그인이 되어있음으로 판단되어, 로그인 페이지로부터 강제 이탈 당하며 로그인을 할 수 없다.

이 방법은 근본적인 해결 방안이 아니며, 유저가 모든 브라우저에서 로그인 페이지에 접속할 수 있도록 한 의도로 작성하였다.

사파리에서 한글 value로 된 Cookie 불러오기

사파리에서 한글 value로 저장된 cookie를 불러오지 못하고 있다는 문제점도 발견하였다.

그래서 cookie를 세팅해 주고 있는 로그인 페이지에, 유저가 접속한 브라우저를 감지하여, cookie value를 encode 해주었다.

encoding 된 cookie는, 사파리에서 자동으로 decoding 된다.

// 사용중인 브라우저를 체크하는 browserChecker
const browserChecker = window.navigator.userAgent

// 오직 사파리 브라우저를 사용중일 때, 한글로 저장되는 cookie들을 encode 하여 저장
if (browserChecker.includes('Safari') && !browserChecker.includes('Chrome')) {
      setCookie('user-name', encodeURI(`${data.nickname}`), '1')
      setCookie('academy_name', encodeURI(`${data.academy_name}`), '1')
}
// 그 외 브라우저를 사용중일 때, encoding 없이 cookie에 저장
else {
      setCookie('user-name', `${data.nickname}`, '1')
      setCookie('academy_name', `${data.academy_name}`, '1')
}

• 크롬에서 browserChecker를 콘솔 찍어 보았을 때, Chrome과 Safari의 문자열이 같이 찍히고 있었다.

• 사파리에서 browserChecker를 콘솔 찍어 보았을 때, 오로지 Safari 문자열만 찍히고 있었다.

• 따라서 사파리에서 접속하고 있음을 판별하는 로직은 if (browserChecker.includes('Safari') && !browserChecker.includes('Chrome'))로 작성하였다.

• 아래 첨부 파일은 사파리에서 encoding 된 cookie 표현이다.

• 이 encoding 된 cookie는, 사파리에서 별도의 decode 처리 없이도, 자동으로 decoding 해주는 것을 확인하였다.

• 그리하여 한글 깨짐 문제 해결!