CS전공지식 노트/3. 네트워크

네트워크 #6 : 로컬스토리지,세션스토리지, 쿠키

berryberries 2023. 8. 16. 16:59

1. 로컬스토리지 

  • 웹스토리지 객체 브라우저 내에 { key : value } 형태로 오리진에 종속되어 저장되는 데이터
  • 브라우저내에 저장되기 때문에 chrome 로컬스토리지에 저장된 데이터는 웨일에서는 볼 수 없다.
  • 오리진이 같은 브라우저에서 공유된다.

1) 로컬스토리지 특징

  • 하나의 key에는 하나의 value만 저장된다.
    • 하나의 key에 여러개의 value는 저장할 수 있다.
    • 이경우에는 배열을 이용해 value값을 담으면 된다.
    • 반드시 key는 1개여야 한다.
  • 만료날짜가 없다.
    • 수동으로 삭제 안한다는 전제하에 영구저장이 가능하다.
    • 창종료나 컴퓨터를 종료해더 만료되지 않는다.
  • 최대저장용량이 5MB
  • 사용자의 행위를 기억하거나 로그인을 유지하기위해 사용된다.
    • 로컬 스토리지데이터는 자동으로 서버로 전송되지 않는다
1. 설정 : localStroage.setItem(key,value)
2. 탐색 : localStroage.getItem(key)
3. 제거 : localStroage.removeItem(key)
4. 전체제거 : localStroage.clear()
오리진

● [프로토콜 / hostname / port ]로 이루어져 있다.
    ex) https://www.naver.com:443 
      [프로토콜] + host + (포트번호)
● 같은 오리진 내에서는 로컬스토리지가 공유된다 = 오리진에 로컬스토리지가 종속된다.
   ex) https://www.naver.com 은 https://search.shopping.naver.com와 오리진이 다르기 때문에 로컬스토리지 공유x

2) 로컬스토리지 사용처

● 로그인유지

클라이언트가 서버로 ID/PW를 보내면 서버는 클라이언트에 토큰을 보낸다. 

이 토큰은 로컬스토리지에 저장되고 여기서 클라이언트는 토큰가져와서 사용하게 된다.

● 캐싱

UX를 개선하기 위해 텍스트 창에 입력한 값을 로컬스토리지를 통해 캐싱을 하게된다.

ex ) 검색어 자동완성

자동완성을 사용하면 이전 입력값들을 다시 입력하지 않아도 되기때문에 번거로움을 줄일 수 있다.

 

2. 세션 스토리지

  • 웹 스토리지 객체로 브라우저 내에 { key : value } 형태로 오리진에 종속되어 저장되는 데이터
  • 오리진이 같은 브라우저 내에서 공유된다.

1) 세션스토리지 특징

  • 하나의 키에 오로지 하나의 값만 저장된다.
  • 최대 저장용량 5MB
  • 사용자가 브라우저에서 탭을 닫으면 데이터는 만료된다.
  • 사용량 : 세션스토리지 <<< 로컬스토리지 

 

3. 쿠키

  • 브라우저에 저장된 데이터 조각
  • 클라이언트에서 먼저 설정할수도 서버에서 먼저 설정할수도 있다
    • 보통은 서버에서 먼저 설정한다.
    • 서버에서 만료기한등을 설정 컨트롤하기 때문
  • 최대 4kb 저장가능
  • 쿠키 설정 과정
서버에서 쿠키 설정

1. 서버에서 응답헤더로 Set-Cookie로 설정해서 쿠키를 보낸다.
2. 클라이언트에서 요청헤더 Cookie에 설정되어 자동으로 서버에 전달된다.
3. 브라우저에도 저장되게 됩니다.

클라이언트에서 쿠키 설정
● 자바스크립트 - document.cookie를 통해 쿠키를 설정
● header - Cookie에서 값을 정할 수있다.

● 클라이언트가 쿠키를 설정하면 쿠키에 대한 제어권을 클라이언트가 잡게 된다.
  -> 쿠키에 민감한 정보가 담길 수 있기 때문에 서버가 제어권을 가져야 한다.

axios.get(url, {
headers: {
Cookie: "cookie1=value; cookie2=value;
cookie3=value;"
}
}).then

쿠키에 대한 제어권을 클라이언트에게 두게 되는데 쿠키에는 보통 민감한 정보들이 담길 수도 있기 때문에 이 제어권에 관한 것을 클라이언트가 아닌 서버가 두게 만들어야 합니다.

  • 로그인, 장바구니, 사용자 커스터마이징 등에 사용된다.

2) 쿠키 종류

  • 세션쿠키
    • expires 또는 max-age 속성이 없어서 브라우저 종료시 쿠키도 삭제된다.
  • 영구쿠기
    • expires 또는 max-age 속성이 있어서 일정기간이 지나면 삭제된다.
    • 브라우저를닫아도 삭제된다.
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
  • secure
    •  https로만 쿠키를 주고 받게 하는 속성
    • http가 Secure 지시문으로 쿠키를 설정하는 것을 금지하기위해 현재 사양을 무시한다.
  • httponly
    • 공격자가 자바스크립트로 빼낼 수 없게 만든다
  • samesite
    • 요청이 동일한 도메인에서 시작된 경우에만 쿠키가 애플리케이션으로 전송되도록 허용한다

3) 쿠키 사용

  • 로그인
    • 시큐어 코딩사용해야한다.
    • 세션ID기반으로 클라이언트의 개인정보를 유추할 수 없게 해야한다
    • 자바스크립트로는 파악할 수 없게 http only 옵션을 걸어야 한다.
    • 일정시간의 세션 타임아웃 걸어야 한다.
  • 쿠키 허용관련 알림창
    • 방문 기록을 추적할 때 쿠키가 사용되기 때문에 쿠키허용관련 알림창 만들어야한다.
    • 사용자의 데이터 간접수집에 해당하기 때문

 

4. 로컬스토리지,세션스토리지, 쿠키 공통점 & 차이점

● 공통점

  1. 브라우저 캐싱 : 서버에 대한 요청을 줄여서 서버부하를 방지한다.
  2. 캐싱 : 다운로드 컨텐츠를 줄여서 웹사이트의 컨텐츠를 더 빨리 다운로드 할 수 있다
  3. 커스터마이징 저장과 로그인을 유지할 수 있다. 

● 차이점

저작자표시