별거(?) 아니지만 소소한 이야기를 해보려고 한다
사이드 프로젝트 과정 중에 소셜로그인 작업을 하고 있다
소셜로그인 이야기를 하기 앞서 우리는 기존 로그인 토큰을 Cookie에 담아 관리하고 있다
그래서 다음 소셜로그인 작업을 할 때도 같은 방식으로 토큰 관리를 할 예정이었다.
서로 다른 도메인의 쿠키 이슈
본론으로 들어가서
카카오 소셜 로그인 Redirect Uri 설정을 한 후 프론트 담당이었던 나는 소셜로그인을 클릭 후 해당 백엔드 url로 보냈다.
그러고 백엔드에서 Cookies.set ~ 이렇게 ACCESS_TOKEN, REFRESH_TOKEN을 저장 후 메인페이지로 Redirect 했다.
그러면 나는 클라이언트단에서 쿠키에 저장된 토큰을 가져와
Axios 인터셉터 설정 시, 모든 요청에 토큰을 자동으로 포함시키기 위해
axios.defaults.headers.Authorization = `Bearer ${ACCESS_TOKEN}` axios header Authorization 이렇게 설정을 했다.
그러나 여기에 문제가 생겼다.
왜!! 쿠키에 저장된 토큰을 불러오지 못하는 문제가 생겼다.
왜 불러오지 못할까?
하지만 필자는 어떤 설정을 누락했던 것이 아닐가 생각하고 계속해서 원인을 찾았다.
데스크 리서칭을 하면서 설정도 옳바르게 한 것 같고 콘솔도 찍어보면서 문제 해결을 위해 나아갔다.
const aceessToken = Cookies.get("ACCESS_TOKEN")
console.log(accessToken);이런 식으로 말이지..
그래도 안 뜬다 계속 bearer undefined...
원인은 모르겠다...
소셜 로그인이 아닌 우리가 만든 로그인을 한 후 토큰을 가져왔을 땐 콘솔에 잘 찍히는 걸 확인했다
문제와 싸움 끝에 원인을 발견하게 되었다....🥲
이유는 서로 도메인이 달랐기 때문이다.
현재 만들고 있는 플랫폼의 백엔드와 프론트엔드는 서로 다른 도메인을 가지고 있었기 때문이다.
기본적으로 서로 다른 도메인 간에는 쿠키를 공유할 수 없다.
이는 보안상의 이유로 브라우저가 쿠키를 "same-origin policy" 기준으로 제한하고 있기 때문이다.
왜 도메인을 다르게 만들었는지 모르겠다
아마 다른 도메인 서버를 두개나 띄우고 싶었던 불필요한 실험정신에 해본 것 같다.
웹 브라우저 정책상 다른 도메인으로 쿠키를 넘겨줄 수 없다는 사실을 알게 되었다.
Cookie도 하나의 origin을 갖는다고,,,
토큰을 QueryString으로?
그래서 생각했던 방법은 토큰을 queryString, 즉 URL로 넘기는 방법이였다.
이렇게 하면 url에 파싱해와서 토큰을 정상적으로 가져올 수 있기 때문이다.
물론 JWT 토큰이여서 복호화가 어렵고 안전하니까 url에 노출되어도 괜찮지 않을까?
하지만 이 방법이 보안적으로 안전할까??
그렇지않다.
- 누구나 볼 수 있다
- URL은 주소창에 그대로 노출된다.
- https://example.com/page?token=abc123 ← 이걸 복사해서 누가 보내면 토큰까지 전부 복사됨
- 기록에 남는다
- URL은 브라우저 방문 기록, 서버 로그, 분석 도구, 공유된 링크 등에 그대로 남는다.
- 즉, 토큰이 여기저기 저장되기 쉽다 -> 해커가 노리기 아주 좋아요!🧑💻
- 캐시가 될 수 있다.
- 브라우저나 CDN이 URL 기준으로 페이지를 저장할 수 있다.
- 그래서 내 토큰이 담긴 페이지가 다른 사람에게 보여지는 위험이 있다.
최고의 방법은?
그래서 동료분이랑 고민했던 방법은
단, 하나
퓨전이다
도메인을 하나로 합치는 것이었다.
Nextjs는 Vercel 배포 툴을 이용해서 배포했었다. (심지어 domain이름을 샀다)
그래서 도메인을 통합하기 위해서는 빌드 및 배포 과정을 변경했다.
EC2에 도커 컨테이너로 프론트(Next.js)와 백엔드(NestJS)를 각각 띄우고, Nginx를 통해 하나의 도메인으로 묶엇다.
덕분에 CORS 없이 쿠키로 토큰 받는 것도 잘 동작했고, 실제 쿠키가 서버에서 잘 전달되는 걸 확인했다. (뿌듯)
