Spring boot + security + jwt token을 사용하여 Auth 서버를 구축하는 중에 프론트와 상의하여 jwt token을 cookie로 response를 해주기로 하였다.
local 환경에서 개발을 마치고 postman으로 확인한 결과 쿠키가 잘 들어오는것을 확인하고 개발서버에 배포하였다.
그러나 프론트 로컬에서 cookie가 set되지 않는 현상이 발생하였다.
찾아보니 chrome80 버전 부터 기본 cookie 특성 설정이 SameSite=None 에서 Samesite=Lax가 도입되었고, 이에 따라 타 도메인을 통할 경우 브라우저에서 쿠키값을 서버로 전달하지 않을 수 있다고 한다.
ex)
front-end domain = https://web.abcd.com
back-end domain = https://api.abcd.com
해결 방안은
1. cors 설정
2. same site 속성을 부여
3. secure 속성을 부여
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("https://web.abcd.com")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE", "HEAD")
.allowedHeaders("*")
.exposedHeaders("Set-Cookie")
.allowCredentials(true);
}
}
cors를 설정한다.
ResponseCookie cookie = ResponseCookie.from("access-token", token)
.path("/")
.secure(true)
.sameSite("None")
.httpOnly(false)
.domain("예)abcd.com")
.build;
response.setHeader("Set-Cookie", cookie.toString());
// response.addHeader("Set-Cookie", cookie2.toString());path는 다른 엔드포인트로 가도 쿠키를 가지고 다닐수 있도록 "/" 지정을 했고,
secure는 https끼리 쿠키를 요청하겠다 라는 뜻이라고 알고있다. sameSite("None")을 사용하게되면 secure를 지정해야 한다.
httpOnly는 프론트엔드에서 쿠키에 접근할 수 있도록 false를 두었고
domain은 프론트엔드 개발서버와 백엔드 개발서버의 도메인을 맞추기위해 abcd.com으로 설정하였다.
만약 cookie를 두개사용한다면 setHeader밑에 addHeader를 사용하여 두번째 쿠키를 추가한다.
이번엔 프론트 로컬에서 백엔드 개발서버로 테스트를 진행하려면 자신의 로컬 호스트를 변경해야한다.
도메인이 abcd.com 으로 같아야 오류가 나지 않습니다.
$ sudo vim /private/etc/hosts# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 local.abcd.com # 이부분을 수정해야 합니다.
255.255.255.255 broadcasthost
::1 localhost
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section
이렇게 프론트엔드의 호스트를 변경 후 우리 프론트의 Local React SSL을 설정하니 완료되었다.
