[Spring Cloud] SameSite와 Secure로 프론트 백엔드 쿠키 교환하기

문제 발생

 

전에 백엔드에서 프론트로 쿠키를 저장하는 것은 진행했었다. 그 때 문제가 됐던 점은 프론트가 delibird.store이고, 백엔드가 api.delibird.store였기 때문에 백엔드에서 프론트로 set-cookie 응답을 해도 저장이 되지 않는 문제가 있었다. 그래서 백엔드에서 Cookie 대신 ResponseCookie로 생성하고, domain을 .delibird.store로 지정하여 해결을 했었다. 그런데 이번에는 프론트에서 백엔드로 쿠키가 넘어가지 않았다.

 

---

 

백엔드 설정

 

private ResponseCookie makeCookie(String name, String token) {
    Duration duration = Duration.ofMillis(Long.parseLong(environment.getProperty("token.expiration_time")));

    return ResponseCookie.from(name, token)
            .domain(environment.getProperty("cookie.domain"))
            .path("/")
            .httpOnly(true)
            .sameSite("None")
            .secure(true)
            .maxAge(duration.getSeconds())
            .build();
}

 

찾아보니 나의 도메인은 store로 끝나기 때문에 public suffix가 아니라 쿠키를 공유하지 못한다고 한다. 그래서 delibird.store와 api.delibird.store가 동일한 사이트가 아니라고 판단되는 것이다.

어쩔 수 없이 SameSite를 None으로 설정하기로 했다.

 

쿠키를 만드는 로직에서 위와 같이 sameSite()와 secure() 설정을 해주었다. SameSite는 쿠키가 동일한 도메인에서만 전달될지를 설정하는 부분이다. Strict, Lax, None 세 가지 중에서 선택하면 된다. 크롬 기본이 Lax 인데 현재 이것 때문에 쿠키가 넘어가지 않는 문제가 발생하므로 None으로 설정했다. 해당 설정을 사용하려면 HTTPS 환경이어야 하므로 Secure를 true로 설정한다.

 

---

 

프론트 설정

 

 

프론트에서는 요청을 보낼 때 fetch는 credentials: 'include' 를 포함시켜 보내면 된다.

 

---

 

테스트

 

 

이제 다시 실행해보면 쿠키가 제대로 넘어가는 것을 볼 수 있다!