Cookie

브라우저에 데이터는 어떻게 저장해야할까?

- 브라우저에서 개발을 진행하다보면 현재 클라이언트의 브라우저에 데이터를 저장해야하는데 다양한 방법이 있다고 합니다.

1. 쿠키
2. 로컬스토리지
3. 세션스토리지
4. 인덱스 데이터베이스

위의 4가지 방법들이 있는데 어떤 개념들로 이루어져있고 특징들을 알아볼려고 합니다.

 

Cookie

쿠키는 무엇인가요?

- 쿠키는 브라우저에 저장되는 가장 작은 문자열로 이루어져있다고 합니다.

- RFC6265에 명세되어 있는 HTTP 프로토콜의 일부라고 합니다.

주로 웹서버에서 만들어지며 주로 사용방법으로는 HTTP 응답 헤더에 Set-Cookie에 내용을 넣어 전달하고 브라우저는 이 내용을 브라우저에 저장합니다.

주 특징으로는 4KB정도의 데이터 용량을 가질 수 있습니다. 또한 도메인 하나당 20개 정도의 쿠키를 저장할 수 있다고 합니다.

사용 용도

쿠키의 주로 사용되는 곳은 인증방식에 많이 쓰인다고 합니다.

사용자가 로그인하는 서버에 HTTP 헤더에 Set-Cookie에 담긴 세션 식별자 정보를 이용해 쿠키를 설정하고 동일 도메인에 접속하려고하면 브라우저에서 HTTP Cookie 헤더에 인증정보가 담긴 세션 식별자 정보를 서버에 요청할시에 같이 전달합니다. 그리고 그 서버가 헤더에 담긴 세션 식별자를 읽어서 사용자를 인증방식에 판별합니다.

 

위의 방식처럼 사용될 수 있고 다른 방법으로는 GA(Google Analystics)처럼 데이터를 수집할때도 사용되거나 작은양의 데이터를 저장할때도 사용됩니다.

사용 방법

document.cookie를 이용해서 쿠키에 접근할 수 있습니다. 

 

쿠키를 읽는 방법은 아래와 같이 읽을 수 있습니다.  

console.log(document.cookie);

// cookie1=value1; cookie2=value2;...

아래와 같이 하나의 문자열 처럼 데이터를 가져오는데 name=value로 이루어져있고 ;를 통해서 구분합니다. 
그래서 각자의 쿠키를 가져오기 위해서 정규식이나 배열 관련 함수를 통해서 커스텀 getCookie(name)을 만들어서 쿠키 데이터를 읽어올 수 있습니다.

수정(저장) 방법에는 document.cookie로 다시 데이터를 수정, 저장할 수 있습니다.

읽는 방법과 수정(저장)방법에 같은 document.cookie를 사용하는데 cookie는 데이터 프로퍼티가 아니고 접근자 프로퍼티이기때문에 가능합니다.  그래서 다른 쿠키에 영향을 받지않고 원하는 쿠키 데이터를 수정할 수 있습니다.

 

수정(저장) 방법은 아래와 같이 쿠키값을 갱신할 수 있습니다. 

document.cookie='test=123';
console.log(document.cookie);

//test=123; a=1; b=2; ...

 

쿠키에 사용되는 옵션들

1. path

- path의 경우 현재 경로나 경로의 하위에 있는 페이지에만 쿠키를 접근할 수 있게 설정할 수 있습니다. 절대경로로 설정해야합니다. Default는 현재 경로입니다.

 

예시로 아래와 같이 사용할 수 있습니다.

document.cookie='test=123; path=/admin;'

위 방식은 /admin, /admin/test와 같은 페이지에서 cookie를 사용할 수 있지만 /home같은 다른 경로에서는 사용할 수 없습니다.

 

2. domain

- 쿠키에 접근 가능한 도메인을 설정할 수 있습니다. Default로는 쿠키를 설정한 도메인에서 사용할 수 있습니다. 

