EventTarget > Node > Document > [[Prototype]]
현재 문서와 관련된 쿠키(cookie)를 조회하거나 설정한다.
쿠키는 보통 과자를 의미하는 단어이지만 웹에서는 전혀 다른 의미로 사용된다. 웹에서의 쿠키는 클라이언(사용자의 장치)의 드라이브에 아주 제한적으로 간단한 문자열 데이터를 저장할 수 있는 특별한 기술이다. 게다가 저장되는 데이터의 만료일시를 지정해서 유효 시간이 경과되면 자동으로 폐기된다. 아마도 이러한 특징 때문에 쿠키라는 이름이 생겨나지 않았나 싶다. 귀여운 이름이라 입문자들은 만나기 전에 다양한 상상을 하겠지만 그 귀여움 뒤에는 감내해야 하는 까탈스러움이 도사리고 있다는 사실을 곧 알게 될 것이다.
쿠키는 웹사이트 사용자만의 데이터를 저장하기 위한 용도로 등장했다. 사용자만의 데이터는 다음과 같은 경우를 들 수 있다.
위의 항목들은 보안이라는 특수한 상황을 고려해서 적절하게 설계되어 쿠키 데이터로 사용되어야 한다. 특히 공공 장소에서 사용되는 장치의 경우에는 데이터가 로컬에 그대로 남게 되므로 악용될 소지가 있다. 따라서 저장할 데이터가 익명으로 처리될 수 있는 데이터이어야 하며 그렇지 않다면 다른 방법을 사용해야 한다. 이러한 민감한 이유로 사용자 데이터를 수집해야만 하는 웹서비스인 경우에는 국가에 따라 법적으로 사용자 동의를 받도록 하는 조항까지 생겨났다. 쿠키는 서비스하는 입장에서는 매우 달콤한 기술이지만 서비스를 받는 입장에서는 불편한 결과가 될 수 있으므로 주의해서 활용해야 할 것이다.
미리 이야기 한다면 쿠키 기술을 통해서 데이터를 저장하는 일은 간단하지가 않다. document.cookie 프로퍼티에 저장할 값을 대입하는 것만으로 가능한 일이 아니기 때문이다. 즉 다음과 같이 보통 그렇게 하듯이 프로퍼티에 값을 대입한다고 가정해보자.
document.cookie = "my data!";이것은 마치 쓰기 가능한 프로퍼티에 값을 저장하는 것과 다르지 않아 보인다. 그리고 또 다른 데이터는 어떻게 쿠키로 저장해야 하는가? 다른 쿠키로 저장할 데이터도 위의 코드처럼 대입해야 하나? 그렇다면 이전 데이터는 덮어 씌워지는 것아 아닌가? 게다가 이 데이터는 24시간이 지나면 폐기되어야 한다면 그러한 정보를 어떻게 표현해야 하나? 바로 이러한 의문점들이 단순히 원하는 데이터를 document.cookie 프로퍼티에 대입하는 것만으로 가능하지 않다는 의미이다. 앞서 까탈스러움이 숨겨져 있다고 하지 않았던가.
자 이제 우리는 특별한 사실을 알아야 할 것 같다. document.cookie 프로퍼티에 값을 할당하는 것은 일반 프로퍼티에 값을 할당하는 것과 다르게 동작한다는 사실이다. 할당된 최후의 값만을 갖는 것이 아니라 누적되는 방식으로 추가적으로 할당되는 데이터를 처리한다. 그러니까 document.cookie 프로퍼티는 일종의 쿠키 시스템에 데이터를 전달하는 배달부인 셈이다. 그런데 이 배달부에게는 특별한 프토토콜을 사용해야만 정확히 배달을 해준다. 즉 다음과 같은 특별한 형식을 가지고 있는 문자열이어야 한다.
[name]=[value]; expires=[UTC Time]; path=[path]; domain=[domain]; source; samesite=[option]쿠키로 데이터를 저장하기 위해서 위와 같은 형식의 문자열이 필요하다. 위의 형식을 보면 다음과 같이 몇 가지 영역으로 나눌 수 있다. 이 영역은 각각 세미콜론(;)으로 구분되어 있다.
[name=value]로 표시된 항목은 저장할 데이터를 설정하는 형식을 나타낸다. 이름과 값은 원하는 대로 지정한다. 필수 설정 사항으로 반드시 저장할 데이터를 설정해야 한다.
expires=[UTC Time]으로 표시된 항목은 쿠키로 저장될 데이터의 사용 만료 시간을 설정하는 형식을 나타낸다. Date.prototype.toUTCString() 메소드를 사용하여 반환된 값으로 설정하면 된다. expires의 대체로 max-age 옵션을 사용할 수도 있다. max-age는 생성 후 원하는 만료일시까지의 경과 시간을 초로 환산해서 설정하면 된다. 선택 사항으로 설정하지 않으면 현재 쿠키로 저장되는 데이터는 웹브라우저 종료와 함께 삭제된다.
path=[path]로 표시된 항목은 쿠키를 사용할 수 있는 문서의 경로를 지정한다. 현재 문서가 설정된 이 경로 내에 있어야만 쿠키로 저장된 데이터에 접근이 가능하다. 선택 사항으로 설정하지 않으면 전체 경로로 지정되며 허용된 도메인하에서 어떠한 경로이든 쿠키로 저장된 데이터에 접근이 가능하다.
domain=[domain]으로 표시된 항목은 쿠키로 저장된 데이터에 접근 가능한 도메인을 지정한다. 선택 사항으로 생략하면 쿠키를 저장한 도메인에서만 접근이 가능하다.
source와 samesite=[option]로 표시된 항목은 모두 보안과 관련된 선택적으로 설정하는 필드이다.
먼저 source 항목은 on/off 형식의 값을 가지며 source 키워드가 지정되면 on이고 그렇지 않으면 off이다. source가 on이면 HTTPS 프로토콜에서만 쿠키 전송이 가능하다. 현재 HTTPS를 사용 중이고 쿠키로 저장되는 데이터가 보안에 민감하다면 설정하는 것이 좋다.
이어 samesite=[option] 항목은 크로스 도메인 정책과 관련되어 있다. 즉 교차 사이트 요청시 어떻게 처리할 것인지를 나타낸다. 설정할 수 있는 옵션은 다음과 같다.
strict : 기본값이며 samesite 키워드만 지정해도 동일하다. 이 값은 교차 사이트 요청을 허용하지 않는다. XSRF 공격을 차단하는 데 효과적이다. 그러나 사용상의 제약이 따를 수 있다.lax : 다음과 같이 선택적으로 교차 요청을 허용하므로 느슨한 보안 처리를 한다.다소 복잡한 방식으로 데이터를 저장하는 것 만큼이나 쿠키로 저장된 데이터를 읽어 오는 것 또한 만만치가 않다. 읽을 때에도 document.cookie 프로퍼티를 사용한다. 이때 조회되는 문자열 데이터의 형식은 다음과 같다.
[name1]=[value1]; [name2]=[value2]; ...; [nameN]=[valueN]; [user-agent values]이 문자열 형식을 보면 쿠키로 저장된 데이터는 세미콜론(;)으로 구분된 항목으로 존재한다. 그리고 각각 name=value 세트로 구성된다. 그런데 쿠키 데이터만으로 구성되어 있으면 좋으련만 그게 또 그렇지가 않다. 웹브라우저에 따라 다양한 값들이 세미콜론(;}으로 구분된 대열에 참여한다. 그런데 필요한 것은 해당 데이터 이름의 값이다. 따라서 조회된 전체 문자열에서 구하고자 하는 데이터의 이름에 '='로 연결된 문자열을 찾으면 된다. 그래서 만만치가 않다는 것이다. 쿠키를 저장하고 읽은 행위가 빈번하다면 자체적으로 함수를 구현해서 사용해야 하는 것이 백번 옳다. 그리고 해당 데이터 이름에 연결된 값을 찾는 로직은 다양하다. 보통 정규식을 사용하거나 String 객체의 메소드를 사용해서 구현한다. 입문자나 초보자에게는 쉽지 않은 미션이다. 하지만 세월이 흐르면 스스로 구현할 수 있다는 것을 믿고 당장 지금은 공개된 오픈 소스를 활용하는 것도 나쁘지 않다. 제법 많은 오픈 소스들이 여러분들을 기다리고 있다.
지금까지 쿠키에 대하여 주요 내용들을 알아보았다. 긴 내용만큼이나 심플하지 않다는 것을 알게 될 것이다. 사실 document.cookie 프로퍼티로 쿠키를 다루는 방식은 상당히 오래 되었다. 현대의 웹에서는 이제 쿠키보다 역할이 세분화되고 접근성이 뛰어난 클라이언트 데이터 저장 기술인 Stroage 객체를 제공하고 있다. 자세한 내용은 해당 섹션을 참고하기 바란다.
document.cookie| 분류 | 값 | 설명 |
|---|---|---|
| writable | yes |