[I Learned...] 2 - JWT, iOS 사파리 100vh 이슈

JWT

• JWT를 사용할 때 프론트 단에서 토큰을 어디에 저장해야 할지가 고민
  • 인증된 사용자인지 여부를 판별한 후 그에 따른 페이지 접근 권한을 부여하거나, 사용자 정보와 관련한 요청을 할 때 헤더에 토큰을 담아 서버에 전달해야 하는 상황... 등 클라이언트 사이드에서 토큰이 필요한 때가 있기 때문
  • 당장에 돌아가도록 구현하는 것보다도 중요한 것은 보안 관련 이슈🔐
• 보통 두 가지 방법을 많이 쓴다고 한다.
  • web storage (local storage, session storage)
    
    • local storage - 사용자가 직접 삭제하지 않는 이상 저장 정보가 계속 남아있음.
    • session storage - 브라우저를 닫는 경우 저장 정보가 사라짐.
  • cookies
• 많이 쓴다고 해서 그게 곧 안전하다는 뜻은 아니며, 정도의 차이는 있을지 몰라도 두 방식 모두 XSS 공격과 CSRF 공격에 대한 취약점이 있을 수 밖에 없다. 특히 local storage는 자바스크립트로 접근하는 것이 굉장히 쉬워서 XSS 공격에 더더욱 취약하다고 한다.
• 만료기간이 짧은 access token와 달리 refresh token의 경우에는 탈취될 경우에 대한 리스크가 크다. 때문에 애초에 refresh token을 클라이언트 사이드에서 저장하지 않고 DB 저장하는 방식을 사용하기도 한다는데... (참고) 서버 쪽에서 이미 클라이언트 사이드로 refresh token을 response data로 넘겨주는 상황이라면 대안이 될 수 없을 것 같다.
• "은탄환"은 없겠지만 현재 주어진 상황에서는 refresh token 저장 시 secure, Http-Only cookies를 사용하는 방법이 가장 나은 방법인 듯 하다. 실제로 잘 구현하는 것이 관건이겠지만 ... 여기에 더해서 access token의 경우 local storage에 저장하되, 만료 시간을 굉장히 짧게 설정하면 탈취에 대한 리스크를 좀 더 줄일 수 있다는 의견도 있다.
• 당장 구현은 해놨으나 안전성 보완하기 위해 위 방법 적용해서 수정해야겠다.

 

iOS 사파리 100vh 이슈

• 모바일에서 마주치는 버그들은 ... 개발자 도구를 마음껏 확인할 수가 없으니 디버깅하기가 너무나 힘든 것 같다...
• 이런 방법을 사용해서 윈도우 PC에서 아이폰 safari의 개발자 도구를 볼 수 있다고도 하는데.. 나중에 정말 원인을 모르겠는 버그를 마주치면 한번 시도해 볼만 한 방법인 것 같다...  근데 어쩌면 그냥 맥북을 사서 보는 게 더 빠를지도 모르겠다...
• 무튼, 개발자 도구에서 모바일 뷰포트 설정해놓고 테스트할 때는 이상 없는데 실제 아이폰 기기에서는 레이아웃이 망가지는 문제가 있었다. 페이지의 height를 100vh로 설정해놓고, PC에서 개발자 도구 상의 모바일 뷰포트로 확인했을 때는 원하는대로 높이가 뷰포트 높이만큼 딱 맞게 보여졌는데, 실제 모바일에서는 뭣이 문제인지 페이지 높이가 뭔가 뷰포트보다 더 길이가 긴 느낌이었다.
• 아니, 솔직히 첨에는 길이가 더 긴지도 몰랐다. 그냥 페이지 전체적인 레이아웃이 위에서부터 아래로 조금씩 밀려나있어서 처음에는 position 속성 값 문제인 줄 알았다. 이것저것 수정해봐도 아무런 변화가 없었고, 절망스러운 상황이었지만 계속 보다보니 밀려나있는 정도가 사파리 주소창과 하단 메뉴의 높이만큼 밀려나있는 눈치라 혹시나하고 100vh 이슈에 대해 구글링을 해봤고 다행히도 해당 이슈 원인과 해결 방법을 아래 포스팅에서 찾아내어 해결할 수 있었다. (아직도 너무나 감사하고.. 이분들 아니었으면 버그의 원인을 알지 못해 눈물로 며칠 밤을 지새웠을 것이다...)
  • https://frontdev.tistory.com/entry/height-100vh-ios-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-webkit-fill-available
  • https://injeblog.tistory.com/110

height 100vh ios 이슈 해결방법 -webkit-fill-available

iOS 사파리 100vh 문제 해결법

height: 100vh;

/* iOS only */
@supports (-webkit-touch-callout: none) {
	height: -webkit-fill-available;
}

• 참고로 위의 @supports 규칙은 CSS @규칙 중 하나로, 인수로 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공한다고 한다. 이를 기능 쿼리(feature query)라고 한다. (MDN)