쿠키와 웹 스토리지

참고자료
파인의 쿠키와 웹 스토리지

목차

1. 쿠키 등장 배경과 특징
2. 쿠키 활용 예시
3. 쿠키 단점과 해결법
4. 웹 스토리지 특징
5. 웹 스토리지 종류와 예시
6. 웹 스토리지 단점과 해결법
7. 즁요 정보를 어디에 저장할까?

쿠키의 등장 배경

쿠키에 앞서 먼저 우리가 자주 사용하는 HTTP를 살펴보자
HTTP는 비연결성과 무상태성이라는 특징이 있다.
서버에 요청을 보내고 응답을 했으면 연결이 끊기게 된다.
이후 서버에 또 다시 요청시에 서버는 클라이언트가 누군지 식별을 할 수 없게된다.

만약 연결이 끊겨도 기억하고싶은 정보가 있다면?

이러한 요구사항을 해결하기 위해 쿠키가 등장했다.

쿠키?

브라우저에 저장되는 key와 value로 이루어진 작은 크기의 문자열

특징

• 4KB의 크기 제한
  만료 시간 설정 가능, 설정하지 않으면 브라우저 종료시 삭제
  HTTP 요청시 따로 설정하지 않아도 자동으로 전달

쿠키의 활용 예시

쿠키에 대해 로그인 유지와 N일 동안 보지않기를 예시로 들 수 있다.

먼저 N일 동안 보지 않기는 모달창을 클릭시 정해둔 날짜 후를 만료일로 설정해 클라이언트에서는 modalClose 값이 true일 경우 모달을 띄우지 않는다.

쿠키의 단점

XXS?

• 공격자가 악성 스크립트를 삽입하여 브라우저에서 실행
  

  

해결법

• HttpOnly 속성
  자바스크립트로 쿠키를 조회하는 것 방지

XSRF?

• 사용자인 척 악성 request를 보내는 공격
  

  

SameSite 속성

• strict : 사이트와 같은 도메인 요청에만 쿠키를 전송
• Lax : 안전한 메서드, 작업이 최상위 레벨 Navigation에서 이루어지는 경우 다른 도메인이라도 쿠키를 전송
• Secure 속성 : HTTPS로 통신하는 경우에만 쿠키가 전송

웹 스토리지

HTML5 부터 지원하는 브라우저에 데이터를 저장할 수 있는 API

특징

• 5MB의 정보 저장 가능
• 자동으로 서버에 전송되지 않음(쿠키 트래픽 문제 해결)
• 오리진 단위로 접근이 제한(CSRF로 부터 안전)

웹 스토리지 종류와 활용 예시

활용 예시

• 로컬 스토리지 : 다크 모드
• 세션 스토리지 : 결제 페이지

웹 스토리지의 단점

그렇다면 FE에서 중요한 정보를 어디에 저장해야할까?

• 특히 사용자 인증을 위해 사용하는 JWT 토큰을 어디에 저장하는 것이 좋을까?
• 정답은 없다...

로컬 스토리지

• XSRF에 안전, XSS에 취약
• 따로 서버에서 설정해주지 않아도 된다.

쿠키

• XSS에 안전한 편, XSRF 공격에 취약
• 매번 서버로의 요청에 담아야하는 JWT와 쿠키의 특징
• XSRF보다 XSS 공격이 더 다루기 힘들기 때문에 쿠키 사용

선택 기준

• 매번 요청을 할 때마다 필요한 데이터인가?
• 저장하는 데이터의 용량은 어느정도인지?
• 만료기간이 필요한지?
• 나의 페이지가 어떤 보안에 취약한지?