쿠키 보안 설정하기 (withCredentials, httpOnly 등)

쿠키에 보안 설정을 해주게 되면 서버로부터 받은 쿠키는 XSS, CSRF 공격에 대한 대비와 함께 클라이언트(웹 브라우저)가 자동으로 저장하고 관리하게 되므로 중요한 정보에 대한 보안을 강화할 수 있다. 그리고 withCredentials: true로 설정된 요청에서는 이러한 쿠키를 자동으로 서버에 전송하게 된다. 개발자가 직접 쿠키를 저장하거나 요청에 포함시키는 작업을 하지 않아도 되므로 개발 편의성도 증가한다.

 

프론트

프론트에서 Axios에 withCredentials 설정을 해주게 되면 서버에 CORS 요청을 할 때 쿠키, HTTP 인증 헤더 등을 자동 포함시켜 보내 사용할 수 있게 된다.

따로 interceptors를 설정해주지 않아도 말이다. (fetch에선 credentials: 'include' 설정을 사용한다.)

 

axios 설정

export const instance = axios.create({
  baseURL: isDevelopment ? "http://localhost:8080/api" : serverURL,
  withCredentials: true,
});

백엔드

백엔드에서 쿠키를 생성한 뒤 응답 헤더에 실어 보낸다.

이때 httpOnly, secure, samesite 등 설정을 추가하여 보안을 강화할 수 있다.

    @PostMapping("/login")
    public ResponseEntity<Response<UserLoginResponse>> login(@RequestBody UserLoginRequest request, HttpServletResponse response) {
        String token = userService.login(request.getUsername(), request.getPassword());

        // 쿠키 생성
        ResponseCookie cookie = ResponseCookie.from("token", token) // 쿠키 이름과 값 설정
                .httpOnly(true) // httpOnly 설정: 클라이언트 측 스크립트에서 접근 불가
                .secure(true) // secure 설정: HTTPS를 통해서만 쿠키 전송
                .sameSite("None") // sameSite 설정: CSRF 공격 방지, 브라우저가 크로스 사이트 요청 시 쿠키를 전송하지 않도록 함
                .path("/") // 쿠키가 전송될 수 있는 서버 경로
                .maxAge(7 * 24 * 60 * 60) // 쿠키의 유효 기간 설정(예: 7일)
                .build();

        // 응답 헤더에 쿠키 추가
        response.setHeader(HttpHeaders.SET_COOKIE, cookie.toString());

        // 로그인 응답 반환
        return ResponseEntity.ok()
                .body(Response.success(new UserLoginResponse(request.getUsername())));
    }

- sameSite 설정 -

Strict - 쿠키가 현재 사이트의 요청에만 포함 됨. 크로스 사이트 요청에서는 쿠키가 포함되지 않는다.

Lax - 일부 크로스 사이트 요청(예: GET 요청을 통해 사용자가 링크를 클릭할 때)에서 제한적으로 쿠키를 포함시킨다.

None - 모든 크로스 사이트 요청에서 쿠키를 포함시킨다. (이 설정을 사용하려면 Secure 설정 필수)

 

allowCredentials(true) 설정 (설정하지 않으면 cors 오류가 발생한다.)

	@Bean
	public WebMvcConfigurer corsConfigurer() {
		return new WebMvcConfigurer() {
			public void addCorsMappings(CorsRegistry registry) {
				registry.addMapping("/**")
						.allowedMethods("*")
						.allowedOrigins("http://localhost:3000", "https://next-todo-mu.vercel.app", "https://jihyeon-pet-project.vercel.app", "https://study-sync-mu.vercel.app")
						.allowCredentials(true);
			}
		};