문제점
react + express에서 passport로 회원인증을 구현했는데 로컬에서 테스트 했을때도 의도치 않게 로그인이 풀리는 경우가 있었는데 브라우저 설정 차이라고 생각하고 넘겼지만 AWS로 배포 후엔 회원 인증이 요구되는 페이지에 접속시 강제로 로그인이 풀리는 현상이 발생했다.
서버쪽에서 passport를 구현할때 제대로 이해하지 못했다고 생각하고 이리저리 수정하다 도착한 결과는 react에서 쿠키를 같이 보내주지 않아서 req.isAuthenticated() / req.user 값이 항상 false/undefined 였던 것이었다.....
현재 사용하는 개발 환경에서는 프론트와 백엔드의 도메인 주소가 다르기 때문에 CORS를 사용해서 통신한다. 여기서 착각하는게 엄연히 서로 다른 도메인끼리 통신을 하는 것이기 때문에 당연히 쿠키가 공유되는 취약점은 기본적으론 허용되지 않을 것이다...
React : axios에서 withCredentials : true 해주기
Express : app.use(cors({ origin: true, credentials: true })) 해주기
+ https가 아니면서 express-session 설정에서 cookie: { secure: true } 을 키면 서버에서 클라이언트로 쿠키를 보내주지 못한다.
해치웠나...?
결국 쿠키를 보내주고 받는건 해결했지만 아직도 React에서 새로고침을 했을때 쿠키는 남아있는데도 로그인이 풀리는 듯한 현상이 남아있었다. 특이한점은 /info (세션 정보 요구) 페이지로 넘어갔을때 이 현상이 해결되는 것이다.
새로고침을 하면 리덕스 스토어가 초기화된다. 하지만 쿠키가 남아있기 때문에 /info로 세션 정보를 서버에 넘겨주고 다시 받아주면 리덕스 스토어가 채워져서 돌아오는 원리라고 생각되는데 이를 해결할 방법을 찾던 중 고민에 빠졌다.
1. React에서 거의 모든 페이지에 세션 정보를 요구하게 만든다.
- 프론트에 컴포넌트를 만들때마다 같은 코드를 반복, 서버에 계속해서 세션 정보 호출 (비효율적이라고 생각)
2. 서버단에서 해결하기.
- 애초에 세션 관리 부분은 백엔드의 역할이고 처음부터 세션 인증을 통과해야 페이지를 보여주게 해준다면 자연스러울 것이다.
- 문제는 현재 모든 페이지를 React-Router 기능을 이용해 클라이언트에서 라우터 처리를 하고 있으며 서버에서 리다이렉트를 보내면 리액트의 장점을 못살림..
이를 해결하기 위해 우선 리덕스를 좀 더 효율적으로 사용하게 수정하면서 답을 찾기로 했다...
