쿠키&로컬스토리지

쿠키

• 브라우저에 저장되는 작은 크기의 문자열(최대 4KB)
• 매직 쿠키에서 유래( 프로그램이 수신한 뒤 변경하지 않고 보내는 데이터 패킷 )

 

http는 비연결성, 무상태성의 특징을 가지고 있어 이미 방문했던 클라이언트인지 아니면 처음 방문하는 클라이언트인지 알 수 없다.

따라서 쿠키에 클라이언트의 상태를 담아 보내면 서버에서 인식한다.

 

쿠키 종류

영구 쿠키 (Persistent Cookie)	세션 쿠키 (Session Cookie)
만료 기간 O	만료 기간 X
만료 기간이 끝난 후 삭제	브라우저 종료 시 삭제

퍼스트파티 쿠키	서드파티 쿠키
같은 도메인의 쿠키들 ex   naver.com   m.naver.com	다른 도메인의 쿠키 ex   kakao.com

 

쿠키 문제점

CSRF

• 쿠키가 자동으로 전송된다는 특징을 이용해 사이트에 로그인이 되어있는 사용자에게 악성 스크립트를 보내 비밀번호를 변경하거나 결제 요청을 하는 등 사용자의 권한을 이용한 공격을 말한다.

XSS

• Reflected XSS, Stored XSS, DOM-based XSS 3가지 종류(원리와 목적은 같음)
• 악성 스크립트를 실행시켜 사용자의 민감한 정보 탈취(토큰)

부족한 저장 용량

• 4KB

HTTP 요청 시 자동으로 모든 쿠키 전송

• 불필요한 트래픽 증가

 

쿠키 보안 문제 해결 방안

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

 

 

 

웹 스토리지

• 5MB의 저장 용량 ( 쿠키의 부족한 저장 용량 문제 해결 )
• 요청 시 Headers에 전송하지 않음 ( 쿠키의 CSRF, 트래픽 문제 해결 )
• 문자열만 저장 가능 ( 직렬화를 통해 갹체 저장 가능 )

(동기적으로 실행)	로컬 스토리지	세션 스토리지
저장 범위	도메인 / 브라우저 별 독립된 스토리지 사용	탭 별로 독립된 스토리지 사용
삭제 시기	직접 삭제 시	탭 종료 시 (브라우저 종료시 삭제되어도 괜찮은 데이터인 경우)

 

웹 스토리지 사용 시 고려할 점

• 웹 스토리지는 문자열만 저장이 가능하다. 따라서 객체를 저장하기 위해서는 직렬화, 역직렬화 과정이 필요하다.
• 브라우저 마다 웹 스토리지를 지원 여부가 다르다.
• 웹 스토리지를 지원한다고 해도 비활성화 설정으로 에러가 발생할 수 있다.(사파리 시크릿 모드) 따라서 에러 처리가 필수적이다.

 

웹 스토리지 문제점

• XSS ( 자바스크립트로 접근 가능 )
• 독립된 스토리지 ( 브라우저 /  탭(세션 스토리지) 간 공유 불가 )
• 만료 기간 설정 불가
• 동기적으로 실행 ( 메인 스레드 블로킹, 용량이 크다면 IndexedDB 고려 )

 

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

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

 

정리

• 쿠키 & 웹 스토리지 모두 보안 문제가 있기 때문에 민감한 정보는 저장하지 않는다.
• 쿠키는 기간을 설정해야 하거나, 자동으로 서버 전송 작은 용량의 데이터인 경우 사용( ex: n일 동안 보지 않기, 비로그인 장바구니 )
• 세션 스토리지는 탭 종료시 삭제되어도 괜찮은 데이터인 경우 사용( ex: 이전 페이지 저장, 이전 스크롤 위치 저장 )
• 로컬 스토리지는 브라우저가 종료되어도 유지되어야 하는 데이터인 경우 사용( ex: 사용자 설정 저장, 글 임시 저장 )

 

 

 

참고

 

HTML Standar - https://html.spec.whatwg.org/multipage/webstorage.html#webstorage 

HTTP Cookie https://en.wikipedia.org/wiki/HTTP_cookie 

Web Storage에 대하여 https://kjwsx23.tistory.com/605 

[10분 테코톡] 디토의 웹스토리지 & 쿠키 https://youtu.be/-4ZsGy1LOiE