서브 도메인에서는 사용할 수 없는 경우가 생기는데 아래와 같이 해결방법이 있습니다.
개발하면서 겪엇던 문제로 www.test.com에서 사용하는 cookie를 abc.test.com에서는 사용할 수 없었던 경험이 있었는데 다음과 같이 설정해서 사용할 수 있었습니다. 

 

document.cookie = 'test=123; domain=.test.com;'

앞에 .을 붙인경우는 하위 호환성 (구식 브라우저)을 위해서 저런방식으로도 사용되고 test.com으로도 사용할 수 있습니다.

3. expire / max-age

- expire나 max-age 옵션이 적혀 있지 않으면 브라우저가 닫힐 때 쿠키도 같이 삭제됩니다. 이런 쿠키를 세션 쿠키라고 부르기도 합니다.
그래서 옵션 설정을 통해서 쿠키 삭제를 방지해서 계속 브라우저 데이터를 유지해 사용합니다.

expires=Tue, 19 Jan 2038 03:14:07 GMT

 

위의 방식은 expires에 명시된 날짜까지 쿠키를 유지하고 이후에 삭제합니다.

 

쿠키 유효일자는 반드시 GMT 형식으로 해야하고 date.toUTCString을 사용해서 쉽게 만든다고 합니다.

위의 데이터 형식의 대안으로 max-age의 경우는 현재부터 설정하고자 하는 만료일까지 시간을 초로 환산한 값을 설정하는데 그러면 더 편하게 사용자 입장에서 쿠키 만료일을 설정할 수 있습니다.

 

// 1시간 뒤에 쿠키가 삭제됩니다.
document.cookie = "test=123; max-age=3600";

// 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함
document.cookie = "test=123; max-age=0";

 

4. secure

- 이 옵션은 https 통신하는 경우에만 서버 헤더에 쿠키 정보를 담아 전송되도록 합니다.
secure 옵션이 없으면 기본 설정이 적용되어 http://test.com에서 설정(생성)한 쿠키를 https://test.com에서 읽을 수 있고, https://test.com에서 설정(생성)한 쿠키도 http://test.com에서 읽을 수 있습니다.

 

5. samesite 

- samesite 옵션은 크로스 사이트 요청 위조(cross-site request forgery, XSRF) 공격을 막기 위해 만들어진 옵션입니다.

크로스 사이트 요청 위조의 예시로는 현재 www.test.com에서 저장된 쿠키 정보가 있는데 다른 www.black.com에 실수로 접속했다고 가정하면 그 사이트에서 기존 사이트에서 접속하는 서버에 요청시에 기존 쿠키정보를 가지고 사용자가 같다고 인식하여 정보를 해킹할 수 있는 경우입니다.

그래서 옵션을 설정하여 보안적으로 강화 시키도록 권유되고 있습니다.

strict과 lax 두가지 방법으로 samesite 옵션값을 설정할 수 있으며 strict의 경우 절대로 사이트 외부에서 요청을 보낼시에 쿠키는 절대로 전송되지 않으며 lax는 예외 사항이 존재하는데 안전한 HTTP인경우, 작업이 최상위 레벨탐색에서 이루어지는 경우에는 쿠키를 보낼 수 있습니다.  

 

오래된 브라우저에서는 samesite 옵션을 지원하지 않는다고 합니다.

 

6. httpOnly

- httpOnly 옵션은 웹서버에서 Set-Cookie 헤더를 이용해 쿠키를 설정할 때 지정할 수 있습니다. 이 옵션은 자바스크립트 같은 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 합니다. document.cookie를 통해 쿠키를 볼 수도 없고 조작할 수도 없습니다.

위의 옵션을 설정해서 XSS(Cross-site scripting) 해킹을 막을 수 있습니다. XSS는 웹사이트에 스크립트를 심어서 쿠키를 통해 해킹을 시도하는것입니다.