[TIL] 🍪Cookie와 📦WebStorage

🍪Cookie

웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일.

웹사이트는 쿠키를 통해 접속자의 장치를 인식하고, 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장한다.

쿠키는 key,value형태의 문자열들로 이루어져 있으면 4KB 이상 저장이 불가능하다.
브라우저마다 저장되는 쿠키들은 다 다르다.(크롬, 익스플로러, 사파리, 파이어폭스 등)

쿠키의 종류

1) 기술적 쿠키 : 검색하는 주체가 사람인지, 어플리케이션인지 이용자 구분 기능 수행

2) 분석 쿠키 : 어떤 종류를 검색하는지, 많이 검색하는지, 시간, 언어 대상 등의 정보를 수집

3) 광고 쿠키 : 검색 내용, 국가, 언어에 따라 광고 게재

쿠키 사용법 (Method)

1) 클라이언트가 서버에 요청을 하면 서버는 응답할 때 쿠키에 저장하고자 하는 정보를
Header의 Set-Cookie로 전달한다

2) 클라이언트는 서버로 전송하는 요청에 현재 브라우저에 저장된 쿠키를 Header의 Cookie로 전달

서버가 쿠키와 함께 클라이언트에게 응답을 전달하면

이후에는 해당 클라이언트는 매번 저장된 🍪 쿠키를 Header에서 포함해 요청을 보낸다

일반적으로 Session 쿠키는 웹 브라우저가 종료될 때 제거되는 쿠키다

브라우저가 종료되더라도 쿠키를 유지하고자 한다면?
Permanent를 사용한다

쿠키 생성시 Expires or Max-Age 옵션을 추가합니다.

1) Max-age : 현재 시간 기준으로 얼마동안 쿠키를 유지할지 지정

2) Expires : 쿠키가 만료될 날짜 지정

쿠키의 목적

쿠키를 이용해 페이지 이동 시마다 로그인을 다시 할 필요없이 사용자 정보를 유지할수 있다.
쿠키가 없다면 해당 사용자 정보 파라미터를 페이지마다 계속 넘겨줘야 할것이다.

쿠키가 이용되는 사례 예시
1. ID 정보 저장 : 로그인 상태 유지
2. 최근 검색한 정보 광고 추천
3. 쇼핑몰 장바구니 저장 기능
4. 3일간, 7일간 등 일정 기간 다시 보지 않기 체크(쿠키 날짜 기록 계산)

쿠키 제어 옵션

1. Secure : HTTPs 프로토콜 상 암호화된 요청일 경우 전송
2. HttpOnly : Cross-site 스크립트 공격을 방지. JavaScript의 document.cookie API 접근 불가
3. Domain : 쿠키가 전송되게 될 호스트 명시
4. Path : 쿠키 Header 전송을 위해 요청되는 URL 경로
5. SameSite : 쿠키가 cross-site 요청과 함께 전송되지 않음을 요구 = 위조 공격에 대한 보호 방법
   

세션(Session)

사용자는 쿠키를 통해 로그인 Id,pw를 쿠키에 저장한다.
다만 이 쿠키가 노출되면 보안 문제를 발생시키기 때문에 이를 방지하기 위한 세션(Session)이 존재한다.

세션은 비밀번호 같이 인증 정보를 쿠키에 저장하지 않고,
사용자의 식별자인 JSESSIONID로 저장한다.

서버에서는 인증 정보와 같이 이 ID에 해당하는 로그인 상태, 시간, 닉네임, 만료기한 등 정보를 저장한다.

서버는 해당 세션 ID로 정보를 관리하기 때문에 훨씬 보안상 안전할 수 있다.

세션 동작 원리

1. 클라이언트 -> 서버
   Request 요청
2. 서버 -> 클라이언트
   Session ID 쿠키 값 체크 후 없을 경우 새로 생성해서 response
3. 클라이언트는 전달받은 SessionID 값을 매 요청마다 Header 쿠키에 담아서 전달
4. 서버는 Session ID 로 사용자를 식별
5. 클라이언트가 로그인 요청 시 서버에서는 session을 로그인한 사용자 정보로 갱신하고, 새로운 Session ID를 발급하여 응답한다
6. 클라이언트가 이후에 사용자의 session ID 쿠키를 요청과 함께 전달, 서버에서도 해당 로그인 사용자로 식별

📦 WebStorage

웹의 데이터를 클라이언트에 저장할 수 있는 자료구조
Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.

Web Storage는
LocalStorage 와 SessionStorage 를 따로 두어 데이터의 지속성을 구분할 수 있으며
이 때문에 응용 환경에 맞는 선택이 가능하다.

Web storage는 Cookie와 매우 유사하다
사실 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었다.

그러나 쿠키는 여전히 유효하고 꽤 적절한 클라이언트 저장도구임에 틀림없다. HTML5 에서 Web Storage 스펙을 새로 추가했지만 쿠키를 배제한다는 의미는 아니다. HTML5 에서도 여전히 쿠키를 이용 가능하다.

🍪 Cookie와 📦 WebStorage의 차이점

1. 매번 서버로 전송 vs 클라이언트에 존재
   웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다.
   Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.

2. 단순 문자열 vs 객체
   Web Storage는 단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.
   문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 된다. 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.

3. 용량의 제한
   쿠키는 개수와 용량에 있어 제한이 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다.
   그러나 Web Storage에는 이러한 제한이 없다. 그러나 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수 있습니다. 그리고 대부분 쿠키의 제한으로까지 데이터를 저장할 일이 없다.

4. 영구 데이터 저장 기능
   쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.
   WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.

• WebStorage와 쿠키의 차이점에 대해서 WebStorage가 특별히 좋은 이유는 없다고 봐도 무방하다. 다만 한가지 매번 서버로 전송되지 않는다는 특징은 꽤나 유용하다.

LocalStorage와 SessionStorage

Web Storage는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다.

우선 기본적으로 Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. 예를 들어, A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없다는 것이다. 이는 데이터의 보안 측면에서 당연하다.

LocalStorage
저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다. 앞서 말한대로 도메인마다 별도로 로컬 스토로지가 생성된다. Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

SessionStorage
SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. SessionStorage는 windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

데이터 유지 측면
SessionStorage는 데이터가 지속적으로 보관되지 않는다. 이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있는 반면, SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다. 즉, 브라우저가 종료되면 SessionStorage도 삭제된다는 것이다.

데이터 범위 측면
SessionStorage 역시 Web Storage의 기본 보안 처럼 도메인별로 별도로 생성된다. 여기 더불어 SessionStorage는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다.

탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두 페이지의 SessionStorage는 각각 별개의 영역으로 서로 침범하지 못한다는 의미이다. 이는 도메인만 같으면 전역적으로 공유 가능한 LocalStorage와 구분되는 특징이다.

WebStorage의 보안은 서로 다른 도메인의 데이터 침범을 막고는 있지만 클라이언트, 즉 사용자를 막고 있지는 않다. 클라이언트는 얼마든지 저장된 값을 임의로 수정이 가능하다. 이것은 쿠키와 동일한 개념이다. 그렇다고 쿠키에 비해 별다른 보안 취약점을 더 가진 것은 아니다.

따라서 개발자는 사용자에 의한 이러한 임의 변경에 항상 예의 주시하고 방어 코드의 작성을 잊지 말아야 한다.

Reference

SessionStorage 와 LocalStorage 차이점
웹 브라우저 쿠키란?