728x90
개요
- 웹에서 데이터를 관리하는 기술은 cookie와 session이 있다. 웹은 서버와 프론트 엔드 간에 데이터를 주고받는데, 이때 cookie와 session이 사용된다. 간단히 말하면, session은 서버에서 관리하는 데이터이고 cookie는 프론트 엔드, 즉 웹 브라우저에서 관리하는 데이터를 의미한다.
- 해당 포스팅에서는 session과 cookie의 차이를 이해하고, 웹 브라우저에서 데이터를 저장하는 방법에 대해 자세히 알아보자.
서버
1. session
클라이언트(브라우저)
1. cookie
2. storeage
2.1. session storeage
2.2 local storeage
2.3 cash
1. Session (세션)
- 서버 측에서 유지되는 상태 정보를 저장하는 방법
- 사용자가 웹 사이트 접속 시 서버에서 해당 사용자를 위해 고유 세션ID를 생성하고 추적하는 방법
- 보통 서버 메모리를 사용하며, 경우에따라 디스크나 데이터베이스에 저장 됨
1.1. 적용 기능
- 사용자 로그인 기능 유지
- 장바구니 등 임시 데이터 저장 기능
2. Cookie (쿠키)
- 클라이언트에서 데이터를 저장하는 방법
- 작은 텍스트 파일, 데이터 크기는 4KB정도로 제한 된다.
- 도메인 및 경로 설정을 통해 해당 도메인 모든 페이지에서 접근 할 수 있게 설정하고 웹 사이트간에 데이터를 전송하고 유지한다.
- 서버와 클라이언트간의 트래픽을 증가시킬 수 있다.
- 브라우저를 닫아도 만료일자를 설정하여 만료일까지 장기간 유지하거나, 세션 쿠키로 설정하여 브라우저를 닫을 때까지 유지시킬 수 있다.
session과 Cookie 관계
Cookie 장단점
- Session 보다 속도가 빠르다.
- 브라우저 조작이나 파일로 읽어볼 수 있기 때문에 보안에 취약할 수 있다.
- 매번 서버에 전송, 저장 용량이 작고, 스니핑에 취약함
Cookie 를 활용하여 만드는 기능
- 사용자를 식별하거나, 로그인상태를 유지하는 기능
- 개인 환경(언어, 테마) 설정 저장 및 재 방문 시 이전 설정 유지하는 기능
- 예) 다시보지않기 광고 팝업
- 이전에 방문한 활동을 기반으로 콘텐츠 추천 기능
Cookie 속성 상세
path
- 쿠키가 유효한 URL 경로를 지정
- 특정 디렉토리나 경로에 대한 쿠키의 유효 범위를 제한
- path=/auth으로 설정하면 /auth, /auth/login, /auth/refresh등 도메인으로 설정한 주소의 하위 주소에서만 쿠키에 접근할 수 있게 해줌
- 다른 api를 통해 쿠키 공유를 하고 싶은 경우 / 사용
document.cookie = "username=John Doe; path=/example";
// "username" 쿠키가 "/example" 경로 내의 요청에 대해서만 유효
expires
- 쿠키의 만료일을 설정
- 지정된 기간이 지난 후에 자동으로 삭제
- 쿠키 만료일 형식은 시스템 날짜로 설정
- Thu, 01 Jan 1999 00:00:10 GMT; 영구 사용
var expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = "username=John Doe; expires=" + expirationDate.toUTCString();
// "username" 쿠키가 7일 후에 만료
max-age
- - 쿠키의 만료일을 설정, expires의 대안으로 사용
- - 해당 날짜와 시간에 자동으로 삭제
- - 현재 시간으로부터 쿠키의 최대 수명을 초 단위로 설정
- expires와 max-age는 속성을 지정하지 않으면 브라우저를 닫을때 쿠키가 삭제되는 세션 쿠키라고도 한다.
- 0으로 지정 시 바로 삭제
document.cookie = "username=John Doe; max-age=" + (60 * 60 * 24 * 7);
// "username" 쿠키가 7일 후에 만료
domain
- 쿠키에 접근 가능한 도메인을 설정
- test.com은 물론 www.test.com, new.test.com 같은 서브도메인까지 이용 가능
- 필드를 입력하지 않는다면, 서브도메인은 안되고 오직 test.com 에서만 가능 하다.
- 로컬 테스트시 localhost로 설정
secure
- https통신에서만 쿠키에 접근할 수 있게 한다.
samsite
- XSRF(크로스 사이트 요청 위조)라 불리는 공격을 막기위한 속성
- 사이트 외부에서 쿠키 접근을 막는다.
- None : 동일 사이트와 크로스 사이트 모두에 쿠키 전송
- Strict : 도메인 자체에서 시작된 요청에서만 전송, 즉 SameSite에서만 쿠키의 전송을 허용
- Lax : Strict 모드와 동일하지만 몇가지 예외사항 둬 CrossSite임에도 일부 요청 방식으로는 쿠키를 전송
httpOnly
- 클라이언트에서 document.cookie를 활용해 쿠키를 조작할 수 없도록 하는 속성
- 쿠키 조작 시 서버에 피해를 끼치지 않게 하기 위함
JavaScript로 Cookie 설정및 사용 방법
쿠키 저장
// 쿠키 저장
document.cookie = 'name=kim; expires=1*24*60*60*1000; path=/';
// 쿠키 저장 함수
const setCookie = function(cookieName, cookieValue, exp) {
const date = new Date();
date.setTime(date.getTime() + exp*24*60*60*1000);
document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; };
}
setCookie('name', 'kim', 1);// set-cookie 넣는 방법
response.setHeader("Set-Cookie",
"token=" + jwt + "; " +
"Path=/;" +
"Domain=localhost; " +
"HttpOnly; " +
"SameSite=None; " +
"Secure;" +
"Max-Age=604800; "
);
const check = document.cookie.includes("check=true")
document.cookie = 'check=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';쿠키 조회
// 값 존재 여부 확인
const value = document.cookie.includes("name=kim"); // true, false
// 쿠키 조회
const value = document.cookie.match('(^|;)?name=([^;]*)'); // ["name=kim", null, "kim"]
// 쿠키 조회 함수
const getCookie = function(cookieName) {
const match = document.cookie.match(new RegExp('(^| )' + cookieName + '=([^;]+)'));
return match ? match[2] : null;
};
getCookie("name"); // kim
쿠키 삭제
// 쿠키 삭제
document.cookie = 'name=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
// 쿠키 삭제 함수
const deleteCookie = function(name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
}
deleteCookie('name');
Web Storage (웹 스토리지)
- Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한됨
- 예를 들어, A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다는 것
- 기존 웹 환경의 쿠키와 유사한 개념으로 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입됨
3. Local Storage
- 브라우저를 닫아도 만료되지 않고, 사용자가 직접 삭제하지 않는 이상 계속 유지 되기 때문에 클라이언트에서 데이터를 영구적으로 사용하는 목적으로 사용된다
- 보안에 취약할 수 있고 도메인당 용량제한이 있을 수 있다.
- 도메인별로 별로 로컬스토리지가 동작한다.
- Web Storage에서 지속성에 따라 브라우저 자체에 영구적으로 저장 됨
- 저장한 데이터를 영구적으로 보관이 가능
3.1. 기능
- 개인 환경(언어, 테마) 설정 저장 및 재 방문 시 이전 설정 유지하는 기능
- 예) 자동 로그인 기능
- 인터넷이 없는 오프라인에서 데이터 저장, 온라인에서 서버 동기화 기능
- 사용자가 재방문시 작성 글, UI 데이터 복원
4. Session Storage
- 도메인 및 페이지마다(각각의 탭, 창마다) 별도의 세션 스토리지가 생성된다.
- 페이지 세션이 유지되는 동안만 데이터가 유지되고 브라우저 탭, 창을 닫으면 데이터가 소멸된다.
- 브라우저 세션동안만 유지되므로 보안에 좀 더 강력하다.
- 쿠키 보다 안전하게 데이터를 저장 할 수 있다.
- Web Storage에서 지속성에 따라 탭 윈도우 단위로 저장 됨, 탭 삭제시 삭제 됨
- 세션스토리지는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재.
- windows 전역 객체의 세션스토리지라는 컬렉션을 통해 저장과 조회가 이루어짐
4.1. 기능
- 비 회원 장바구니 기능
- 폼 입력 다시 로드하는 기능
- 사용자 세션을 유지하고 탐색하는 기능(진행상태 등)
- 예) 입력값 유지, 비로그인자 장바구니 기능
5. Cash
- 쿠키와는 비슷하지만 목적성에 차이가 있음
- 이미지같은 재사용될 것 같거나 용량이 큰 리소스를 임시로 저장해두어 렌더링 속도를 높이는 것이 목적
- 브라우저를 사용하는 환경에 서버에서 받은 데이터를 저장한 파일
+ Cookie, Web Storage 차이점
- 쿠키는 매번 서버로 전송되지만 → Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 안됨. 이는 네트워크 트래픽 비용 줄여줌
- 단순 문자열을 넘어서(스크립트) 객체정보를 저장할 수 있다.
- 용량의 제한이 없다 쿠키는 개수와 용량에 있어서 제한이 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개임. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있음. → Web Storage에는 아예 제한 없음
- 영구 데이터 저장이 가능 쿠키는 만료일자를 지정하게 되어 있어서 언젠가는 제거된다. → Web Storage는 만료기간의 설정이 없음.
- HTML5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Stroage 스펙이 포함되어 있음
- Web Stroage의 개념은 key/value 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴.
- 그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분 함
+ Cookie, Session Storage 비교
- 서버 데이터 저장소
- 저장 위치때문에 속도가 느림
- Cookie 보다 보안성이 높음(세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기 때문에)
+ Local Storage, Session Storage 데이터 유지 측면 비교
- SessionStorage는 데이터가 지속적으로 보관되지 않는다.
- LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있음.
- 반면 SessionStorage는 브라우저가 종료되면 데이터도 같이 지워짐
https://velog.io/@haiseong/Set-Cookie%EB%A1%9C-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-%EC%BF%A0%ED%82%A4-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0
728x90
