🤔 쿠키 세션 과제 & CORS Credentials error

session cookie 응답 요청 흐름

---

세션 세팅

npm i express-session

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

⚡ express-session options

• secret
  : 필수항목으로 cookie-parser의 비밀 키와 같은 역할
• resave (fault)
  : 모든 request마다 기존에 있던 session에 아무런 변경사항이 없을 시에도 session을 다시 저장하는 옵션
• saveunintialized (true)
  : 세션이 store에 저장되기 전에 uninitialized 상태를 session을 저장한다.
  : 보통 방문자를 추적할 때 사용
• store (default : MemoryStore)
  : default값은 memorystore로 메모리에 저장된다.
  : 즉, 메모리는 서버가 꺼지면 휘발되기 때문에, 리로드하면 초기화된다.

⚡ CORS 설정

https://localhost:3000 cross-origin 허용
메서드는 GET, POST, OPTIONS를 허용

app.use(
  cors({
    origin: 'https://localhost:3000',
    methods: ['GET', 'POST', 'OPTIONS'],
  })
);

---

withCredientals / credentials

🤔 문제상황

cross-origin에서 response를 하였지만, 아래와 같은 에러가 발생

문제 파악

에러 메시지에 따르면 Access-Control-Allow-Credentials에 true값을 주어야 한다고 되어 있다.

자격 증명

MDN withCredentials

자바스크립트로 크로스 오리진 요청을 보내는 경우, 기본적으로 쿠키나 HTTP 인증 같은 자격 증명(credential / 쿠키, 인가 헤더, TLS 인증서)이 함께 전송되지 않는다.
HTTP 요청의 경우 대개 쿠키가 함께 전송되는데, 자바스크립트를 사용해 만든 크로스 오리진 요청은 예외다.
따라서 fetch를 사용해 요청을 보내도 another.com 관련 쿠키가 함께 전송되지 않는다.

왜 그럴까?

이런 예외가 생긴 이유는 자격 증명과 함께 전송되는 요청의 경우 영향력이 강하기 때문이다. 크로스 오리진 요청 시 자격 증명을 함께 전송할 수 있으면 사용자 동의 없이 자바스크립트로 민감한 정보에 접근할 수 있게 된다.

그럼에도 불구하고 서버에서 이를 허용하고 싶다면, 자격 증명이 담긴 헤더를 명시적으로 허용하겠다는 세팅을 서버에 해줘야 한다.

쿠키를 요청에 포함하고 싶으면 다음과 같이 서버와 클라이언트의 응답과 요청에 각각 credentials: true, withCredentials: true을 넣어주면 된다.

😎 해결 코드

app.use(
  cors({
    origin: 'https://localhost:3000',
    methods: ['GET', 'POST', 'OPTIONS'],
    credentials: true,
  })
);

axios
      .post(
        'https://localhost:4000/users/login',
        {
          userId: this.state.username,
          password: this.state.password,
        },
        { 'Content-Type': 'application/json', withCredentials: true }
      )
      .then((res) => {
        if (res.status === 200) {
          this.props.loginHandler(true);
        }
      })

😎 origin: * vs origin: true

위에서 정리한 것 처럼 cross origin일 경우 응답 헤더로 Access-Control-Allow-Credentials 옵션도 설정해주셔야 쿠키가 전송된다. Access-Control-Allow-Credentials를 true로 설정하고 Access-Control-Allow-Origin 옵션도 *가 아닌 정확한 도메인을 적어주어야 한다.

즉, 모든 요청을 허용한다는 의미의 *를 Access-Control-Allow-Origin 헤더에 사용하면 안된다.

그렇다면 다음은 어떨까?

const cors = require('cors');

app.use(cors({
  origin: true,
  credentials: true
}));

origin: true 은 와일드카드 *와 같은 것일까??
답은 => 아니다.

origin: true는 프론트 도메인 주소가 자동으로 Access-Control-Allow-Origin에 들어간다. 와일드카드인 *와는 다르다.

참고 자료

Access-Control-Allow-Origin:* 와 Access-Control-Allow-Credentials: true는 함께 사용할 수 없다.
CORS는 응답이 Access-Control-Allow-Credentials: true 을 가질 경우, Access-Controll-Allow-Origin의 값으로 *를 사용하지 못하게 막고 있습니다.

Access-Control-Allow-Credentials: true를 사용하는 경우는 사용자 인증이 필요한 리소스 접근이 필요한 경우인데, 만약 Access-Control-Allow-Origin: *를 허용한다면, CSRF 공격에 매우 취약해져 악의적인 사용자가 인증이 필요한 리소스를 마음대로 접근할 수 있습니다. 그렇기 때문에 CORS 정책에서 아예 동작하지 않도록 막아버린 것입니다.

Access-Contorl-Allow-Credentials: true인 경우에는 반드시 Access-Control-Allow-Origin의 값이 하나의 origin 값으로 명시되어 있어야 정상적으로 동작합니다.

---

<참고자료>
다른 도메인간 쿠키 전송
cors 정리 블로그