web storage와 cookies

Web Storage Object

• HTML5 부터 새롭게 지원하는 저장소로 클라이언트에 데이터를 저장할 수 있다.
  쿠키와 다르게 네트워크 요청시 서버에 전송하지않아 서버에 부담이 가지않으며, 쿠키보다 더 많은 자료를 보관할 수 있다.(약5MB)
• 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 객체형태(키-값 페어)로 데이터를 저장할 수 있게 해준다.
• 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없어 자동 전송의 위험이없다.
  웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행되며, 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있기때문에 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.(CRSF안전)
• 쿠키와 달리 데이터를 클라이언트에 저장하여 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있다.

1. Local Storage

• Window.localStorage객체
• 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유되며, 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
  명시적으로 지우지않는한 영구적으로 저장된다.
• 도메인별로 생성되어 다른 도메인의 로컬스토리지에 접근이 불가능하다.
  반면, 오리진(domain/port/protocol)만 같다면 url 경로가 달라도 동일한 결과를 볼 수 있다.
• localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문에 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있다.
  즉, 다른 브라우저라도 동일한 도메인이면 동일한 로컬 스토리지르 사용한다.
• 지속적으로 필요한 데이터나 UI정보들을 저장하는데 쓰인다.(ex자동로그인,비회원카트)

하지만 위처럼 자동로그인을 하기에는 로컬스토리지에 문제점이있다.
자바스크립트 코드를사용하여 접근이 가능하기때문에 보안상 XSS같은 해킹 기술에 취약하다.
때문에 민감한 정보는 로컬스토리지에 저장해서는 안되고 공개해도 괜찮은 데이터들을 넣어야한다.
민감한 데이터로는 사용자ID, 세션ID, JWT, 신용카드정보 등의 개인정보들이 있다.
이러한 데이터를 다루기위해서는 백엔드에서 세션을 상성하여 서명된 쿠키를 사용하게하는 방법이있다.
백엔드에서 쿠키를 보낼때 httpOnly같은 옵션을 걸어주면 자바스크립트 코드를 통해 쿠키를 수정하는것을 막을 수 있다.
React가 부상하고있고 리엑트의 경우 XSS 공격이 불가능하도록 설계가 되어있지만 그래도 백엔드에서 안전성을 더 기여하는게 좋다고 생각한다.

2. Session Storage

Session
백엔드와 브러우저 사이에 어떤 활동을 하였는지에관한 기록 또는 기억이다.

• window.sessionStorage객체
• 세션스토리지는 로컬스토리지와 제공하는 프로퍼티와 메서드는 같지만 훨씬 제한적이기 때문에 로컬스토리지보다 자주 사용되지않다.
  세션 스토리지는 현재 떠있는 탭 내에서만 유지되는데 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기때문이다.
• 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않지만 탭을 닫고 새로 열 때는 사라진다.
• 잠깐동안 필요한 정보나 보안이 중요한 정보를 저장한다.(ex은행)

Cookies

쿠키는 웹페이지 방문시 방문 기록같은 브라우저에서의 정보들이 저장된 텍스트파일로 웹서버가 브라우저에 보내 저장했다가 서버의 요청이 있을때 다시 서버로 보내주는 작은 데이터이다.
쉽게 말해 서버 사용자가가 서버에 방문한 정보를 저장하는 작은 파일이다.

• 쿠키는 서버 사용자의 웹 브라우저에 저장하며 데이터 형태는 Key, Value형태의 String문이며 ,4kb이상 저장이 불가하며, 유효기간이 존재한다.
• 쿠키는 이름=값 쌍으로 저장되며, 각 이름=값 쌍은 ; (세미콜론)으로 구분된다.
• 쿠키는 세션관리, 개인화, 트래킹에 사용된다.(일주일간 다시보지 않기에도 사용된다)

document.cookie = "username=Hz Sinbi; expires=Mon, 19 Dec 2022 12:00:00 UTC";

쿠키의 종류

1. 필수적인 쿠키: 필수적인 쿠키는 페이지 탐색, 웹사이트의 보안영역 접속, 그리고 검색을 포함한 웹사이트의 기본적인 기능의 활성화를 목적으로 사용되고 있다.
2. 기술적 쿠키: 검색하는 주체가 사람인가 어플리케이션인가 이용자 구분 기능을 수행한다.
3. 분석 쿠키: 어떤 종류를 검색하는지 ,많이 검색하는지, 시간, 언어 대상 등의 정보를 수집한다.
4. 광고 쿠키: 검색 내용, 국가, 언어에 따라 광고를 게재한다.

쿠키의 사용방법

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

Set-Cookie=<cookie-name>=<cookie-value>

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

Cookie: <cookie-name>=<cookie-value>

3.서버가 쿠키와 함꼐 클라이언트에게 응답을 전달하면,
(어제 들었던 200 OK라는 농담을 이해하게 된다.)
해당클라이언트는 저장된 쿠키를 Header에 포함해서 매번 요청을 보낸다.

Http/1.1 200 OK
Date: 요일, 날짜 월 년도 시간:분:초 GMT
Content-Type: text/html; charset=UTF-8
set-Cookie: test_cookie =testkey...