쿠키(Cookie)

쿠키(Cookie)

• 클라이언트 로컬(하드)에 저장되는 key, value값이 들어 있는 데이터 파일이다.
• 서버에 저장되는 것이 아니기 때문에 보안과 상관없는 정보들에 사용한다.
• 재 요청 시 저장된 값을 참조, 재사용 한다.
• 사용자의 하드에 저장되기 때문에 공공장소에서 해킹 등의 악용이 가능하다.
• 클라이언트에 300개, 하나의 도메인에 20개의 값만 저장이 되며 하나의 쿠키는 4KB까지 저장 가능하다.
• 이름, 값, 만료 날짜(저장 기간), 경로 정보가 있어야하며 일정시간 동안 데이터를 저장할 수 있다.
• 같은 도메인 상에서 쿠키의 값은 공유된다.
• 클라이언트가 요청하지 않아도 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송한다.

예시1

~ 동안 열지 않기
프로세스 추측

1. 3일 동안 열지 않기 클릭
2. 클릭으로 인해 쿠키 저장 이벤트 발생
3. 쿠키 저장 이벤트의 날짜는 3일로 지정되어있으므로 3일간 쿠키가 저장됨.
4. 페이지 재 접속(페이지 요청)시에 쿠키가 저장되어 있다면 팝업 열지 않음

예시2

장바구니 (데이터 확인은 fiddler4)

1. ABC마트 접속 후 Cookie 확인 콘솔에 document.cookie로 확인해도 되고 개발자 도구에서 확인해도 된다. JESSIONID 값이 확인된다.

2.상품을 하나 고른 후에 장바구니에 추가한다. www.abcmart.co.kr/abc/order/addCartProducts 통신을 확인해 보면 해당 Cookie 정보 + 아이템 정보(JSON)이 전송되는 것이 확인 된다.

3.브라우저를 종료하지 말고 url에 www.abcmart.co.kr로 접속한 후 장바구니로 이동해본다. 응답 받은 www.abcmart.co.kr/abc/order/cart를 확인해 본 후 JESSIONID가 동일한 것을 확인한다.

JSESSIONID 확인

4.브라우저를 종료 한 후 다시 접속해본다. 아까와 같은 방법으로 Cookie정보를 확인해본다. JSESSIONID가 변경된 것과 장바구니가 비워진 것이 확인된다.

JSESSIONID 확인

위의 예시에서는 쿠키만 사용한 것이 아니고 세션스토리지와 같이 사용한 예시이다.

처음 서버에 요청 시 세션 ID를 발급 받아서 (JSESSIONID) 이것을 쿠키에 저장한다,
그리고 다시 접속 할 때 이 쿠키 값을 이용해서 세션 ID값을 서버에 계속해서 전송하는 것이다.
쿠키는 자동으로 전송이 되기 때문에 세션 아이디에 따른 처리를 할 수 있다.

정보 확인 : https://sdevstudy.tistory.com/27

 

참고

• https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
• https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
• https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage