쿠키와 클라이언트 측 지속성

 

19장 쿠키와 클라이언트 측 지속성

이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
 

19.1 쿠키 개요
19.2 쿠키 저장하기

19.3 쿠키 읽기

19.5 쿠키의 대안들
19.5.6 지속되는 데이터와 보안

Document객체에는 cookie는 서버 측 스크립트에서도 사용되며 HTTP 프로토콜을 확장한 표준 기능 중 하나다.

 

 

19.1 쿠키 개요
'쿠키'는 이름을 가진 소량의 데이터이며 웹 브라우저에 의해 저장되고 특정 웹 페이지나 웹 사이트와 연결되어 있다. 이것은 웹 사이트에 기억력을 부여함으로써 한 페이지에서 입력되었던 자료를 다른 페이지에서 스크립트나 서버 측 프로그램이 사용할 수 있게 해주고 사용자가 웹 페이지를 떠났다가 다시 돌아 왔을때 기존의 사용자 설정이나 기타 상태 변수들을 재생할 수 있다. 쿠키는 본래 서버 측 프로그램 작성을 위해 설계되었으며 가장 하위 레벨에서 보자면 HTTP 프로토콜의 확장처럼 구현되어 있다. 쿠키 데이터는 웹 브라우저와 웹 서버 사이에서 자동으로 전송되기 때문에 클라이언트에 저장된 쿠키값을 서버 측 스크립트에서 읽거나 쓸 수 있다.

 

cookie는 문자열 프로퍼티로서 웹 페이지에 적용되는 하나 또는 그 이상의 쿠키를 읽고 생성하고 변경하고 삭제할 수 있다. cookie의 값을 읽으면 현재 문서에 적용되는 모든 쿠키들의 이름과 값을 담고 있는 문자열을 얻는다. 각 쿠키에는 이름과 값 외에도 그 쿠키의 유효기간, 가시범위, 보안 등을 제어하는 선택적 속성들이 존재할 수 있다. 본래 쿠키는 일시적인 존재로 쿠키에 저장되는 값은 웹 브라우저 세션 기간동안에는 보존되지만 사용자가 브라우저를 종료하면 쿠키의 값을 잃어버리게 된다.

max-age 어트리뷰트는 쿠키의 유효 기간을 초 단위로 지정한다. expires나 max-age 중 하나가 설정되어 있으면 브라우저는 나중에 이 사용자가 다시 웹 페이지를 방문할 때 사용하기 위해서 쿠키를 로컬 파일에 저장해 놓고 지정된 유효 기간이 초과된다면 파일에 저장되었던 쿠키는 브라우저에 의해 자동으로 삭제된다.

path 어트리뷰트는 어떤 쿠키와 연결된 웹 페이지를 지정하는데 쓰인다. 기본 설정으로 쿠키에 연결된(그리고 그 쿠키가 접근할 수 있는) 웹 페이지는 바로 그 쿠키를 생성한 웹 페이지, 그리고 그와 같은 디렉터리나 하위 디렉터리에 속한 모든 웹 페이지들이다.
그러나 같은 웹 서버에 있는 어떤 페이지라도 그 페이지 URL에 앞서 path 어트리뷰트에 지정했던 경로가 포함되어 있기만 하면 이 쿠키를 공유할 수 있다. 기본적으로 쿠키는 그 쿠키가 얻어진 웹 서버에 속한 페이지들에 한해서만 접근할 수 있다. 여러 웹 서버에서 쿠키를 공유하려 할때는 domain 어트리뷰트가 설정되어 있지 않다면 디폴트 도메인은 해당 페이지가 속한 웹 서버의 호스트네임이다.

secure라는 불리언 어트리뷰트는 쿠키값들이 네트워크를 통해서 전송되는 방법을 지정한다. 기본적으로 쿠키는 보안이 설정되지 않은 통상적인 HTTP 연결을 통해서 전송된다. 하지만 secure 어트리뷰트가 설정되었다면 브라우저와 서버가 오직 HTTPS 내지는 기타 보안 프로토콜로 연결되었을 때만 이 쿠키가 전송된다.

한가지 유의할 점은 쿠키 어트리뷰트가 자바스크립트 객체 프로퍼티가 아니라는 점이다.

 

 

19.2 쿠키 저장하기
일시적 쿠키를 현재 문서에 연결하려면 간단히 다음과 같은 형태의 문자열을 cookie 프로퍼티에 설정하면 된다.

// 이름 = 값
document.cookie = "vertion=" + encodeURIComponent(document.lastModified);
 

