로그인을 하게 되면 해당 사용자의 토큰을 발급해주고 그 값을 저장해주어야 하는데,

Session과 localStorage, Cookie 중 저희 Cookie를 채택해 사용했습니다.

▶️Cookie를 채택한 이유는?

Session의 경우, 서버가 달라지면 공유가 불가능하므로 확장성을 고려해 배제했습니다.

또한 Cookie가 localStorage보다 XSS공격을 ****방어하는데 유리하다는 점, refresh token을 통해 CSRF를 방어할 수 있다는 점을 고려하여 Cookie를 채택하였습니다.

로그인 버튼을 클릭 후 아이디와 비밀번호를 입력하게 되면 Spring 서버에서 loginId와 password를 확인 후 일치 한다면 토큰을 발행하도록 설정했습니다.

발행된 토큰은 쿠키에 저장해 response로 전송하도록 했습니다.

이 과정에서 “XSS 공격” 즉, 자바스크립트 소스를 통한 접근을 막기 위해 HttpOnly()를 걸어 http 요청으로만 접근할 수 있도록 제어 하였습니다

Cookie cookie = new Cookie("token", token);
cookie.setHttpOnly(true);
cookie.setPath("/"); // 모든 페이지에서 접근 가능

하지만 HttpOnly로 설정했을 때 해당 사용자가 권한에 따라 접근이 제한된 페이지에 들어갈 때 React 서버에서 Spring 서버로 토큰을 어떻게 전송할 수 있을까에 대한 고민을 하게 되었습니다.

처음에는 헤더에 저장하여 프론트 단에서 body에 담아 보낼 생각을 했었습니다.

하지만 이 경우 자바스크립트 코드를 통해 헤더의 정보를 가져올 수 있게 되어 HttpOnly 설정이 소용 없게 된다는 문제점이 있었습니다.

해당 문제를 해결하기 위한 방법을 찾아보던 중, 어노테이션 중에 @CookieValue 를 통해 React 서버에서 요청을 보내면 해당 요청에 자동으로 담겨서 오는 쿠키 값을 가져올 수 있다는 것을 알게 되었습니다.