🤔 cookie options CORS

🤔 문제상황

cross origin에서 http://localhost:4000/login 으로 post 요청을 보내었을 때, 헤더에 set-cookie는 잘 보내지만, 브라우저에서 cookie를 저장하지 못하고 있다.

쿠키의 옵션은 다음과 같이 설정하였다.

app.use(
  session({
    secret: 'codecode',
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      maxAge: 24 * 6 * 60 * 10000,
      sameSite: 'none',
      httpOnly: true,
      secure: true,
    },
  })
);

응답 header에 set-cookie 가 들어가 있지만

cookie가 저장되지 않는다.

---

🤔 문제 파악

This attempt to set a cookie via set-cookie header was blocked because it had the 'samesite=none' attribute but did not have the 'secure' attribue, which is requried in order to use 'samesite=none'.

에러 메시지이다.

---

😎 문제 해결

app.use(
  session({
    secret: 'codecode',
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      maxAge: 24 * 6 * 60 * 10000,
      sameSite: 'Lax',
      httpOnly: true,
      secure: false,
    },
  })
);

sameSite 옵션

요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합으로 서버의 쿠키 전송 여부를 결정하게 된다.

• Lax : Lax의 경우 무조건 SameSite 인지 체크하고, 허용된 몇개의 패턴 이외에는 SameSite가 아니면 쿠키를 전송하지 않도록 한다.
• Strict : Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송 할 수 있다.
• None: 항상 쿠키를 보내줄 수 있다. 다만 쿠키 옵션 중 Secure 옵션이 필요하다.

same-origin이 아니다!! (same-site이다!!)

이때 'same-site'는 요청을 보낸 Origin과 서버의 도메인이 같은 경우를 말한다.

내가 보낸 요청은 cross site에서 post /login 요청이기 때문에, sameSite 옵션을 Lax, strict, None으로 지정해야하지만, none인 경우에는 secure을 함께 사용해야 한다.
secure의 경우 https 프로토콜을 이용하여 통신하는 경우에만 쿠키를 전송할 수 있기 때문에, Lax 혹은 strict옵션을 주어야 한다.