쿠키 & 세션 & 스토리지

쿠키와 세션 왜 쓸까?

HTTP는 Connectionless( 클라이언트는 요청을 하고 응답을 받으면 서버와 연결을 끊음 ), Stateless( 모든 클라이언트의 요청은 독립적으로 처리)한 특징이 있기 때문에 서버는 클라이언트를 구분할 수 없다. 따라서 사용자 인증같은 것을 유지하기 위해 사용한다.

쿠키

만들어진 의도가 HTTP기반의 웹 통신에서 서버는 클라이언트의 요청을 매번 독립적으로 처리하기 때문에 서버와 클라이언트가 지속적인 데이터교환을 하기위해서 만들어졌대. 그래서 쿠키가 있으면 매 요청마다 헤더에 실어서 보내는군.

쿠키는 클라이언트(로컬)에 저장하는 key value의 작은 파일이다. 유효시간이 있고 브라우저가 종료되어도 삭제되지 않는다. 하지만 클라이언트가 수정할 수 있고 해커가 탈취할 수 있기 때문에 보안에 민감한 데이터를 저장하면 안된다.

생성방법

자바스크립트를 이용해서도 만들 수 있고, 서버에서 클라이언트에 요청에 대한 응답의 헤더에 Set-Cookie 속성을 사용하면 만들 수 있다.

특징

• 클라이언트 쪽에 저장된다.
• 브라우저가 꺼져도 삭제되지 않는다. 사용자가 삭제하거나 유효기간이 끝나야 한다.
• 문자열만 저장할 수 있다.
• 사용자가 조작하거나 해커가 탈취할 수 있어서 보안에 취약하다
• 쿠키 생성시에 HttpOnly 속성을 주면 자바스크립트에서 접근이 불가능하고, 오로지 HTTP 요청을 통해서만 전송된다. Secure 옵션을 주면 한층 더 강화하여 HTTPS 요청을 통해서만 전송된다.

용도

• 세션 ID : 서버에서 저장해야 할 민감한 정보에 대한 식별자 ID
• 팝업창 (ex 오늘 하루 안보기), 아이디 비밀번호 자동완성 등

세션

세션이란 브라우저가 서버와 연결되어 있는 동안 유지되는 데이터 집합이다.

라이프 싸이클

클라이언트가 서버에 요청을 보낸다 -> 서버는 클라이언트의 정보를 저장하고 그 정보를 식별할 수 있는 세션 ID를 응답의 Set-Cookie 속성에 넣어 보낸다. -> 클라이언트는 세션 ID를 쿠키로 저장한다. -> 다시 요청을 할 때마다 클라이언트는 요청의 Cookie 헤더에 세션ID를 포함시켜 전송한다 -> 서버는 이를 받아서 클라이언트에 맞게 요청을 처리할 수 있다.

특징

• 서버쪽에 저장한다. 따라서 많은 클라이언트의 정보가 서버에 세션으로 저장되면 서버의 메모리 부하가 일어날 수 있다.
• 브라우저가 꺼질 경우 삭제된다.
• 문자열 뿐만 아니라 객체도 저장 가능하다.
• 서버에서 민감한 데이터를 갖고 있기 때문에 비교적 보안이 좋다.

용도

민감한 정보관리

쿠기 & 로컬 스토리지 & 세션 스토리지

3가지 모두 key / value 쌍을 저장할 수 있는 메커니즘으로 문자열만 저장 가능하다. 로컬 스토리지와 세션 스토리지는 HTML5에 추가되었고 window 객체 하위의 localStorage, sessionStorage 객체를 이용하여 설정 가능하다. ( Brower Object Model이 생각나는군.)

	Cookie	Local storage	Session storage
생성자	클라이언트/서버	클라이언트	클라이언트
지속시간	설정 여부에 따름	명시적으로 지울때까지	탭 / 윈도우 닫을 때까지
용량	5KB	5MB / 10MB	5MB
서버와의 통신	O	X	X
취약점	XSS / CSRF 공격	XSS 공격	XSS 공격

쿠키는 httponly, Secure 옵션을 통해서 보안을 강화할 수 있지만, 사용자의 컴퓨터에 파일로 저장되기 때문에 사용자가 악성 이메일을 클릭하는 것 같은 행위로 특정 서버에 API요청을 보낼 수 있는 문제(CSRF)가 있다. (요청의 헤더에 자동으로 실어서 보내지기 때문에)