문제

refresh token을 HttpOnly 쿠키에 담아서 보내는데

private ResponseCookie createRefreshTokenCookie(String refreshToken) {
        return ResponseCookie.from(REFRESH_TOKEN_COOKIE_NAME, refreshToken)
                .httpOnly(true)
                .secure(false)
                .sameSite("None")
                .maxAge(Duration.ofMillis(refreshTokenExpirationInMs))
                .path(COOKIE_PATH)
                .build();
}

sameSite: None, secure: false로 설정했더니 서버에서 클라이언트로 쿠키가 가긴 하는데

프론트에서 withCredential: true를 사용해 브라우저가 쿠키를 사용해 요청을 보내게 코드를 작성해도

헤더에 쿠키가 설정이 안 됐다.

원래는 sameSite: None일 때 secure: true로 설정하는 것이 중요하지만 테스트 환경이 http로 되어 있기 때문에 임시로 secure: false로 설정을 하고 테스트를 해보려 했었다.

원인

❗️ 크롬 브라우저에서 sameSite가 None일 때 secure이 true인 경우에만 쿠키가 사용될 수 있도록 되어 있다고 한다. 그래서 리프레시 토큰 요청 헤더에 쿠키 설정이 안 되는 거였다.

로컬 개발 환경에서도 https로 테스트를 해봐야 했던 것.

해결

실제 배포 환경이 클라이언트, 백엔드 서버가 사이트가 다르고(크로스 사이트), https로 설정이 돼있는 걸 감안해서 로컬 개발환경을 똑같이 맞췄다.

1. 크로스 사이트 설정

sudo vi /etc/hosts 로 호스트 파일을 열고 프론트, 백엔드가 사용할 도메인을 다르게 설정해준다.

ex)

127.0.0.1 frontend.local.com
127.0.0.1 backend.local.com

2. 인증서 설정(https 설정)

챗지피티한테

frontend.local.com:3000에 대해 vite.js에서 vite-plugin-mkcert를 사용해서 https 설정을 하는 법을 알려줘

backend.local.com:8443에 대해 스프링부트에서 mkcert를 이용해서 https 설정을 하는 법을 알려줘

이런식으로 물어보면 잘 알려준다.

막히면 에러 로그 보여주면서 질문하면 또 해결도 잘 해줌.

그래도 내가 진행했던 내용을 남겨보자면

사전작업

mkcert 설치, 로컬 CA 설치

# mkcert 설치
brew install mkcert

# 로컬 CA 설치
mkcert -install

프론트(vite.js)

1. vite-plugin-mkcert를 설치한다.

npm install vite-plugin-mkcert --save-dev

2. vite.config.ts 파일 수정

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
  plugins: [
    ...,
    mkcert(), // mkcert 추가
    ...
  ],
  server: {
    host: 'frontend.local.com', // 설정했던 도메인명
    port: 3000, // 원하는 포트
  },

플러그인에 mkcert를 추가해주고 host를 설정했던 도메인명으로 변경한다.
포트는 원하는 포트를 입력한다.

그럼 https://frontend.local.com:3000으로 접속했을 때 인증서가 잘 적용된 것을 볼 수 있다.

백(Spring Boot)

1. /src/main/resources에서 인증서 및 키 생성

# 인증서 및 키 생성
mkcert -key-file key.pem -cert-file cert.pem backend.local.com

backend.local.com을 위한 cert.pem (인증서) 및 key.pem (비밀키) 파일 생성.

2. PKCS12 키스토어 생성

 openssl pkcs12 -export -in cert.pem -inkey key.pem -out keystore.p12 -name backendlocal

3. application.properties 수정

server.port=8443
server.ssl.key-store=classpath:keystore.p12
server.ssl.key-store-password=설정했던 비밀번호
server.ssl.key-password=설정했던 비밀번호
server.ssl.key-store-type=PKCS12

백엔드도 잘 설정이 됐다.