HTTP 프로토콜의 특징으로 비연결성(Connectionless)과 무상태성(Stateless)이다. 즉, 서버와 클라이언트간의 통신할때 상태를 저장하지 않으며, 서버의 자원을 절약하기 위해 요청마다 연결과 해재를 반복한다.
HTTP 무상태성(Stateless)
stateful의 반대되는 개념. 이전 상태를 보존하지 않는다.- 예를 들어 로그인 하고 새로고침하면 로그인 풀림.
HTTP 비연결성 (Connectionless)
-
클라이언트 요청에 대해 서버가 응답을 마치면 맺었던
TCP/IP연결을 끊는다. -
이를 통해, 서버의 자원을 효율적으로 관리해 수많은 클라이언트 요청에도 대응한다.
(안그러면 리소스는 돼지처럼 불어남) -
최근에는
Keep Alive옵션을 통해 일정 기간동안 클라이언트와 Connection을 유지하는 방식으로 통신이 가능하다.
이 두가지 특징으로, 서버의 자원은 많이 절약할 수 있지만 같은 사용자가 매번 요청을 함에도 새로운 사용자로 인식하는 문제가 있다. 예를 들어, 로그인을 구현했다고 가정하면 HTTP는 로그인한 사용자의 정보를 저장하지 않아 새로고침 시 매번 로그인을 해줘야한다. 한번 주고 받으면 그걸로 끝!! 기억은 리셋된다.
이러한 장점이자 단점인 특성을 보완하기 위해, Cookie와 HTML5에 등장한 Web Storage라는 것을 알아보자.
Cookie
바로 본론부터 들어가면
Cookie는 Name = Value 형식으로된 구조를 가진다. 서버가 클라이언트(브라우저) 에 제공하는 작은 텍스트 데이터이며, 방문자의 물리적인 저장소(HDD, SSD)와 브라우저에 저장된다.
쿠키의 주요 목적
만약 사용자가 어떤 웹 페이지에서 로그인을 한다고 가정하면,
사용자는 이메일(혹은 ID) 비밀번호를 입력한 뒤 POST 요청으로 로그인을 한다.
서버는 사용자의 이메일(혹은 ID)와 비밀번호를 검증한다.
서버는 사용자의 다양한 정보를 서버 내에 세션이나 Cookie에 저장하고,set-cookie 헤더를 설정하여 응답과 함께 클라이언트(브라우저)에게 전송한다.
서버로 부터 받은 쿠키를 브라우저에 저장된다.
response
HTTP/1.1 200 I+OK
Content-type: text/html
Set-Cookie: <name>=
/* Content */이후로 사용자의 요청에 따라 페이지내의 컨텐츠에 접근할 인증 수단으로 사용되거나
쇼핑몰의 장바구니 기능, 자동로그인 등 다양한 기능에 사용된다.
쉽게 요약하자면, 대학교에서 발급해주는 학생증이라고 보면된고, 회사에선 사원증이라 생각하면 된다.
쿠키의 특징
- 쿠키의 용량은
4kb를 넘지 말아야한다. - HTTP 요청 헤더에 붙여 전송해야한다.
- 요청시 쿠키 값을 암호화없이 그대로 보내어 보안에 취약
- 클라이언트에는 300개 이상의 쿠키 정보를 저장할 수 없다.
- 한 도메인이나 한 서버당 쿠키는 20개를 초과하여 저장할 수 없다.
- HTTP의
connectionless,stateless특성을 보안한 개념 - httpOnly로 XSS공격을 완화하지만, CSRF(CROSS-SITE-REQUEST-FORGERY) 공격엔 취약하다.
- 그래서 CSURF같은 라이브러리를 사용해 예방이 가능하다.
TIP
XSS: Cross Site Scripting : 일반 사용자가 웹 사이트에 스크립트를 삽입하여 공격하는 방법
CSRF: Cross Site Request Forgery : 웹사이트의 취약점 공격방법중 하나이며, 사용자가 위조된 스크립트가 삽입된 페이지를 열게되면 사용자의 의지와는 상관 없이 공격자의 마음대로 다양한 공격을 수행하는 공격 방법
쿠키의 구성요소
name : 각각의 쿠키를 구별하는 데 사용되는 이름.
value : 쿠키의 이름과 관련된 값.
Expires: 쿠키의 만료 시간 혹은 날짜로 만료시 쿠키가 삭제된다.
Domain: 쿠키가 사용되는 도메인을 지정.
Path: 쿠키가 반환할 경로를 결정한다.
Secure: 웹페이지가 HTTPS 프로토콜을 사용할 때만 전송한다.
HttpOnly: 일명 XSS(Cross Site Scripting) 공격을 완화하기위한 옵션이다.
SameSite: 사이트간 요청 위조 공격에 대한 보호기능을 제공한다. 2가지 세부 옵션이 제공된다.
Strict (default 값), Lax (Option)
사용예시
내 경우 nodejs,express 환경에서 작성하였다. cookie-parser라이브러리를 활용했는데... 요청된 쿠키를 쉽게 추출할 수 있는 편리한 라이브러리이다.
res.cookie('test_cookie',뭔가 중요한 정보, {
expires: 기간, //또는 maxAge
httpOnly: true, // or false
path: '/shoppingbox',
secure: true, // or false
domain: 'mydomain.link',
signed: true // false
}) 쿠키를 지우는 방법은 다음과 같다.
예를 들면 로그아웃이라고 가정해보자. 간단한 명령어로 쿠키를 날려버리면 된다.
res
.clearCookie("test_cookie")
.redirect("/");그럼 이제 Web Storage API를 알아보자.
기존 쿠키는 항상 HTTP 요청시 헤더에 담겨 전송하는 방식이기 때문에 요청이 많을 수록 쿠키의 전송 횟수가 늘어나며, 웹 서비스 성능에 영향을 줄 수 있다. 또한 4kb의 용량 제한과 암호화 되지 않은 상태로 사용하기 때문에 보안또한 취약하다.
이러한 단점을 개선한 HTML5에 등장한 Web Storage를 알아봐야한다.
Web Storage API의 종류
- SessionStorage:
- 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장한다.
- 데이터를 절대 서버로 전송하지 않는다.
- 저장공간은 최대
5MB
- LocalStorage:
- 유효기간이 존재하지 않음. (영속성(persistence))
- 이러한 영속성은 동일한 컴퓨터, 동일한 브라우저에서만 유효함.
- 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 제거됨.
- 저장공간이 가장큼.
- 브라우저 혹은 탭을 닫았다 켜도 데이터가 남아있다.
Web Storage API의 사용법
Web Storage는 당연히 브라우저 상에 저장하니 클라이언트에서 구현해야한다.
- 기본 사용법
MDN에서 제공하는 기본 사용법인데.. 다음과 같다.
window.localStorage.colorSetting = '#a4509b';
window.localStorage['colorSetting'] = '#a4509b';
window.localStorage.setItem('colorSetting', '#a4509b');더 깔끔한 방법은 .setItem() 이런 방법이 나을 거 같다.
sessionStorage와 localStorage는 사용법이 같으니 하나만 참고해서 자세히 알아보자.
제공 메소드들
setItme('key', 'value'):Key와Value를 추가한다.
window.localStorage.setItem('colorSetting', '#a4509b');배열이나 객체를 저장하려면 문자열로 변경해야하는데 다음과같다.
const person = {
name: "나는 사람",
location: "어딘가",
}
window.localStorage.setItem('user', JSON.stringify(person));getItem('key'): 해당 키에 담긴 값을 불러온다.
JSON.parse(window.localStorage.getItem('colorSetting'));removeItem('key'): 해당 키를 찾아 삭제한다.
window.localStorage.removeItem('user');clear(): 존재하는 모든 항목을 삭제한다.
window.localStorage.clear();key('key'): 키 이름을 검색한다.
let anotherKey = window.localStorage.key('keyname');주로 키를 반복해야하는 상황에서 유용하다고 한다.
끝
하.. 어지럽다. 다음은 Session과 Cookie가 어떤점이 차이가 있는지 알아보려한다.
