일반적으로 웹에서 로그인 API를 연동하기 위해 로그인 정보를 저장할 수단 및 방법이 필요하다.
방법은 여러가지가 있겠지만 두가지를 정리하려한다. 그것은 LocalStorage라는 기능을 사용하거나 Cookie에 저장하는 방식이다.
LocalStorage
로컬스토리지는 영어 번역 그대로 지역 저장소를 말한다. 지역이란 Web Browser를 말한다. 브라우저에 저장하므로서 데이터를 보존시킬 수 있다.
장점은 보존 기간이 무기한이라는 것이다. 한번 저장후 건들지 않는 이상 절대 없어지지 않는다.
단, HTML5에서 지원하기 때문에 최신 Browser를 사용해야한다.
마지막으로 데이터는 5MB까지 한정된다. 근데 5MB이면 충분히 쓰고도 남을 데이터이 때문에 특별히 걱정 하지 않아도 될 부분이다.
Cookies
쿠키는 마찬가지로 저장 데이터이다. 하지만 로컬스토리지와 몇가지 차이점이 있다.
쿠키는 어느 브라우저에서 사용이 가능하다. 그리고 영속적이지 않다. 일정 시간이 지나면 사라지는 데이터이다.
그래서 각 쿠키마다 제거되는 시점이 존재한다.
LocalStorage VS Cookies
쿠키와 로컬스토리지는 데이터를 저장한다는 공통점이 있지만 위와같은 차이점이 있어 사용 용도가 좀 다르다.
쿠키는 일반적으로 Server-Side에서 사용되고, 로컬스토리지는 Client-Side에서 사용된다.
쿠키는 HTTP flag를 통해 전송 되기 때문에 Javascript로 제어할 수 없다. 그리고 결국 서버에서 제공해야하는 정보이기 때문에 Server-side에 속한다.
로컬스토리지는 서버와 전혀 무관하다. 클라이언트(Web)에서 바로 get,set이 가능하기 때문에 Client-Side에 속한다.
하지만 로컬스토리지는 보안상 XSS 공격에 취약할 수 있다. 로컬 스토리지는 웹에 저장되기 때문에 key만 알면 바로 접근이 가능하기 때문에, 로그인 정보와 같은 데이터는 저장하지 않는것이 좋을 것 같다. 로컬 스토리지 이외에 SessionStorage(HTML5부터 지원)도 마찬가지이다.
그럼 쿠키는 어떤가,
쿠키도 마찬가지이다. 하지만 쿠키는 서버의 작업이 필요하다. JWT와 같은 암호화를 시켜서 전달하면 보안상 괜찮은 방식으로 데이터를 받을 수 있다.