[이룸] 240203 클라이언트가 쿠키를 받지 못하는 이유 : SameSite 설정

[문제 발생]

프론트엔드에서 정상적으로 Set-Cookie 값을 수신함에도 불구하고, 브라우저의 Application 탭에서 쿠키가 저장되지 않는 현상을 발견했습니다.  Cors 설정하며 Access-Control-Allow-Origin 헤더값도 적절하게 넣어주었는데, 왜 이런 에러가 뜨는 것일까요? 문제의 원인을 찾아 보니, 백엔드의 쿠키 설정에 답이 있었습니다. 

 

[원인] 

프론트에서는 withCredentials 옵션을 true로 해서 보낸다. -> Credentials 이란 쿠키, Authorization 인증 헤더, TLS client certificates(증명서) 같은 자격 인증 정보로, 클라이언트에서 요청과 응답에 이를 넣고 싶을 때는 해당 옵션을 true로 해 주어야 한다. 다시 말해, 쿠키를 요청에 포함시키고 싶으면 넣는 옵션이다. -> 그런데도 쿠키 저장 문제가 해결되지 않았다. 

 

정답은 서버에서 쿠키를 받고 싶다는 뜻을 알리는 옵션도 걸어주어야 한다! -> 쿠키의 SameSite 속성은 다른 도메인 간의 쿠키 전송 보안을 설정하는 것으로, Chrome 80 버전부터 기본값이 'Lax'로 변경되었다. 이로 인해 서로 다른 도메인 간에는 'SameSite=None'과 'Secure' 속성을 명시적으로 설정해야 쿠키를 주고받을 수 있게 된 것. 

 

//생성된 JWT를 Cookie에 저장
public void addJwtToCookie(String token, HttpServletResponse res, String tokenName) throws UnsupportedEncodingException {
    token = URLEncoder.encode(tokeStandardCharsets.UTF_8).replaceAll("\\+", "%20");
    Cookie cookie = new Cookie(tokenName, token);

    cookie.setPath("/");
    cookie.setHttpOnly(true);
    cookie.setSecure(true);
    // samesite, none으로 설정
    cookie.setAttribute("SameSite", "None");

    int maxAgeInSeconds = 3600; // 1시간
    if (tokenName.equals(JwtUtil.AUTHORIZATION_HEADER)) {
        cookie.setMaxAge(maxAgeInSeconds);
    }

    if (tokenName.equals(JwtUtil.REFRESH_TOKEN_HEADER)) {
        cookie.setMaxAge(7 * 24 * maxAgeInSeconds);
    }

    res.addCookie(cookie);
}

 

SameSite란?

쿠키의 사용 범위를 제한하기 위한 쿠키 옵션. 외부 aceess를 방지하는 데 쓰임. 크게 세 종류로 나뉨.

None : 외부 도메인에서 우리 서버로 요청을 보낼 때 쿠키를 함께 전송하는 것을 허용함. secure true로 설정해야 Samesite None이 가능(안전한 HTTPS 연결을 통해서만 쿠키가 전송될 수 있도록 보장하기 위함). 이렇게 해야 서버와 도메인이 다른 프론트 측에서 서버로 쿠키를 보낼 수 있음.

 

Lax : SameSite 설정을 따로 하지 않으면 지정되는 기본값. 일부 상황에서 쿠키가 접근되도록 허용하는데, 예를 들어 사용자가 링크를 클릭하여 페이지를 이동하는 경우 get 메서드 요청을 통해 쿠키가 전송되는 것을 허용함. 그러나 post처럼 상태 변경을 요하는 요청은 쿠키가 전송되지 않음.

 

Strict : 자사 도메인으로만 쿠키 전송이 가능. 다시 말해, 현재 브라우저의 URL과 쿠키의 도메인이 일치하는 경우를 말함.