쿠키
쿠키의 등장배경
HTTP는 비연결성과 무상태성을 가지기 때문에 연결이 끊기면 기억할 수 없음
때문에 이것을 기억하게 만들기 위해 쿠키를 만들게 됨
쿠키는 브라우저에 저장되는 key와 value로 이뤄진 작은 크기의 문자열
- 4kB의 작은 문자열
- 만료 시간 설정 가능
- HTTP 요청 시 따로 설정하지 않아도 자동으로 전달
쿠키의 사용예시
- N일 동안 보지 않기 ( modalClose 속성을 모달에 남겨두는 식으로 사용)
- 로그인 유지
쿠키의 단점
- 4KB 적은 용량
- HTTP 요청 시 모든 쿠키 자동으로 전달, 불필요한 트래픽 양 증가
- XSS 공격에 취약
- XSRF 공격에 취약
XSS 공격
공격자가 악성 스크립트를 삽입하여 브라우저에서 실행
-> 쿠키 내의 정보를 탈취할 수 있음
방지를 위해 HttpOnly 속성 제공
XSRF 공격
사용자인 척 악성 request를 보내는 공격
sameSite 속성:
strict 사이트와 같은 도메인 요청에만 쿠키 전송
Lax 안전한 메서드, 작업이 최상위 레벨 Navigation에서 이루어지는 경우 다른 도메인이라도 쿠키를 전송
Secure 속성: Https로 정보통신 시에만 쿠키 전송
window.localStorage 속성
localStorage 는 sessionStorage와 유사하나, localStorage는 데이터 만료 시간이 없는 한편, sessionStorage는 페이지 세션이 종료될 때, 즉 페이지가 닫힐 때 데이터가 지워진다는 점이 다르다.(새로고침으론 지워지지 않음)
웹 브라우저가 데이터를 저장하는 방식에는 쿠키도 있는데 왜 또 다른 객체를 사용해서 데이터를 저장하는지에 대해서는 아래와 같다
- 클라이언트에 저장만 할 뿐 서버로 전달하지 않음
- 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않음. 때문에 더 많은 자료 보관 가능(최소2MB 이상) 또한, 개발자가 스토리지 내의 구성 방식 설정 가능
- 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것, 웹 스토리지 객체의 조작은 모두 자바스크립트 내에서 수행됨
- 웹 스토리지 객체는 도메인/프로토콜/포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없음(CSRF로부터 안전)
거의 본인의 컴퓨터에서만 가능하다고 생각하면 됨
| 구분 | 로컬 스토리지 | 세션 스토리지 |
|---|---|---|
| 저장범위 | 도메인 별 | 도메인/탭 별 |
| 삭제 기준 | 직접 삭제 시 | 브라우저나 탭을 닫을 시 |
| 활용 예시 | 글 임시 저장 사용자 설정 저장 | 입력폼 저장 일회성 로그인 |
로컬 스토리지의 예시: 테마 설정 등
세션 스토리지의 예시: 결제창의 결제 정보 등
로컬 스토리지의 단점
- 만료기간 설정 불가
- 동기적으로 실행(용량이 큰 데이터를 저장하는 경우, 메인스레드가 블로킹돼서 실행됨으로 IndexdDB고려)
- 미지원하는 브라우저 사파릿 시크릿 모드(에러처리 필요)
- XSS 공격에 취약(사용자 입력이 JS코드로 실행될 수 있는 코드 작성 X)
그렇다면 FE에서 중요한 정보를 저장하는 법?
없다!
로컬 스토리지: XSRF에 안전하나 XSS에 취약한 대선 서버에서 설정하지 않아도 됨
쿠키: XSS에 안전한 편이나 XSRF 공격에 취약. 매번 서버로의 요청에 담아야 하는 JWT(사용자 인증정보라 매번 서버에 요청할 때 담아야 하는 것과 담아서 보내지는 쿠키)와 잘 맞음
XSRF보다 XSS 공격이 더 다루기 힘들기 때문에 쿠키 사용
기준
- 매번 요청을 할 때마다 필요한 데이터인가?
- 저장하는 데이터의 용량은 어느 정도인지?
- 만료 기간이 필요한지?
- 나의 페이지가 어떤 보안에 취약한지?
이것에 맞춰서 알맞은 저장소를 택할 것
자동 로그인-로컬스토리지
입력폼,장바구니-세션스토리지
팝업창 n일간 보지 않기-쿠키
