JWT 토큰을 공유(?) 하는 방법

Question

안녕하세요. 
node.js와 react를 활용하여 로그인 인증, 인가를 구현 하고 있습니다.

웹을 시작한지 얼마 안돼 삽질을 좀 하고있는데 해결하는데 어려움이 있어 질문을 올리게 됐습니다.

1. 현재 개발 환경 : 
 - Node.js(express)로 JWT토큰을 발급하고,인증하는 서버를 실행 중 입니다.(localhost:8080)
 
-  localhost:3000 으로 로그인 페이지를 만들었고, 로그인 성공시 서버로부터 JWT토큰을 발급 받게 되어있습니다.
 (토큰을 현재는 로컬스토리지에 저장 하고 있습니다)

-  localhost:3001 로 새로운 서비스페이지를 만들고있습니다.

2. 질문 :
- localhost:3000에서 서버로부터 전달받은 JWT토큰을
localhost:3001에게 전달하고, localhost:3001은 전달 받은 토큰을 가지고
인증서버에 토큰을 주면서 유효성을 확인 받고 싶습니다.

현재는 3000번에서 3001번으로 URL 이동하는 버튼을 만들었는데
이때 URL 파라미터에 토큰값을 추가해서 전달하고 3001번이 전달받은 파라미터에서 토큰값을 다시 로컬스토리지에 저장하고 사용하고있습니다..

이 방법이 아무리 생각해도 보안적으로 문제가 될 것 같아서 이런 경우 어떤식으로 구현을 해야 좋은방법인지 고민하다가 이곳에 질문을 올리게 됐습니다.

Accepted Answer

.

김하림 · Answer

보안이 우려되신다면 로컬 스토리지 대신에 쿠키를 사용하시는 것을 추천드립니다. 쿠키를 사용하면 로컬 스토리지에 비해 보안적인 이점을 더 챙길 수 있을뿐더러, 별도 작업없이 서브 도메인간에 쿠키를 공유할 수 있습니다. (다만, 질문자 분이 구성하신 두 개의 서비스가 서브 도메인으로 구성되어있다는 가정 하에 가능합니다.)

구현은 쿠키의 Domain 속성(https://www.harimkim.com/articles/2.%20Area/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%20%EA%B0%9C%EB%B0%9C/Web%20API%20%EC%82%AC%EC%9A%A9%EB%B2%95/%EC%BF%A0%ED%82%A4%20(HTTP%20Cookie)#domain-path)을 이용하면 서브 도메인 간에 쿠키 공유가 가능합니다. 예를 들어, `Domain=naver.com`으로 설정한 쿠키를 만들면 `news.naver.com`에서도 자동으로 쿠키가 공유됩니다.

쿠키의 보안적인 이점은 HttpOnly, Secure, SameSite 등 공격자의 임의 조작을 막기 위해 설정할 수 있는 옵션들이 있습니다. 로컬 스토리지는 자바스크립트로 쉽게 가져갈 수 있기 때문에 쿠키가 일반적으로 보안이 더 좋습니다.

만약 완전 다른 n개의 서비스(서브 도메인 X)를 운영하시는 경우, OAuth 2.0을 구현한 중앙 인증 서버를 둬야 하는데 작업이 커질 수 있습니다. 이 경우 상황에 따라 서브 도메인 통합을 고려하시거나, 서브 도메인 통합이 어려운 경우 공수가 크더라도 중앙 인증 서버를 구현하시는 게 좋은 선택이 될 수 있습니다.