CORS 해결 후에도 Set-Cookie 인증 인가 처리 안 될 때 해결 방안들

문제 상황

CORS를 해결한 이후에도 Set-Cookie 방식으로 프론트와 백이 로그인 등의 인증 인가 처리를 할 때 오류가 나는 경우이다.
Vite에서 Proxy 설정으로 CORS를 해결하는 방법은 아래 링크에 작성하였다.

https://turtle-hwan.tistory.com/entry/Vite-Proxy-with-Base-URL-CORS-%ED%95%B4%EA%B2%B0

Vite Proxy with Base URL & CORS 해결

 

• 서로 다른 도메인(cross-origin)을 가진 서버와 프론트
  • 질문에서는 EC2로 배포된 서버와 S3로 배포된 정적 프론트
• cross domain 요청이라 서버에서 response cookie를 생성해서 set-cookie로 보내줄 때 secure: true; sameSite: none 으로 설정하고 https가 활성화 되어야 한다고 하던데, 이 방법 뿐인가요?
  • 배포된 환경에서 쿠키를 이용하려면 서버는 공인된 인증서를 발급받아 https를 활성화 시키고, 프론트는 CloudFront를 이용하여 https를 적용시키는 방법밖에 없나요?
• 브라우저에 refreshToken이라는 이름의 쿠키는 잘 저장이 되어있는데, 프론트로부터 요청이 올 때 include Credentials이 되어있음에도 불구하고 @CookieValue(value = "refreshToken")이 null로 옵니다.

---

동아리 프로젝트 진행하다가 받은 질문이다.

이전에 프로젝트 할 때에도 똑같은 경험을 했었다.

분명 CORS를 해결해서 더 이상 CORS는 안 뜨는데 set-cookie로 인증 인가 처리를 하려니까 안되는 경우다. 이전에는 자세한 원인 파악까지는 못했었고, 이리저리 하다가 프론트 백 모두 https로 올리니까 해결됐었다.

그 이후 얼마 전에 마침 KUIT 해커톤 할 때에도 똑같은 문제가 발생한 팀이 생겨 열심히 붙잡고 이것저것 해결을 시도한 적이 있다. 이번 기회에 이렇게 파고들면서 원인 분석이 명확히 되어 글로 정리해보았다.

예전에는 이해를 못하고 해결도 힘들었던 것이 이번에는 차근차근 풀려나가는 것을 보고 실력이 좀 늘었구나 느꼈다.

---

원인 분석 및 설명

1. set-cookie를 서버에서 줄 때 도메인이 다르다면 SameSite: none으로 설정해야 합니다.
2. 그런데 SameSite: none인 요청은 브라우저에서 Secure: true가 아니면 거부합니다.
3. 그런데 Secure: true로 백엔드에서 온 응답에 대한 쿠키를 저장하려면 프론트가 https 인 상태여야 합니다.
4. 여기까지면 백엔드에서 요청을 받아서 프론트에 쿠키가 잘 저장됩니다.
5. 그런데 이 쿠키를 fetch credentials include 로 백엔드에 보내려면, 백엔드 배포 주소도 https여야 보내집니다.

• 위 사진에서 Secure 옆에 느낌표가 있는데, 여기 마우스를 대 보시면 아마 브라우저에서 무슨무슨 조건 때문에 쿠키가 실제로 저장되지 않았다~ 이렇게 뜰 거에요 → 아마 3번 조건 같습니다
• 결론적으론 둘 다 https여야 cross-origin(cross-domain)에서 set-cookie + httpOnly 방식으로 인증-인가 처리를 해줄 수 있습니다.

 

---

해결 방안

• 그러면 이를 해결하는 방법은 세 가지가 있습니다. 위 조건들을 만족시키거나 우회하는 것이죠.

1. 둘 다 https로 만들기
   • 서버는 한국.도메인 등에서 무료 도메인 받아서 ssl 인증 받기
   • 프론트는 s3, vercel, github io 등 무료 https 배포 사이트 이용
2. cross-domain이 아닌, 동일한 domain 사용하기
   • 같은 EC2에 같이 배포하기
   • 프론트 단에서 proxy 사용하기
3. set-cookie + httpOnly 방식 대신 header나 body에 token을 넣어서 프론트에 전달해주고, 프론트에서 cookie나 storage에 저장해서 사용하기