쿠키

Hyemimi·2023년 3월 25일

WEB

목록 보기

3/5

웹 저장소 ??

초기 웹

웹 서비스 중 발생하는 모든 정보를 웹 서버에 저장해두도록 설계
웹 브라우저 → 웹 서버로부터 데이터를 받아서 사용자 화면에 출력하는 기능만 담당

HTML5

사용자 컴퓨터에도 데이터를 저장
웹 서버와 연결이 끊어진 상태에서도 브라우저 상에서 웹 애플리케이션이 실행될 수 있음

💡 쿠키, 웹 스토리지, 로컬 파일, 인덱스트 데이터베이스(Indexed DB7)

쿠키

웹 서버가 브라우저에게 지시하여 사용자의 로컬 컴퓨터에 저장하는 4KB 이하의 작은 데이터

1. 쿠키 사용 목적

HTTP
(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고 받기 위해 서버/클라이언트 모델을 따르는 통신규약

비연결성(Connectionless), 비상태성(Stateless): 연결 상태 유지 x, 상태 정보 저장 x

즉, 매 요청마다 새로운 사용자로 인식함

하지만 로그아웃을 따로 하지 않고 종료했는데도 다시 들어가면 로그인이 되어있는 웹 사이트가 있다!

⇒ 쿠키, 세션

로그인, 사용자 닉네임, 접속 시간, 장바구니 등의 서버가 알아야 할 정보들을 저장
개인화(Personalization) 사용자마다 다르게 그 사람에 적절한 페이지를 보여줌
트래킹(Tracking) 사용자의 행동과 패턴을 분석하고 기록

실제 웹사이트에서의 쿠키 살펴보기 ZARA South Korea / 대한민국 | 새로운 컬렉션 온라인

2. 쿠키 데이터 구성

로컬 컴퓨터에는 사용자가 접속한 여러 웹 사이트로부터 받은 많은 쿠키들이 저장되어 있음
세미콜론(;)으로 구분되는 7개의 속성으로 구성, 웹 서버가 보냄
전부 다 보내지는 않음, 생략될 수도 있음

name=value; Expires=[Date]; Domain=[Domain]; Path=[Path]; [Secure]; [HttpOnly]; 
[SameSite=None|Strict|Lax]

name : 쿠키 이름
value : 쿠키 값
Date : 쿠키의 유효시간
Domain : 쿠키를 필요로 하는 웹 서버의 도메인
Path : 쿠키를 필요로 하는 웹 페이지 경로
Secure : 쿠키에 있으면 암호화 등 안전한 통신이 사용될 때만 쿠키 전송 가능하다는 의미
HttpOnly : 웹 서버와의 HTTP 통신 외에 다른 통신으로 쿠키 전송 불허 (보안에 중요, 자바스크립트 코드로도 쿠키를 읽을 수 없음 !) Facebook이나 Google에서 많이 활용하고 있는 속성)
SameSite
- SameSite=None : Secure 속성이 함께 설정되어야 함
- SameSite=Strict : 쿠키를 받은 브라우저가 쿠키를 발행한 웹 사이트에 직접 요청할 때만 쿠키 전송
- SameSite=Lax : Strict + 사용자가 다른 사이트에 접속하고 그곳에서 쿠키를 발행한 사이트로 이동할 때도 쿠키 전송, SameSite가 생략되면 Lax가 디폴트

예시

age=23; expires=Mon, 31-DEC-2023 00:00:01 GMT; Domain=.google.com; Path=/; Secure;
 HttpOnly; SameSite=None

쿠키의 이름은 age, value는 23 / 유효 시간은 2023년 12월 31일까지 / 안전한 통신을 사용할 때만 쿠키 전송이 가능합니다(Secure). HttpOnly 속성이 있으므로 HTTP로 구글 사이트와 통신하는 방법 외 어떤 경우라도 쿠키를 알려줄 수 없습니다 ~

3. 쿠키 단점

서버가 가지고 있는 것이 아니라 사용자에게 저장됨 ⇒ 임의로 고치거나 지울 수 있고, 가로채기 쉬움 (위의 예시.)
따라서, 보안 취약 ⇒쿠키에는 민감하거나 중요한 정보를 담는 것은 위험하다
지워져도 되고, 가로채더라도 큰 일이 없을 수준의 정보들을 저장할 것
그렇다면 로그인 처리 ??? 아래 벨로그 참조

🍪 프론트에서 안전하게 로그인 처리하기 (ft. React)

4. 자바스크립트에서 쿠키 다루기!

현재 브라우저가 접속한 웹 사이트의 모든 쿠키들은 document.cookie프로퍼티에 문자열 형태로 연결되어 있다.

(1) 저장하기

function SetCookie (name, value, expireDate) {
	let cookieStr = name + "=" + escape(value) + ((expireDate == null) ? "" : 
("; expires="
  + expireDate.toUTCString()));
	document.cookie = cookieStr;
}

escape(쿠키문자열) ⇒ 인코딩 하여 저장( 문자열을 ISO Latin-1 코드로 변환하는 자바스크립트 함수

🔼 쿠키를 저장해보았다 name은 “쿠키”, value는 “이히히” (이외 다른 속성들은 생략함)

🔼 쿠키 확인

(2) 꺼내오기

function GetCookie (name) {
	let pairs = document.cookie.split(";"); // ;을 경계로 분할
	for(let i=0; i<pairs.length;i++){
		let pair = pairs[i].trim(); // 앞뒤 빈칸 제거
		let unit = pair.split("=");
		if(unit[0] == name)
			return unescape(unit[1]);
	}
	return null;
}