웹에서 인증 중 식별자 데이터를 어떤 스토리지에 담아야 할까?
우선 백앤드에서 프론트로 토큰을 보내줄 때는 req.header에 주던지 req.body에 주던지 상관은 없다. (단 백엔드에서 프론트로 req.header로 보내줄 때 토큰을 cookie로 보내줄 때 set-cookie에 들어있는 헤더를 보고 브라우저가 자동으로 cookie를 저장 하여 어떤 요청을 보내도 cookie에 있는 토큰을 보낼 수 있다.. 그 결과 개발자도구에서 application탭에서 볼 수 있다.)
참고 https://velog.io/@nathan29849/JWT%EB%A5%BC-Header%EC%97%90-Body%EC%97%90
중요한건 어디에 저장하는지가 중요!
문서에서는 jwt나 중요한 정보는 localStorage에 저장하지 말라고 권한다.
-
Do not store session identifiers in local storage as the data is always accessible by JavaScript. Cookies can mitigate this risk using the httpOnly flag.
-
Pay extra attention to "localStorage.getItem" and "setItem" calls implemented in HTML5 page. It helps in detecting when developers build solutions that put sensitive information in local storage, which can be a severe risk if authentication or authorization to that data is incorrectly assumed.
참고 https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html
cookie는 자바스크립트 접근이 불가하게 할 수 있지만 로컬스토리지는 탈취당하기가 쉽다!
웹은 웬만하면 쿠키를 사용하는 것이 나을 것 같다!
그렇다면 React Native와 같은 모바일 앱은?
모바일 앱은 쿠키나 세션스토리지가 없다.
따라서 로컬스토리지 혹은 리덕스에 엑세스토큰 리프레시토큰을 나눠서 저장해야 한다.
리액트네이티브에서는 React Native Encrypted Storage라는 좋은 LocalStorage라이브러리가 있다!
참고 https://www.npmjs.com/package/react-native-encrypted-storage
웹의 localStorage와 달리 Encrypted는 한번 더 암호화 되어서 저장할 수 있다.
그래서 React native에서는 좋은 선택지 같다.
