SPA는 클라이언트 서버위에서 구동됩니다.
SPA 는 클라이언트에 서버를 만들어서 구동합니다. 주로 NODE.JS 서버를 이용합니다. 단순한 경우 아닌 경우도 있습니다.
ROLLUP이나 WEBPACK 등이 번들링과 웹서버 개발환경을 클라이언트에서 제공하는 것은 NODE.JS에서 서버를 구성하는 기능을 제공하기 때문입니다.
이러한 방법을 이용하여 클라이언트 측에 NODE.JS 기반의 서버환경이 구성됩니다.
컴퓨터에 있는 폴더의 index.html 파일은 실행하면 화면이 보이지만 뭔가 js를 사용하거나 하면 화면이 나오지 안습니다. 보안상 안된다고 하는데, 아무튼 클라이언트에서 js의 모든 기능을 활용하기 위해서는 클라이언트 환경에 웹서버를 구성해야합니다.
비동기 통신
이런것이 가능하게 된것은 비동기방식 통신이 가능해지면서 만들어진 개발 방법입니다
비동기 방식이(흔히 알고 있는 ajax,fetch, axios ) 도입되면서
우리가 화면으로 보는 웹페이지로 접속한 서버와 데이터를 요청을 하는 서버를 서로 다르게 구성할 수 있게 되었습니다.
그래서 클라이언트 컴퓨터에 자체 도메인인 "http://localhost:port번호" 나 별도의 ip 를 부여해서 SPA클라이언트 웹서버가 돌고, 비동기 통신을 이용해 타도메인으로 서비스 DB가 있는 서버와 통신하게 됩니다.
이러한 일을 전문적으로 하는 시스템이 별도로 개발된것도 있지만,
이미 있는 서비스를 이용하다보니 웹서버, 그리고 웹브라우저 등등 기존의 보안 방어 방식에 제한을 받게됩니다.
크로스도메인 문제.
우선 기존 쿠키 저장 방식은 도메인이 같을 때 만 유효합니다.
클라이언트에서 버서로 요청을 보내면 도메인이 같은지 판단하고 같으면 쿠키의 값을 전달합니다. 그런데, 우리가 웹으로 오픈한 페이지는 http://localhost 이기 때문에 서비스 도메인에서 도메인이 같지 않다고 판단하여 쿠키를 받지 않습니다. 이런 이유로 과거 쿠키 저장 방식의 로그인은 모두 막힙니다. 구현 할 방법이 없습니다. 간혹 라이브러리로 제공하는 경우도 있지만, 시간이 지나면 막고 열고 막고 열고를 반복 합니다. 그래서 서비스 중간에 로그인 풀린다고 계속 VOC접수 됩니다.
JWT토큰 & Authorization header bearer 인증
그래서 헨들링 가능한 범위에서 대안을 찾아 낸것이 jwt토큰을 보안을 적용한 header Authorization 전달 방식입니다.
Authorization header bearer : (jwt토큰)
JWT은 암호화 방식
Authorization header bearer 는 통신방식입니다.
서버에 매 요청마다.
Authorization header bearer 에 jwt 토큰을 담아서 보내면
서버에서 jwt 토큰을 복호화 하여 여기에 회원 id 를 추출하여
이를 회원으로 특정하는 방식입니다.
문제는 JWT 토큰의 보안이 쉬약하다는 점입니다.
그래서 하나더 더한 것이, REFREST TOKEN입니다.
AXIOS를 사용하는 이유가 FETCH 보다 편해서인데 그중에서
REFREST TOKEN 을 요청하는 방식에서 request와 respons 를 분리해서
jwt 토큰을 보내고 결과를 받고 유효하지 않으면 다시 REFRESH 토큰으로 재인증하여 JWT 토큰을 재발행하는 일련의 과정을 1CALL로 처리할 수 있는 Interceptor 기능을 제공합니다. 다.
JWT 에 회원ID 와 발행시간, 유효시간이 있어서 유효시간 동안 토큰을 사용할 수 있고 유효시간이 지나면, REFRESH TOKEN 으로 재발행 합니다.
보안이슈로 추천하는 JWT 토큰 유효시간은 15분
REFRESH TOKEN 유효시간은 30일 정도로 알고 있습니다.
그리고 REFRESH TOKEN은 인증값을 DB에 저장하여 회원유무를 확인합니다.
클라이언트 유효성 체크를 위해 AGENT 정보를 DB에 담아 비교를 하기도 합니다.
REFRESH TOKEN은 서버에 저장하는데, REDIS를 이용하는 것을 최근 검토중에 있습니다. 최근까지는 refrsh token 도 클라이언트에 저장했는데, 이것도 시간을 들이면 암호를 풀수가 있어서 외부로 노출하지 않는 방식을 택하는 쪽으로 가고 있는 것 같습니다.
