[JS] 쿠키(Cookie) 다루기

 

 

 

 

선행 학습

[WEB] 🌐 쿠키 / 세션 정리

 inpa.tistory.com

비연결성(Connectionless)과 비상태성(Stateless) HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)이라는 특징이 있습니다. 이는 서버의 자원을 절약하기 위해 모든 사용자의 요청마다 연결

---

Cookie란?

Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다.

​

어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가?

아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가?

 

사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다.

​

쿠키를 알아보기 전, 쿠키가 저장되는 방식은 key : value 방식임을 기억해두자.

Tip

ex) username = 홍길동

브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다.

이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다.

---

💡 쿠키와 세션의 차이는?

쿠키는 사용자가 브라우저의 쿠키데이터를 비우거나 금지하지 않는다면 계속해서 유지가 된다.

이와 달리 세션 저장소의 경우 방문자가 접속해 세션이 발생하고 지정된 시간이 지나 세션이 종료되면 저장소의 내용도 사라지게 된다는 점이 차이점이다.

 

💡 브라우저에서 쿠키 확인하는 법

​크롬에서 쿠키 확인하는 방법은

개발자도구(F12) 에서 Application 탭 Cookies 에서 확인하면 된다.

---

자바스크립트를 이용한 Cookie 만들기

자바스크립트는 document.cookie 속성을 이용하여 쿠키를 create, delete, read 할 수 있다.

​

read

document.cookie는 name=value 쌍으로 구성되어있고, 각 쌍은 ;로 구분한다.

이때, 쌍 하나는 하나의 독립된 쿠키를 나타낸다.

;을 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있다.

var x = document.cookie; // cookie1=value1; cookie2=value2;...

​

write

	// Name이 user고, Value가 John인 쿠키 추가
	// 그리고 속성값으로 path와 expires를 설정해서 추가
	// 이 속성값은 쿠키 스트링에 저장되지는 않고 속성정보에 저장된다.
	document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

 

① Name 속성과 Value 속성

  · Name과 Value 속성은 데이터를 저장하고 읽는 데 사용하는 속성이다.

  · 따라서 쿠키를 사용할 때는 Name과 Value 속성을 반드시 지정해야 한다.

 

② Expires 속성

  · Expires 속성은 쿠키의 파기 날짜를 지정하는 속성이다.

  · Expires 속성에는 GMT 형식이나 UTC 형식으로 날짜를 입력해야 한다.

  · 파기 날짜를 입력하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

 

③ max-age 속성

는 expires 옵션의 대안으로, 쿠키 만료 기간을 설정할 수 있게 해준다.

현재부터 설정하고자 하는 만료일시까지의 시간을 초로 환산한 값을 설정한다.

	// 1시간 뒤에 쿠키가 삭제됩니다.
	document.cookie = "user=John; max-age=3600";
	// 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함
	document.cookie = "user=John; max-age=0";

​

④ Secure 속성

  · Secure 속성을 지정하면 해당 쿠키는 SSL을 사용해서만 요청할 수 있다.

​

⑤ Domain 속성

  · Domain 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.

  · 페이지 요청과 비교해서 도메인의 경로와 Domain 속성이 일치하지 않으면, 쿠키에 접근하는 것을 막으므로 Domain 속성은 건드리지 않는다.

​

⑥ Path 속성

  · Path 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.

  · Path 속성은 일부러 지정하는 경우가 많은데 특정 경로(폴더명)를 설정한다.

  · Path 속성은 /폴더/ 로 설정되는데, 이렇게 설정한 Path 속성이 설정되면 현재 폴더 또는 현재 폴더의 하위에서 접근할 수 있다.

  · Path 속성을 ' / '로 설정하면 도메인 내의 모든 곳에서 접근할 수 있다. (쿠키의 범위를 좁게 잡을 수록 보안에는 좋다.)

 

⑥ HttpOnly 속성

  · 설정 시 자바스크립트에서 쿠키에 접근할 수 없습니다. 쿠키 조작을 방지하기 위해 설정하는 것이 좋습니다.

 

​

create

	// document.cookie = "쿠키이름=쿠키값"
	document.cookie = "username = 홍길동";
	// 만료기간을 넣어서 쿠키가 자동 만료 되도록 제작할 수 있다.(UTC time을 이용)
	document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
	// 파라미터를 이용하여 쿠키가 어디 브라우저에 속할 수 있을지 알려줄 수 있다.
	document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

 

change

document.cookie= 는 getter와 setter같이 동작한다고 이해하면 된다.

setter를 수행할때 모든 쿠키를 덮어쓰지 않고, 명시된 쿠키인 user의 값만 갱신한다.

​

쿠키의 이름과 값엔 특별한 제약이 없기 때문에 모든 글자가 허용된다. 하지만 형식의 유효성을 일관성 있게 유지하기 위해 반드시 내장 함수 encodeURIComponent를 사용하여 이름과 값을 이스케이프 처리해 줘야 하는게 좋다.

	// Name이 user고, Value가 John인 쿠키 추가
	// document.cookie = 했다고 초기화되는게 아니라, setter처럼 작동하게 된다.
	// 그래서 = "user=John"하면 전체가 'user=john'이 되는게 아니라 '+= user=john'이 추가되게 된다.
	document.cookie = "user=John";

​

delete

만료 기간을 과거로 바꾸어 버리면 된다.

단, 쿠키 요소를 삭제할때 반드시 path를 맞춰야 한다. 삭제가 안된다면, 개발자도구에서 쿠키path를 필히 확인 해 볼것

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

	// max-age 사용
	// 1시간 뒤에 쿠키가 삭제됩니다.
	document.cookie = "max-age=3600";
	// 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함
	document.cookie = "max-age=0";

