안녕하세요
코드스쿼드에서 이번 마지막 프로젝트인 이슈트래커를 하면서 생긴 문제가 있었습니다.
해결방안은 아니지만, 잘못 생각하고 있었던 부분을 되짚어보려 합니다.
틀린 내용이나 이해를 잘못한 부분이 있다면 언제든 댓글로 남겨주시면 감사드리겠습니다 🙏
목차
Set-Cookie
를 통해 Header에 담아서 Response를 보내주었습니다.그러나, Application > Storage
에는 Cookie가 다음과 같이 담겨야 하지만, 클라이언트 측에서 저장이 안된다는 말 밖에 돌아오지 않았습니다..
로컬에서는 다음과 같이 잘 저장되었습니다. 그래서 저는 여기서 CORS 문제일 것이라는 추측을 하게 됩니다..
WebConfig에 allowCredential
설정 및 allowHeaders
추가
addCorsMapping
을 담당하는 CorsConfiguration에 대해서 공식문서에 다음과 같이 나와있습니다.By default a newly created CorsConfiguration does not permit any cross-origin requests and must be configured explicitly to indicate what should be allowed.
corsMapping
에서 다음과 같이 설정을 추가하였습니다. @Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000")
.allowCredentials(true)
.allowedHeaders("*")
.allowedMethods("GET", "POST", "PUT", "PATCH");
}
ResponseCookie
에 SameSite
와 Secure
설정을 해주기
samesite
의 값이 Lax
로 디폴트 값을 갖습니다.SameSite
란, 서로 다른 도메인 간 쿠키 전송에 대한 보안을 설정하는 속성입니다.Strict
, Lax
, None
이 있습니다. (None쪽으로 갈수록 보안의 벽이 낮아짐)SameSite
값을 None
으로 설정할 경우 모든 도메인에서 쿠키를 전송 및 사용이 가능해집니다. (단, 이 방법으로 인해 CSRF 및 각종 보안 위협에 취약해질 수 있습니다.) private String getCookie(User user, TokenType type) {
String token = getToken(user, type);
return ResponseCookie
.from(type.getType(), token)
.maxAge(type.getTime())
.sameSite(SameSite.NONE.toString())
.secure(true)
.path("/")
.build()
.toString();
단, SameSite=None
의 경우 꼭 추가적으로 Secure
옵션을 true
로 해주어야 모든 도메인간 쿠키 전송 및 이용이 가능해집니다. 만약 Secure
설정을 하지 않았을 경우 브라우저는 경고메시지와 함께 쿠키 적용을 막습니다.
결과 : HTTPS 적용을 해 볼 시간이 없어 pass
다음 두 가지 방법 외에도 각종 자잘한 설정을 고쳐보고 시도했지만, 결국 쿠키는 저장되지 않았습니다. 따라서 우리 팀은 이를
ResponseBody
에 넣기로 결정합니다. ㅠㅠ
...
그러나
...
그럴 필요가 없었다..!!??
백엔드 -> 클라이언트
측 통신보다는 클라이언트 -> 백엔드
를 염두에 두고 있는 말이었습니다.ResponseBody
로 받은 JWT를 쿠키에 담아 보관하고, Request Header에 AUTHORIZATION: Bearer [JWT]
와 같은 방식으로 Request를 보내면 됩니다.JWTs are intended to provide a simple security token format that is
small enough to fit into HTTP headers and query arguments in URIs.
참고 : https://datatracker.ietf.org/doc/html/rfc7519
ResponseBody
에 넣어 보내는 것을 Sample 코드로 제공하고 있습니다.이번 사례를 통하여, JWT는 항상 헤더에 담겨 통신되어야 한다는 오해를 바로 잡을 수 있었습니다.
물론, 이번에는 헤더에 담아 통신하는 것이 실패하게 되었으나, 가능은 한 것으로 알고있기 때문에 추후 기회가 된다면, 도전해보는 것도 나름 의미가 있을 것으로 생각됩니다.
긴 글 읽어주셔서 감사합니다.
안녕하세요 선생님 그래서 다과는 왜 안담겼나요