문제 상황

• 핸들러(백엔드)에서 Set-Cookie를 통해 액세스 토큰을 설정하며 httpOnly, sameSite, path 등의 속성을 지정했다.
• 그러나, 미들웨어에서 res.cookies.set을 호출하여 동일한 쿠키를 재설정할 때, 기존 속성들이 반영되지 않고 기본값으로 설정됐다.
• 결과적으로, 브라우저에 저장된 쿠키의 보안 속성이 기본값으로 저장되는 문제가 발생했다.

---

문제 원인

res.cookies.set은 새 쿠키 생성 동작으로 간주된다.

• res.cookies.set은 핸들러의 Set-Cookie 헤더에서 읽은 속성을 자동으로 상속하지 않는다.
• 명시적으로 속성을 설정하지 않으면 기본값(path: '/')으로 처리된다.

Next.js cookies options: Functions: cookies

ResponseCookies와 res.cookies.set

• ResponseCookies는 Set-Cookie 헤더를 파싱하여 속성을 읽을 수 있게 하지만, res.cookies.set으로 새로운 응답 객체에 쿠키를 설정할 때 속성을 명시하지 않으면 기본값으로 덮어씌워진다.

ResponseCookies를 사용한 이유

• 최신 쿠키 접근 가능: 서버 응답의 Set-Cookie 헤더에서 최신 데이터를 가져올 수 있다.
• 관련 참고 문헌: Velog

---

해결 방법

핸들러와 미들웨어에서 쿠키 속성 자동 상속

• ResponseCookies를 활용하여 백엔드의 Set-Cookie 헤더를 파싱하고, 파싱된 값을 그대로 클라이언트 응답 쿠키에 설정한다.

---

수정된 코드

핸들러 코드 (백엔드 코드)

// 백엔드 코드는 변함없음.
const response = NextResponse.json({ message: 'Token refreshed' });
response.cookies.set('accesstoken', newAccessToken, {
  httpOnly: true,
  sameSite: 'strict',
  path: '/',
});
return response;

미들웨어 코드

if (response.ok) {
  const res = NextResponse.next();
  const responseCookies = new ResponseCookies(response.headers);

  const accessToken = responseCookies.get('accesstoken');
  const refreshToken = responseCookies.get('refreshtoken');

	// 백엔드에서 설정된 쿠키의 속성을 그대로 상속받는다.
  if (accessToken) {
    res.cookies.set('accesstoken', accessToken.value, {
      httpOnly: accessToken.httpOnly,
      sameSite: accessToken.sameSite,
      path: accessToken.path,
      secure: accessToken.secure,
    });
  }

	// 백엔드에서 설정된 쿠키의 속성을 그대로 상속받는다.
  if (refreshToken) {
    res.cookies.set('refreshtoken', refreshToken.value, {
      httpOnly: refreshToken.httpOnly,
      sameSite: refreshToken.sameSite,
      path: refreshToken.path,
      secure: refreshToken.secure,
    });
  }

  return res;
}

---

결론

백엔드와 미들웨어의 설정을 완전히 통합

• ResponseCookies를 활용하여 백엔드에서 설정한 모든 쿠키 속성을 자동으로 상속받아 처리했다.
• 이를 통해 백엔드의 설정이 변경되더라도 프론트엔드 코드를 수정할 필요가 없다.

최신 데이터 보장

• 미들웨어가 실행되는 환경에서 브라우저 쿠키 대신 백엔드 응답의 최신 쿠키 값을 사용하여 보안과 신뢰성을 높였다.

---

참고문헌

• Functions: cookies
• Next.js Middleware.ts에서 Set-Cookie가 즉시 적용되지 않는 문제: Route Handlers와 Middleware.ts 간 쿠키 동기화를 위한 ResponseCookies 활용