Tip

​! 쿠키의 한계
쿠키엔 몇 가지 제약 사항이 있다.
encodeURIComponent로 인코딩한 이후의 name=value 쌍은 4KB를 넘을 수 없다. 이 용량을 넘는 정보는 쿠키에 저장할 수 없다.
도메인 하나당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있다. 개수는 브라우저에 따라 조금씩 다르다.

---

쿠키 함수 라이브러리

쿠키동작을 함수로 모듈화하여 간편하게 쿠키를 다룰수 있도록 하는 helper함수들이다.

 

@get

	// 주어진 이름의 쿠키를 반환하는데,
	// 조건에 맞는 쿠키가 없다면 undefined를 반환합니다.
	function getCookie(name) {
	let matches = document.cookie.match(new RegExp(
	"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
	));
	return matches ? decodeURIComponent(matches[1]) : undefined;
	}

​

@set

	function setCookie(name, value, options = {}) {
	options = {
	path: '/', // 경로 지정
	...options // 아규먼트로 옵션을 넘겨줬을경우 전개연산자로 추가 갱신
	};
	if (options.expires instanceof Date) {
	options.expires = options.expires.toUTCString(); // 생 Date 객체라면 형식에 맞게 인코딩
	}
	let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
	for (let optionKey in options) {
	updatedCookie += "; " + optionKey;
	let optionValue = options[optionKey];
	if (optionValue !== true) { // 밸류가 없다면
	updatedCookie += "=" + optionValue;
	}
	}
	document.cookie = updatedCookie; // 새로 갱신
	}
	//쿠키 생성
	if (!document.cookie) {
	setCookie('expires', date.toUTCString());
	console.log('new Cookie created !');
	}
	// 쿠키 추가
	setCookie('user', 'John', {secure: true, 'max-age': 3600});

​

@delete

	function deleteCookie(name) { // 해당 쿠키 요소만 삭제
	setCookie(name, "", {
	'max-age': -1
	})
	}

​

@deleteAll

	function deleteAllCookies() {
	var cookies = document.cookie.split(";");
	for (var i = 0; i < cookies.length; i++) {
	var cookie = cookies[i];
	var eqPos = cookie.indexOf("=");
	var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
	deleteCookie(name.trim());
	}
	console.log('all cookies deleted !')
	}

---

(부록) 서드파트 쿠키

사용자가 방문 중인 도메인이 아닌 다른 도메인에서 설정한 쿠키를 "서드 파티 쿠키(third-party cookie)"라고 부릅니다.

​

예시:

1. site.com의 특정 페이지에서 이미지 배너(banner)를 불러옵니다. 배너는 다른 도메인

<img src="https://ads.com/banner.png">

에서 가져옵니다.

​

2. ads.com에 있는 원격 서버는 배너와 함께 Set-Cookie 헤더를 전송해 브라우저가 id=1234와 같은 쿠키를 설정하도록 합니다. 이 쿠키는 ads.com 도메인에서 설정한 것이기 때문에 ads.com에서만 볼 수 있습니다.

​

3. 사용자가 ads.com에 다시 접속하면, 원격 서버는 요청과 함께 전송받은 쿠키의 id를 이용해 해당 유저를 인식합니다.

​

4. 사용자가 site.com을 떠나 other.com에 접속하고 이 사이트에도 배너가 있으면 ads.com은 또 쿠키를 전송받습니다. 이 쿠키는 ads.com에서 설정한 것이기 때문이죠. 이를 이용해 ads.com은 사용자를 인식하고, 이 사용자가 어떤 사이트로 이동했는지를 추적합니다.

​​

광고회사는 사용자의 이용 행태를 추적하고, 광고를 제공하기 위해 오래전부터 서드 파티 쿠키를 사용하고 있습니다.

서드파티 쿠키는 쿠키를 설정한 도메인에 종속되기 때문에 ads.com은 사용자가 어떤 사이트를 방문했는지 추적할 수 있습니다.

그런데 사람들은 누군가 자신을 감시하는 걸 좋아하진 않습니다. 브라우저엔 이런 쿠키를 비활성화 할 수 있는 기능이 있는데, 이 기능을 사용하면 추적을 막을 수 있습니다.

 

여기에 더하여 몇몇 모던 브라우저는 서드 파티 쿠키를 위한 특별한 정책을 도입하여 광고회사의 추적을 막을 수 있게 합니다.

​

- Safari는 서드파티 쿠키를 전면적으로 허용하지 않습니다.

- Firefox는 서드 파티 도메인 "블랙 리스트(black list)"를 만들어 리스트에 오른 도메인의 서드 파티 쿠키를 차단합니다.

 

 

 

Tip

주의:

script src="https://google-analytics.com/analytics.js"
같은 태그로 서드 파티 도메인에서 스크립트를 읽어오고, 이 스크립트 안에 document.cookie로 쿠키를 설정하는 코드가 있다면, 이때 만들어진 쿠키는 서드파티 쿠키가 아닙니다.
스크립트에서 쿠키를 설정한 경우에 만들어지는 쿠키는 현재 페이지의 도메인에 속하게 됩니다. 스크립트의 유래와 상관없이 말이죠.

 

 

출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%BF%A0%ED%82%A4Cookie-%EB%8B%A4%EB%A3%A8%EA%B8%B0

 

* 후기

잘 정리돼있어서 get set 만 활용해도 쓸 수 있었다 글도 복붙만 해도 따로 수정이 필요 없을정도