쿠키란?
브라우저에서 서버 관련 데이터를 저장하기 위한 수단이다.
예를 들어 서버에 본인이 특정한 클라이언트라는 것을 명시 하기 위해
쿠키에 userId와 같은 메타 정보를 저장하고 서버에게 데이터를 요청할때 같이 넘겨 주곤한다.
쿠키설정
쿠키를 설정하는 것은 클라이언트 측에서도 가능하지만 보통 서버로 요청했을때 요청 response header에 적힌
Set-Cookie 가 있다면 쿠키가 저장되는 것이 보통이다.
아래는 express 를 이용한 Set-Cookie 헤더를 설정하여 브라우저에 쿠키를 설정하게 하는 방법이다.
app.get("/cookie", (req, res) => {
res.set("Set-Cookie", "mycookie=test-cookie-lol").json("ok");
});위 api 요청을 클라이언트 측에서 날리고 브라우저 도구를 살펴본다면
Response Headers 에 Set-Cookie 가 적용되어있는것을 확인 가능하고
Application 탭에 cookie를 확인해보면
실제로 key-value로 쿠키가 저장되어있는걸 확인 가능하다.
프론트 엔드(ex: react) 에서 쿠키와 함께 데이터를 요청 하는 방법
react, vue 같은 프레임 워크 에서 쿠키에 있는 데이터와 함께 벡엔드 서버에 api 요청을 해야 할때에는
axios요청의 config 인자로 withCredentials: true를 넣어주면 된다.
const { data } = await axios.request({
method: "GET",
url: "http://localhost:4000/views",
withCredentials: true,
});처럼 넣어주고 요청을 호출한뒤 브라우저 네트워크 탭을 살펴보면
Request Headers 의 Cookie 헤더로 가지고 있던 쿠키값을 넘겨주는 것을 볼수있다.
쿠키 설정 옵션알고가기
Set-Cookie 헤더를 설정할때 옵션과 같이 설정이 가능한데
브라우저의 cookie 를 보면 느낌이 온다.
Name, value, Domain, Path, Expires/Max-Age, Size, HttpOnly, Secure, SameSite, Partition Key Site, Cross Site, Priority 등등 여러가지 속성이 있다.
Domain
쿠키는 유효한 사이트를 명시하기 위해 쿠키에 도메인을 설정 가능하다.
도메인에 localhost 를 설정한다면 localhost 에 대한 요청에만 쿠키가 전송되는 것!
퍼스트 파티 쿠키 / 서드 파티 쿠키
이 도메인 속성을 기준으로 퍼스트 파티 쿠키 와 서드 파티 쿠키를 구분 가능하다.
클라이언트가 하나의 서버에만 요청을 보낸다는 것을 보장할수 없다.
예를 들어 사진 데이터의 경우 클라우드 스토리지 같은 곳에서 이미지 데이터를 요청하는데 이때 요청되는 클라우드 스토리지와 사용자가 접속한 페이지의 도메인은 달라지게 된다.
사용자가 접속한 도메인과 다른 도메인으로 설정된 쿠키를 서드파드 쿠키, 도메인 같은 쿠키를 퍼스트 파티 쿠키라 한다.
서드 파티 쿠키의 보안 약점 CSRF
쿠키에 별다른 설정을 하지 않는다면 모든 http 요청에 쿠키를 함께 보내게 되는데 이때 쿠키를 수집하는 서버를 들어가게 된다면 로그인 인가 정보가 들어있던 쿠키는 털리게 되고 쿠키를 수집한 서버는 인증된 상태로 원하는 요청을 쿠키를 사용하는 서버에 보내 원하는 동작을 한다.
위 공격 방식은 CSRF 공격으로 유명한 공격 방식이다.
위 보안 약점을 보완 하기 위해 설정할 수 있는것이 SameSite 속성이다.
SameSite
다른 도메인에 보내는 쿠키 전송에 제한을 거는 속성이다.
값으로 설정가능한 3가지로 아래와 같다.
- ‘None’ : SameSite의 설정을 하기 전과 같은 동작 방식으로 보든 HTTP 요청에 쿠키를 보낸다. None으로 설정하게 되면 아래와 같은 에러를 만나게 된다.
Mark cross-site cookies as Secure to allow setting them in cross-site con간단하게 HTTPS 환경에서만 SameSite=None 속성을 사용할수 있다는 뜻으로 설정된 쿠키는 무시된다는 것이다. Rest 아키텍처로 세션을 구현한다면Lax나Strict를 사용하도록 하자…
- ‘Strict’ : ‘엄격한’ 이란 뜻으로 크로스 사이트 쿠키는 전송하지 않는다. (퍼스트 파티 쿠키만 전송)
- ‘Lax’ : 서드 파티 쿠키가 전송되진 않지만 예외적인 상황에서는 전송된다!
참고 문헌
https://www.npmjs.com/package/session-file-store
https://www.npmjs.com/package/express-session#compatible-session-stores