쿠키 값에는 세미콜론, 쉼표, 공백이 포함될수 없으므로 쿠키값을 저장하기에 앞서 코어 자바스크립트 전역 함수인 encodeURIComponent()를 사용해서 그 값을 인코딩해야 하고 인코딩된 쿠키값을 읽을 때에는 위 함수에 대응하는 decodeURIComponent() 함수를 사용해야 한다.
지속되는 쿠키를 생성하려면  max-age 어트리뷰트를 사용해서 쿠키의 유효 기간을 초 단위로 지정하면 된다.

쿠키에 설정된 값을 삭제하려면 기존과 동일한 이름, 경로, 도메인에 임의의 값을 지정하고 max-age 어트리뷰트를 0으로 설정하면 된다.

 

19.2.1 쿠키의 한계
쿠키는 본래 적은 데이터를 가끔 저장하려는 목적으로 설계되었다. 최소 총 300개의 쿠키를 유지할 것, 웹 서버 당 최소 스무개의 쿠키를 유지할 것(전체 웹 서버를 말하는 것이며 그 웹 서버에 속한 하나의 페이지나 하나의 사이트를 말하는것이 아님) 쿠키당 최소 4킬로바이트의 데이터를 유지하는것이 좋다.

 

 

 

19.3 쿠키 읽기
자바스크립트 표현식에 cookie 프로퍼티를 사용할 때 cookie 프로퍼티에서 반환되는 값은 현재 문서에 적용되는 모든 쿠키를 포함하는 문자열이다. 이 문자열은 세미콜론으로 구분된 이름=값 쌍들의 나열이며 여기서 이름은 쿠키의 이름이고 값은 문자열의 값이다. 이때 이 이름을 가진 쿠키에 설정되어 있는 어트리뷰트들은 cookie 프로퍼티를 통해 얻어지는 이름 = 값 쌍의 문자열 값에 포함되지 않는다. 특정 이름을 가진 쿠키의 값을 판별하려면 String.indexOf()나 String.substring() 메서드를 사용하거나 String.split()으로 문자열을 잘라서 개별 쿠키들로 분리하면 된다. cookie 프로퍼티에서 일단 하나의 쿠키값을 추출해 냈다면 그 쿠키를 생성할 때 사용되었던 포맷 내지는 인코딩 방법에 따라 그 값을 해석해야 한다.

 

19.4 쿠키 예

 

 

19.5 쿠키의 대안들
쿠키를 사용할 경우 몇가지 단점이 존재한다.
- 데이터 크기가 4킬로바이트로 제한된다.
- 오직 클라이언트측 스크립트에서만 사용되는 쿠키라 할지라도 해당 쿠키가 연결된 웹 페이지가 요청될 때마다 이 쿠키도 웹 서버로 함께 업로드된다. 만일 웹서버에서 이 쿠키를 사용하지 않는다면 이는 대역폭을 낭비할 뿐이다.

쿠키를 대신할 수 있는 대안으로는 마이크로소프트 인터넷 익스플로러와 어도비 플래시 플러그인에서 클라이언트 측에 지속성을 유지하기 위한 독점적인 기법들을 각자 나름대로 정의하고 있는데 이 둘 모두 표준은 아니다.

19.5.1 IE의 userData에 의한 지속성
인터넷 익스플로러에서는 DHTML 비헤이비어를 통해 클라이언트 측의 지속성을 가능케 한다. 이 기법에 접근하려면 문서에 속한 엘리먼트에 특별한 비헤이비어를 적용해야 하는데 이를 위한 한가지 방법은 CSS를 사용하는 것이다. 

<style>.persistent{behavior:url(#default#userData)}</style>
<div id="memory" class="persistent"></div> 

하지만 behavior 속성은 표준 CSS의 일부가 아니기 때문에 IE 이외의 웹 브라우저에서는 이를 간단히 무시해버릴 것이다. 어떤 엘리먼트에 behavior스타일 속성을 설정하는 일은 자바스크립트를 통해서도 할 수 있다.  

var memory = document.getElementById("memory");
memory.style.behavior = "url('#default#userData')";

 

19.5.2 플래시의 SharedObject에 의한 속성
버전 6이나 그 이후의 플래시 플러그인에서는 SharedObject 클래스를 사용하여 클라이언트 측에 지속성을 부여할 수 있다. SharedObject 클래스는 플래시 무비의 ActionScript 코드를 사용해 스크립트로 작성될 수 있다. SharedObject 클래스를 사용하려면 먼저 다음의 ActionScript 코드를 사용해 SharedObject를 생성한다. 쿠키에서 이름을 지정하는 것과 같이 여기서도 여러분이 저장할 지속되는 데이터의 이름을 지정해야 함을 유념하라.

 

 

19.5.6 지속되는 데이터와 보안
여러분이 저장하는 모든 데이터는 암호화되지 않은 상태로 사용자의 하드디스크에 보관됨을 잊지 말아야 한다.