[React] 쿠키와 웹 스토리지란?

웹스토리지, 쿠키 :해당 도메인에 대한 데이터를 브라우저에 저장한다.

 

쿠키

- 서버가 클라이언트에게 전송하는 작은 데이터 파일

- 이름, 값, 도메인 정보, 경로 정보, 만료 일자와 시간 등

- 시간 설정 가능

- 모든 브라우저에서 지원을 하지만 매번 서버에 전송이 되고 저장 용량이 작고 보안에 취약하다는 단점이 있다.

>> HTML5부터는 쿠키의 단점을 보완해 등장한 웹스토리지를 주로 사용

1. 쿠키의 부족한 저장 용량 문제 해결 - 5MB 저장 용량
2. 쿠키의 CSRF, 트래픽 문제 해결 - 요청시 headers에 전송하지 않음
3. 직렬화를 통해 객체도 저장 가능 - 문자열만 저장 가능(쿠키와 동일)

 

웹스토리지

- 클라이언트에 저장만 할 뿐 서버로 전송되진 않는다.

- 키와 값의 형태로 데이터를 저장

- 지속성에 따라 로컬 스토리지와 세션 스토리지로 구분

- 단점:브라우저간 공유가 되지 않기에 다른 브라우저로 접속하거나 데스크탑과 모바일에서 다른 데이터를 볼 수도 있다/시간 설정을 할 수 없다.

• 로컬 스토리지:
  • 브라우저 자체에 반영구적으로 데이터를 저장하고 브라우저를 종료해도 데이터가 유지된다.
  • 도메인 ,브라우저 별로 독립된 스토리지를 사용하기 때문에 다른 웹사이트에 들어가거나 브라우저가 변경된다면 로컬 스토리지가 동일하지 않음.
  • 만료기간이 없어서 브라우저를 종료해도 삭제되지 않는다.
• 세션 스토리지:
  • 탭 윈도우 단위로 생성이 되고 탭 윈도우를 닫을 때 데이터가 삭제된다.
  • 탭별로 독립된 스토리지를 사용한다. 즉, 탭만 바뀌어도 세션 스토리지가 동일하지 않은 것
  • 탭을 종료하거나 브라우저를 종료하면 삭제된다.
  • 브라우저 종료시 삭제되어도 괜찮은 데이터인 경우에는 세션 스토리지에 저장하는 것을 추천

	로컬 스토리지	세션 스토리지
저장 범위	도메인 / 브라우저	도메인 / 브라우저 / 탭
삭제 시기	직접 삭제 시	탭 종료 시

 

 

쿠키 & 웹스토리지

보안 문제가 있기 때문에 민감한 정보는 저장X

아래는 추천 예시이므로, 특징을 고려하여 다르게 사용 가능

ex) 추천 저장 방법

쿠키 (기간 설정, 자동 서버 전송-작은 용량)	n일 동안 보지 않기 팝업창 비로그인 장바구니
세션 스토리지 (탭 종료시 삭제되어도 ok)	이전 페이지 저장 이전 스크롤 위치 저장 입력 폼 정보 비로그인 장바구니 기능
로컬 스토리지 (브라우저 종료 시 유지)	사용자 설정 저장 글 임시 저장 자동 로그인

 

쿠키의 보안 문제 해결 방안

	해결 방안	이유
XSS	HttpOnly	자바스크립트로 접근 불가
CSRF	SameSite Strict:모두 허용하지 않음 Lax: 안전한 GET요청만 허용(a tag) =>크롬은 기본적으로 Lax옵션이 설정되어 있다.	같은 도메인의 요청에만 쿠키를 전송
	Referer 검증	요청 온 사이트의 도메인을 확인할 수 있음

 

 웹 스토리지의 보안 문제 해결 방안

	해결 방안	이유
XSS	innerHTML 사용 X (사용자의 입력이 자바스크립트 코드로 실행될 수 있는 코드 작성하지 않기 ex:innerHTML,eval,document,write)	자바스크립트 코드 삽입 불가

>>하지만 innerHTML을 사용해야 한다면?

XSS 보안 라이브러리(sanitize-html,DOMPurify)사용

 

참고영상)

https://www.youtube.com/watch?v=5s--sLWzuZc

https://www.youtube.com/watch?v=-4ZsGy1LOiE