쿠키 OR LocalStorage?

슈크림·2023년 2월 2일
2

웹에서 인증 중 식별자 데이터를 어떤 스토리지에 담아야 할까?

우선 백앤드에서 프론트로 토큰을 보내줄 때는 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

참고 https://stackoverflow.com/questions/71473078/how-do-i-pass-the-jwt-from-the-server-to-the-client-in-a-an-http-header


중요한건 어디에 저장하는지가 중요!

문서에서는 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에서는 좋은 선택지 같다.

profile
프론트엔드 개발자입니다.

0개의 댓글