이번에 회사 웹사이트에 SSO 관련해서 한 아이디로 로그인 후 로그아웃 하고 다른 아이디로 로그인 할 경우 연동이 안되는 문제가 있다.
이것을 해결하기 위해 앱을 분석을 하고 있는데 이상하게 jwt가 localStorage와 Cookie로 알아서 저장이 되는 현상이 있었다.
아에 리액트 앱들 드러내봐도 계속 자동으로 저장이 됐는데 알고보니 package.json에 프록시 서버 주소가 적혀있었고 그 프록시 서버에서 내 로컬스토리지와 쿠키를 저장하는 코드가 있었다.
// package.json에 있는 프록시 서버 주소 예시
"proxy": "http://123.456.789.987:1123/",sso로그인 페이지에서 로그인을 하면 jvascript referrer로 어디서 왔는지 기억했다가
https://asdf1234.com/sso 와 같이 sso로 토큰을 보내는 방식으로 되어 있었다.
회사에서 내가 담당한 페이지의 프록시 서버는 그 토큰을 받아서 로컬스토리지와 쿠키로 저장을 하고 있었다.
그런데 프록시 서버가 무엇인지 잘 모르기 때문에 이번에 개념정리를 하고 넘어가려 한다.
프록시 서버(proxy server)
프록시 서버 : 클라이언트가 프록시 서버를 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용프로그램
프록시 서버에 요청된 내용들을 캐시를 이용하여 저장하기도 한다.
이렇게 캐시를 해주었다가 필요할 때 가져다 쓰면 원격서버까지 가지 않아도 돼서 전송시간과 트래픽을 줄일 수 있다.
프록시 서버의 주로 아래와 같은 목적으로 이용한다고 한다.
- 캐시데이터
- 보안
- 접속 우회
React에서 프록시 서버를 대체할 수 있을까?
이번에 기존에 사용중인 프록시를 거둬내고 리액트에서 /sso 라우터를 만들고 그 안에서 jwt를 받고 그것을 로컬스토리지에 저장해야 한다.
될까?
브라우저가 서버처럼 /sso api 라우터를 열어놓을 수가 있는건가?
뭔가 다른 방법이 있는지 생각을 해봐야겠다.
(앵귤러는 어떻게 한거지?)
참고 문헌
