브라우저에 쿠키 저장 안되는 문제 해결 과정

🍪문제 상황

• 조회수 중복 증가 제어와 Refresh Token관리를 위해 쿠키를 도입했는데 쿠키가 서버로 전달이 안되는 문제를 접했습니다.
• 처음에는 Local쪽에서 통신이 안되는 문제였으며 CORS와 withCredentials설정으로 인한 문제였습니다.
• 다음으로는 서버로 배포 후 테스트 해봤는데 samesite에 의해 쿠키 전달이 안되는 문제였습니다.
• 다들 쿠키를 손에 넣어봅시다.

🍪CORS와 withCredentials

CORS

저는 3000번 포트에 React 8080포트에 Spring을 띄워둔 상태였습니다. 
포트가 다르기 때문에 CORS설정을 해주어야 했습니다.

public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedHeaders("*")
                .allowedMethods("*")
}

 

WithCredentials

이제 CORS문제가 발생하진 않았지만 서버에서 응답이 나간 쿠키가 다음 요청에 안담기는 문제가 생겼습니다.

아래 글에 설명히 너무 잘 나와있어 간단히 요약하자면 다른 도메인에 요청을 보낼 때 쿠키와 같은 인증 관련 데이터를 넘기려면 설정해줘야 하는 옵션입니다!!

🍪 CORS 쿠키 전송하기 (withCredentials 옵션) (tistory.com)

 

 

주의해야 할 점은 클라이언트와 서버 측에 모두 설정을 해줘야한다는 점입니다. 클라이언트 코드는 생략하고 서버 쪽 코드를 보면 아래와 같이 수정해야 합니다. 또한 allowCredentials(true)를 사용하면 allowedOrigins("*")이 아닌 명시적인 url을 넣어줘야합니다.

public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedHeaders("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS" , "PATCH")
                .exposedHeaders("accessToken", "refreshToken")
                .allowCredentials(true);
}

 

 

배포 후 🍪 사라짐...

 

로컬에서는 분명히 잘 담기던 쿠키가 있었는데 없어졌네? 와우

원인을 보면 React서버는 front.vercel.app도메인을 사용하고 Spring서버는 sever.back.site와 같은 도메인으로 설정됐기 때문이었는데요

 

쿠키의 옵션으로 들어간 SameSite, Secure, httpOnly중 하나가 영향을 줬을거같은데 아래 놈들은 연관이 없는거 같죠..?

httpOnly : 자바스크립트로의 접근이 불가능하도록 설정
secure : 쿠키를 반드시 https를 통해서만 공유하겠다는 뜻
-> ( 잡지식인데 localhost에서는 secure지정해도 http로 통신 가능합니다! )

 

samesite 

 samesite는 보안상의 문제로 만들어졌다고 합니다.(CSRF 같은?)

보안 정책은 여러 포스팅에서 똑같은말 돌려돌려 하는데 제가 이해하기 좋았던 설명은 아래와 같습니다.

Strict : 퍼스트 파티 쿠키만 전송
Lax : 몇 가지 예외적인 요청(안전한? HTTP요청인 GET요청)을 제외하고는 퍼스트 파티 쿠키만 전송
None : 퍼스트 파티 쿠키와 서드파티 쿠키 전송

 

퍼스트 파티 🍪 서드 파티 🍪

 

퍼스트 파티 쿠키는 현재 접속해 있는 페이지와 같은 도메인으로 전송되는 쿠키이며,

서드 파티 쿠키는 현재 접속해 있는 페이지와 다른 도메인으로 전송되는 쿠키입니다.

 

여기서 같은 도메인의 기준을 뭘까요??

site는 origin과는 조금 다른 기준을 가집니다. 

 

Top Level Domain  ->  (github.io, co.kr, com)

TLD 앞 도메인을 Resistrable Domain이라고 하고
set-Cookie Domain의 resistrable Domain과 브라우저 주소창 URI의 registrable Domain이 일치할 경우 SameSite입니다.

 

예시는 아래와 같습니다.

Origin A	Origin B	Site	Origin
https://www.back.site:443	https://server.back.site:443	같은 도메인	다른 서브도메인
	https://back.site:443	같은 도메인	다른 서브도메인
	https://www.back.site:80	같은 도메인	다른 포트

 

해결방법

저의 문제점은 React서버는 front.vercel.app Spring은 back.site 이런식으로 다른 도메인을 사용했기 때문에 발생했습니다.

제가 찾은 선택지는 두 가지였으며 조금 더 높은 보안을 위해 후자를 선택했습니다.

 

1. 도메인 변경없이 sameSite : "None", secure : true설정 

만약 도메인을 변경할 수 없는 상황이라면 이 방법을 선택했을 것 같습니다. 그러나 CSRS방어가 안될 수 있는 문제점이 존재하기 때문에 주의하여 사용해야 합니다.

ResponseCookie cookie = ResponseCookie.from("viewCountCookie", randomCookieValue)
        .path("/")
        .sameSite("None")
        .httpOnly(true)
        .domain("back.site") // 예시입니다! 서버의 도메인만 적어주면 됨
        .secure(true) // sameSite를 None으로 지정했다면 필수
        .build();

response.addHeader("Set-Cookie", cookie.toString());

 

 

2. 도메인을 일치시키고 sameSite : "Strict", secure : true설정

front.vercel.app으로 지정되어있던 프론트 서버를 백 도메인의 서브 도메인인 back.site로 옮겨 주었습니다.

Lax대신 Strict를 쓴 이유는 CSRF공격을 막아 보안성을 높이기 위함이었습니다.

String randomCookieValue = UUID.randomUUID().toString();
ResponseCookie cookie = ResponseCookie.from("viewCountCookie", randomCookieValue)
        .path("/")
        .sameSite("Strict")
        .httpOnly(true)
        .domain("farmingsoon.site")
        .secure(true)
        .build();

response.addHeader("Set-Cookie", cookie.toString());

 

 

추가 사항

• 혹시 예상과 다른 동작으로 삽질을 하고 계신다면 꼭...쿠키와 캐시를 날려보세요 withcredectial sssss 라는것도 꼭 확인하시구요 
• 서버 로그와 개발자 도구를 애용하자