HTTP 프로토콜
HTTP 프로토콜은 Connectionless, stateless 한 특성을 가지고있다.
connectionless
- HTTP는 먼저 클라이언트가 요청(request)을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답(response)을 보내고 접속을 끝는 특성이 있다.
- HTTP가 tcp위에서 구현되었기 때문에 네트워크 관점에서 keep-alive 옵션으로 connectionless의 연결비용을 줄이는 것을 장점으로 비연결지향이라 한다.
stateless
- 통신이 끝나는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.
쿠키(Cookie)란?
쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.
쿠키 특징
- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되도 인증이 유지
- 클라이언트의 상태 정보를 로컬에 저장했다가 참조
- 클라이언트에 300개 까지 저장가능, 하나의 도메인당 20개의 값만 가짐
- 하나의 쿠키 값은 4KB까지 저장
- Response Header에 set-cookie속성을 사용하면 클라이언트에 쿠키를 만듬
- 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 요청(Request)시에 Request Header를 넣어 자동으로 서버에 전송
쿠키 구성요소
set-cookieconst setCookie = (name, value, options) => { options = { path: '/', ...options } if (options.expires instanceof Date) { options.expires = options.expires.toUTCString(); } let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value); for (let optionKey in options) { updatedCookie += "; " + optionKey; let optionValue = options[optionKey]; if (optionValue !== true) { updatedCookie += "=" + optionValue; } } document.cookie = updatedCookie; }
document.cookie// 특수 값(공백)은 인코딩 처리해 줘야 합니다. let name = "my name"; let value = "John Smith" // 인코딩 처리를 해, 쿠키를 my%20name=John%20Smith 로 변경하였습니다. document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value); alert(document.cookie); // ...; my%20name=John%20Smith
express에서 쿠기설정
res.cookieres.cookie(쿠키이름, 쿠키이름에 담을 값, {옵션})
cookie('table', 'paper', {옵션})
post: {
res.cookie('name', 'name', {옵션})
res.status(200).send()
}
Options
domain 쿠키에 접근 가능한 도메인을 지정한다.
{domain: '.mydomain.com'}
encode 쿠키 값 인코딩에 사용되는 동기 함수이다. (default, encodeURIComponent)
{domain: '.mydomain.com'}
expires 쿠키 유효 기간을 설정한다.
{expires: Tue, 19 Jan 2038 03:14:07 GMT}
let data = Data.now();
date = date.toUTCString()
{expires: date}
httpOnly 서버 요청때에만 쿠키가 전송되도록 설정하고, 쿠키를 훔쳐가는 행위를 막기 위한 방법이다.
{httpOnly: true}
maxAge 만료시간을 초 단위로 설정한다.
{maxAge: 5000}
path 웹 브라우저가 쿠키값을 전송할 URL을 지정한다.
{path: '/id'}
secure 웹서버가 HTTPS로 통신하는 경우만 웹 브라우저가 쿠키를 서버로 전송한다.
{secure: true}
sameSite 서로 다른 도메인간의 쿠키 전송에 대한 보안 설정(none, strict, lax)
{sameSite: true}
쿠키 동작 방식
- 클라이언트가 페이지를 요청
- 서버에서 쿠키를 생성
- HTTP 헤더에 쿠키를 포함시켜 응답
- 브라우저가 종료되도 쿠키 만료 기간이 있다면 클라이언트에 보관
- 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP헤더에 포함시켜 응답
쿠키 사용 예시
- 세션관리 : 서버에 저장해야할 로그인, 장바구니, 게임 스코어 등 정보 관리(자동 로그인, ID/PW 저장)
- 개인화 : 사용자 선호, 테마 등 셋팅
- 트래킹 : 사용자 행동을 기록하고 분석하는 용도
출처
interconnection.tistory.com/74
'FE BE 개발 메모장 > Client Server Architecture' 카테고리의 다른 글
브라우저의 동작 원리 (0) | 2021.06.05 |
---|---|
HTTP 세션(session) (0) | 2021.03.06 |
HTTPS (0) | 2021.03.04 |
REST API에 대해 이해하기 (0) | 2021.02.05 |
교차 출처 리소스 공유(CORS) (0) | 2021.02.05 |