[Frontend] LocalStorage & SessionStorage & Cookie

LocalStorage와 SessionStorage모두 Cookie의 단점을 보완하기 위해 html5부터 적용된 기술

LocalStorage와 SessionStorage의 경우 key:value 단위로 저장, 데이터가 클라이언트에 존재할 뿐 서버로 송되지 않음

LocalStorage

• 반영구적으로 보존(브라우저를 종료해도 데이터가 보관)
• LocalStorage에 토큰을 저장할 때는 로그아웃이 토큰을 지워줘야

SessionStorage

• 브라우저 탭을 닫을 경우 사라짐

Cookie

• 브라우저 요청이 있을 경우 자동으로 서버에 전송
• 만료일자가 존재

 

사용예시)

 - 팝업 창 : Cookie

 - 자동 로그인 : LocalStorage

 - 입력 폼 정보 :  SessionStorage

 - 비로그인 장바구니 :  SessionStorage

 

* JWT 토큰은 어디에 저장할까?

• XSS는 브라우저(사용자)에 정보를 탈취, CSRF는 정상적인 사용자인척 하여 서버에 API를 보냄

1. LocalStorage에 저장
   • LocalStorage는 javascript 내 글로벌 변수로 읽고 쓰기 가능
   • XSS 공격에 취약, 공각자가 LocalStorage에 접근하는 코드로 토큰내용을 탈취 가능
   • CSRF 공격에 안전, 쿠키는 자동으로 request에 담기지만 local
2. httpOnly Cookie에 저장
   • httpOnly Cookie는 일반 Cookie와 다르게 javascript 내에서 접근 불가
   • XSS 공격에 비교적 안전, httpOnly 옵션을 사용하기에 Js에서 쿠키에 접근 자체가 불가능
     그러나 req
3. best option
   refresh token을 활용
   refresh token은 httpOnly 쿠키에 저장, acces token은 LocalStorage에 저
   

   

   • 로그인시 Access Token과 Refresh Token을 발급, 이 때 회원 DB에 Refresh Token을 저장해 둠
   • 사용자는 Refresh Token을 저장소(웹스토리지, 쿠키)에 저장한 뒤, Access Token을 헤더에 실어 요청을 보냄
   • Access Token이 만료된 경우 이전과 같이 Access Token을 헤더에 실어서 요청을 보내면 서버는 Access Token이 만료됨을 확인하고 권한없을 신호로 보냄
   • 사용자가 Access Token 재발급을 위해 Access Token과 Refresh Token을 서버로 보냄
   • 서버는 Access Token이 조작되지 않았는지 확인한 후, 사용자로받은 Refresh Token과 DB에 저장된 Refresh Token을 비교 후 새로운 Access Token을 발급해줌