배경 🐈

인증을 구현하게 되면서 클라이언트 저장소인 Cookie와 LocalStorage, SessionStorage에 대해 공부하게 되었습니다. 과거에 공부한 내용을 지금 올리게 되었습니다.. 😅

Cookie 란? 🍪

• 도메인 기반 저장소
  • 대체로 도메인을 기반으로 하여 저장소 구분합니다.
  • 일반적이지 않으나 도메인 뿐만 아니라 path에 따라 다르게 구분하여 저장소를 사용할 수도 있습니다.
• 해당 도메인에서 요청 발생 시 무조건 서버로 쿠키 값이 전달
  • 클라이언트가 가지고 있는 저장소이지만 서버의 요청에 따라 쿠키값이 이동되기 때문에 서버의 영역
    • 클라이언트가 제어하는 공간이라기보다 서버가 제어하는 클라이언트 공간이라 생각하는 것이 적합
  • 따라서 서버 측에서 컨트롤 해야 할 데이터의 경우, 쿠키에 담는 것이 적합합니다.
  • 로그인 기능을 사용할 때 LocalStorage가 아닌 Cookie를 사용하는 이유
    • 요즘은 자동 로그인을 많이 쓰기 때문에 Session이나 Jwt 등이 자동으로 서버로 넘어가는 동기화가 중요해졌기 때문에 Cookie를 사용하는 것이 더 유리합니다.

Cookie 종류

• session cookie
  • 만료일이 따로 없고, 브라우저가 닫히면 자동으로 쿠키도 영구 삭제
  • 요즘 대부분의 서비스들은 화면이 꺼졌다가 켜져도 로그인 상태가 유지되기 때문에 잘 사용하지 않으나 보안이 중요한 은행 서비스 등에서 사용될 수 있습니다.
• persistence cookie
  • 만료일 ⭕
    • 만료일 기점으로 쿠키가 삭제되고, 브라우저가 닫혀도 만료일이 지나지 않으면 삭제 ❌
  • 대부분의 서비스 로그인 기능에서 사용하는 쿠키

보안 위협을 막기 위한 여러 옵션 📚

HTTP는 stateless 프로토콜입니다. 상태 정보를 기억하지 못하기 때문에 서버는 이전 요청을 보낸 사람과 같은 사람인지 구분하지 못합니다. 그렇기 때문에 쿠키 안에 들어있는 유일한 식별 정보인 쿠키를 해커가 탈취하여 사용해도 서버는 이를 인지하지 못하기 때문에 악의적인 사용자들이 다양한 방식으로 쿠키 탈취를 시도했고, 그로 인한 보안 문제가 빈번히 발생했습니다. 이를 막기 위해 Cookie에는 여러 옵션이 존재합니다.

HTTP only cookies

• XSS(Cross Site Scripting)
  • 클라이언트가 Javascript로 Cookie를 조회할 수 있는 기능을 악용하여 Javascript로 Cookie를 가로채려는 공격
  • 쿠키를 가져가는 악성 스크립트를 사이트에 심어놓으면 사용자는 그 사이트에 접속하면 자동으로 그 스크립트가 실행되어 사용자의 쿠키가 탈취됩니다.
• http only cookies
  • 브라우저에서 쿠키 접근해 조작하는 것을 방지하는 옵션
  • 브라우저에서 쿠키를 접근할 수 없도록 제한하는 방식을 통해 해결

Secure Cookies

• 네트워크 감청을 통한 쿠키 탈취
  • 통신 상의 정보 유출 막기 위해 HTTPS 프로토콜 사용하여 데이터 암호화하는 방식 주로 사용
    (쿠키도 암호화되어 전송)
  • 그러나 HTTPS로 전송되어야 할 정보가 개발자들의 부주의로 인해 HTTP로 전송되어 쿠키가 유출되는 문제가 발생하여 쿠키 생성 시, secure를 적용하면 브라우저 상에서 HTTPS가 아닌 통신에서는 쿠키가 전송되지 않도록 설정해줍니다.

Host Only

• 브라우저가 처음 Cookie를 보내준 Host Server에만 Cookie를 전달을 하게 하는 설정
  • Host Only를 설정하지 않았을 경우,
    Cookie를 생성한 도메인과 그 하위 도메인에게 Cookie가 공유되는데
  • Host Only 설정을 활성화할 경우,
    다른 도메인은 물론 Cookie를 생성한 도메인의 하위 도메인까지 공유되지 않습니다.
• 이 경우 서브 도메인에도 모두 Cookie가 공유되지 않아 개발의 난이도가 올라갈 수 있습니다.

---

Web Storage

• HTML5에서 쿠키의 단점을 보안하고자 좀 더 간단한 저장소인 Web Storage를 만들어냈습니다.
• 웹 브라우저에서 제공하는 간단한 key-value 쌍의 데이터 저장 공간
• LocalStorage와 SessionStorage로 구분됩니다.

LocalStorage

• 로컬에 도메인 별로 지속되는 저장소
• 만료일이 없고, 브라우저 끊다고 없어지지 않아서 삭제하려면 직접 지워줘야 합니다.
• Cookie는 서버에서 요청을 할 때마다 항상 쿠키값을 전달하기 때문에 서버와 브라우저 간의 트래픽과 대역폭 양이 많습니다. 반면 LocalStorage는 클라이언트가 어떤 정보를 보낼지 조작이 가능하기 때문에 필요한 정보만 전달할 수 있어서 트래픽과 대역폭 양을 줄일 수 있습니다.
  • 로컬에서만 컨트롤이 가능하기 때문에 클라이언트가 조작해야하는 데이터의 경우,
    LocalStorage에 담는 것이 유리합니다.
• Storage Event
  • Cookie는 자신의 변화에 대해 감지할 방법이 없는 것에 비해 Web Storage (LocalStorage, SessionStorage)는 event로 자신의 변화를 감지할 수 있습니다.

SessionStorage

• 세션이 종료될 때까지 지속되는 저장소
• 만료일은 없고, 브라우저 세션 동안만 지속되고 브라우저 세션이 끝나면 자동으로 삭제됩니다.
• 같은 도메인이어도 다른 탭이면 공유되지 않는다.
• Storage Event

---

[참고자료]

[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)
[Web] HTTP Only와 Secure Cookie 이해하기