HTTP 요청은 기본적으로 무상태성을 가지므로 서버는 브라우저의 정보를 가지고 있지 않지만 쿠키, 세션, 토큰 등을 이용하면 쇼핑몰 사이트의 장바구니, 로그인 인증 등의 기능을 구현할 수 있습니다.
이번 포스팅에서는 각각의 개념과 사용방법에 대해서 정리하겠습니다.
쿠키
쿠키는 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법입니다. 그러므로 서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있습니다.
아래 코드는 쿠키 옵션으로 표현한 쿠키의 내용입니다.
'Set-Cookie':[
'cookie=yummy',
'Secure=Secure; Secure',
'HttpOnly=HttpOnly; HttpOnly',
'Path=Path; Path=/cookie',
'Doamin=Domain; Domain=test.com'
]
`1. Domain
도메인이라는 것은 여러분들이 흔히 사용하는 www.google.com과 같은 서버에 접속할 수 있는 이름입니다.
쿠키 옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않습니다. 여기서 서브 도메인이란 www 같은 도메인 앞에 추가로 작성되는 부분을 말합니다.
따라서 요청해야 할 URL이 "http://www.localhost.com:3000/users/login" 이라 하면 여기에서 Domain은 "localhost.com"이 됩니다.
만약 쿠키 옵션에서 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있습니다. 이를 통해 "naver.com"에서 받은 쿠키를 google.com에 전송하는 일을 막을 수 있습니다.
2. Path
Path는 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미합니다.
만약 요청해야 하는 URL이 "http://www.localhost.com:3000/users/login" 인 경우라면 여기에서 Path, 즉 세부 경로는 /users/login이 됩니다. 이를 명시하지 않으면 기본적으로 / 으로 설정되어 있습니다.
Path 옵션의 특징은 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있습니다. 즉 Path가 /users로 설정되어 있고, 요청하는 세부 경로가 /users/test 인 경우라면 쿠키 전송이 가능합니다.
하지만 /posts/test로 전송되는 요청은 Path 옵션(/users)을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없습니다.
3. MaxAge or Expires
쿠키가 유효한 기간을 정하는 옵션입니다. 만약 쿠키가 영원히 남아있다면 그만큼 탈취되기도 쉬워지기 때문에 이러한 유효기간을 설정하는 것이 보안 측면에서 중요합니다.
MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션입니다. 마치 쿠키에게 시한부 옵션을 주는 것과 비슷하다고 볼 수 있습니다.
Expires은 MaxAge와 비슷하지만 언제까지 쿠키가 유효한지 심판의 날을 지정할 수 있습니다. 이때 옵션의 값은 클라이언트의 시간을 기준으로 합니다. 이후 지정된 시간, 날짜를 초과하게 되면 쿠키는 자동으로 파괴됩니다.
쿠키는 위 옵션의 여부에 따라 세션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나눠집니다.
세션 쿠키: MaxAge 또는 Expires 옵션이 없는 쿠키로, 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키입니다. 브라우저를 종료하면 해당 쿠키는 삭제됩니다.
영속성 쿠키: 브라우저의 종료 여부와 상관없이 MaxAge 또는 Expires에 지정된 유효시간만큼 사용가능한 쿠키입니다.
4. Secure
사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션입니다. 만약 Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있습니다.
Secure 옵션이 없다면 프로토콜에 상관없이 http://www.codestates.com 또는 https://www.codestates.com에 모두 쿠키를 전송할 수 있습니다.
5. HttpOnly
자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정합니다. 만약 해당 옵션이 true로 설정된 경우, 자바스크립트로 쿠키에 접근이 불가합니다.
명시되지 않는 경우 기본으로 false로 지정되어 있습니다. 만약 이 옵션이 false인 경우 document.cookie를 이용해 자바스크립트에서 쿠키접근이 가능하므로 XSS 공격에 취약합니다.
6. SameSite
Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션(e.g. GET, POST, PUT, PATCH …)의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 됩니다. 사용 가능한 옵션은 다음과 같습니다.
SameStie 옵션
- Lax: Cross-Origin 요청이라면 GET 메소드에 대해서만 쿠키를 전송할 수 있습니다.
- Strict: Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송 할 수 있습니다.
- None: Cross-Origin에 대해 가장 관대한 옵션으로 항상 쿠키를 보내줄 수 있습니다. 다만 쿠키 옵션 중 Secure 옵션이 필요합니다.
이때 same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우를 말합니다. 이 중 하나라도 다르다면 Cross-Origin으로 구분됩니다.
서버에서 이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송합니다.
이후 클라이언트에서 서버에게 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송하게 됩니다.
쿠키 생성
node.js에서 req.cookie를 호출하여 쿠키를 생성할 수 있습니다. 전달 인자는 세 가지로 순서대로 쿠키 이름, 쿠키 값, 쿠키 옵션을 전달할 수 있습니다.
res.cookie("cookie", {userId :"lmh", email: abc@gmail.com}, {
domain: "localhost",
path: "/",
sameSite: "none",
httpOnly: true,
secure: true,
expires: new Date(Date.now() + 24 * 3600 * 1000 * 7)
});쿠키 삭제
req.clearCookie를 호출하여 쿠키를 삭제하는 것이 가능합니다. 쿠키 이름과 쿠키 옵셥을 전달합니다. 주의해야할 점은 쿠키 옵션을 동일하게 전달해야만 삭제가 이루어지며, 쿠키의 유효기간을 나타내는 MaxAge나 Expired 속성은 같이 않아도 됩니다.
res.clearCookie("cookie", {
domain: "localhost",
path: "/",
sameSite: "none",
httpOnly: true,
secure: true,
});Reference
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie
