Feature/#259 아이폰 16 버전 이상 사파리에서 is authenticated 상태 체크

[junghwaYang]

이슈 번호

close #259

변경 사항 요약

• 기존 localStorage.setItem 호출 방식을 react state 상태로 관리하는 것으로 변경하였습니다
• 로그인,로그아웃 로그인 관련 훅 로직도 state로 관리하는 방식으로 변경 되었습니다

원인

ios 16 이하 버전에서는 정상 동작 했던 이유

• iOS 16 이전에는 localStorage.setItem이 동기적으로 작동하며, 데이터가 디스크에 즉시 저장되었습니다.
• React 애플리케이션에서 localStorage를 변경하면, 간접적인 감지 방법으로 UI 업데이트가 가능했습니다
• iOS 16 이전 Safari에서는 localStorage 사용에 대한 보안 정책이 비교적 느슨했습니다.

ios 17 이상 버전에서 정상 동작 하지 않았던 이유

• iOS 16 이후 Safari에서 localStorage.setItem 호출 직후 React 애플리케이션이 localStorage를 다시 읽어올 때, 변경 사항이 반영되지 않을 가능성이 있습니다.

iOS Safari가 localStorage를 내부적으로 비동기적으로 처리하기 시작했거나, 디스크 쓰기 전에 메모리 캐시를 사용하는 방식으로 변경되었을 수 있습니다.(ios 보안 정책 관련)

왜 16 이후 보안 강화를 했을까

• iOS 16 이상에서는 localStorage도 ITP의 범위에 포함되어, 추적 방지를 위해 데이터 접근을 제한하거나, Private Mode에서 데이터를 삭제하도록 변경되었습니다.
• localStorage의 동기적 처리는 브라우저 성능 및 보안 문제를 유발할 수 있습니다. iOS Safari가 내부적으로 데이터를 비동기적으로 처리하도록 변경되었을 가능성이 있습니다.

왜 setAccessToken으로 해결되었는가?

• setAccessToken을 통해 accessToken을 React 상태로 관리하면, 데이터가 메모리 내에서 동기적으로 즉시 변경됩니다.
• 브라우저의 비동기적인 localStorage 동작과 관계없이 상태 업데이트와 UI 렌더링이 즉시 이루어집니다.
• React 상태(useState)는 변경 시 자동으로 의존하는 모든 컴포넌트를 다시 렌더링합니다.
  이전에는 localStorage는 React 상태와 직접적으로 연동되지 않으므로, 수동으로 상태를 동기화해야 했습니다. setAccessToken을 사용함으로써 이 문제가 해결되었습니다.
• setAccessToken 내부에서 localStorage.setItem을 호출하기 때문에 데이터는 여전히 저장됩니다. 그러나 React 상태로 accessToken을 관리하기 때문에, 브라우저의 localStorage 동작 문제와 상관없이 애플리케이션은 안정적으로 동작합니다.

테스트 결과

베이스(develop) 브랜치에 포함되기 위한 코드는 모두 정상적으로 작동이 되어야 합니다.
컴포넌트의 경우 스크린샷을 포함해주세요.

• ios 사파리
• 크롬
• 카카오 웹뷰
• 네이버 웹뷰
• 크롬 웹 브라우저
• 사파리 웹 브라우저

마치며

• 해당 이슈는 ios 보안 정책 변경으로 인한 문제 였음이 확인 되었고, 추후에도 유사한 이슈가 발생 될 경우 ios 보안 정책이 변경되지는않았는지 의심해볼만합니다. FE 개발자라면 기기별 보안 업데이트, 웹뷰 등 항상 최신의 정보를 알고있으면 좋을 듯 합니다.
• 프로젝트를 진행하면서 발생된 이슈 중 새롭게 얻어가는 정보인듯하니 해결에서 그치지않고 개인 블로그나 별도로 해당 이슈를 분석해보셨으면 합니다

[crazyupinc-design]

iOS 보안 정책 변경 때문이었다니... 여러버전에 대응하려면 관련 내용을 잘 이해하고 있어야겠네요.
정보공유감사합니다!!

[haksoo0918]

수고하셨습니다. 👍