🍪 쿠키에 token 담아보내기(CORS와 Cookie옵션 설정)

새로고침 했을 때, Cookie가 없어지는 오류

CORS 설정, Cookie 옵션까지 잘 작성한 뒤 배포 서버에서 테스트를 했을 때 역시나 문제가 발생했다.

페이지를 새로고침(reload)했을 때 Cookie에 저장한 token이 날라가는것..

아니 왜. 저장 잘했었는데. 😂️😂️😂️

계속해서 찾아보고 구글링하다가 결국 다시 cookie 탭에서 옵션들을 확인했는데,

Domain이 백엔드 서버 도메인으로 되어 있을 것을 확인했다. 프론트 서버 도메인이 아니라!!!

cookie option에 domain으로 프론트서버 주소를 지정해주니 새로고침해도 쿠키가 남아있었다. 🎉️

CORS정책은 공부해야 할 내용이기 때문에 이번에 공부하고 찾아봤던 내용들을 정리해봤다.

 

🔐️ CORS 설정

const corsOption = {
  origin: 'http://localhost:3000',
  optionsSuccessStatus: 200,
  credentials: true,
};

app.use(cors(corsOption));

Origin

• 프론트엔드 서버에서 credentials : 'include' 로 설정했을 때, 백엔드 서버에서 보내주는 origin이 '*' 이면 안된다. 따라서 하나의 도메인만 허용이 되도록 설정한다.

 

Credentials

백엔드 서버 : header에 Access-Control-Allow-Credentials를 포함할지 여부를 결정한다.

true

• 백엔드 서버에서 response header에 Access-Control-Allow-Credentials 가 포함되고, 이렇게 헤더를 설정해서 보내줘야 브라우저에서 서버로부터 받은 response 메세지(body)를 클라이언트 서버에 전달해준다.

프론트엔드 서버 : 클라이언트가 서버로 요청을 보낼 때, 어떤 경우에 쿠키 정보를 포함해서 보낼 건지 설정한다.

ommit

• 어떤 경우에도 절대 쿠키정보를 포함하지 않는다.

same-origin

• 도메인이 동일한 경우에만 쿠키를 자동을 포함한다.

include

• 다른 도메인이라도 쿠키를 포함한다.

 

🍪 Cookie 설정

const options = {
        httpOnly: true,
        sameSite: 'none',
        secure: true,
        domain: 'localhost',
        maxAge: config.jwt.expiresInSec * 1000,
      };
res.cookie('token', token, options);

HttpOnly

• HttpOnly 옵션을 이용하면 브라우저만 cookie 정보를 읽을 수 있음.
• 자바스크립트(코드)에서도 cookie의 정보를 읽을 수 없기 때문에 보안에 좋다.

 

SameSite

• 서로 다른 도메인에서의 쿠키전송에 관한 보안.

none

• 도메인이 다른 경우(cross-origin)에도 브라우저가 쿠키를 포함해서 요청을 보낼 수 있음.
• cross-origin이라면 none 만이 유일하게 동작

strict

• 도메인이 다른 경우(cross-origin) 브라우저가 쿠키를 포함하지 않음.

lax

• strict과 비슷하지만, 다른 도메인 내에서 same-origin의 도메인 주소를 가리키는 링크를 클릭한 경우, 해당 요청에 대해서만 쿠키를 포함해줌.

 

Secure

true

• SameSite='none' 일 경우 true 여야 한다.
• https 프로토콜을 사용할 때만 쿠키를 request header에 담겨서 서버에 보내지고 http 프로토콜일 때는 쿠키가 담겨지지 않음.
• 다만, localhost에서는 예외적으로 허용

 

Domain

• Secure 쿠키 전달을 하려면 프론트엔드와 백엔드가 같은 도메인을 공유해야한다.
• 예: 클라이언트: https://shop.abc.com, 서버 API: https://api.abc.com)

 

MaxAge

• 쿠키의 만료기간을 지정한다.
• JWT 토큰과 동일하게 만료기간을 적용하였고, 다만 단위가 ms이기 때문에 1000을 곱해줬다.

 

참고 사이트

• 🍪 프론트에서 안전하게 로그인 처리하기 (ft. React) 👉️ 엄청 상세하고 잘 정리된 글! 강추
• 도메인 연결하기 (feat. 🍪 쿠키오류 해결하기)