별거(?) 아니지만 소소한 이야기를 해보려고 한다
사이드 프로젝트 과정 중에 소셜로그인 작업을 하고 있다
소셜로그인 이야기를 하기 앞서 우리는 기존 로그인 토큰 관리를 Cookie에 담고 있다
그래서 다음 소셜로그인 작업을 할 때도 같은 방식으로 토큰 관리를 할 예정이었다
본론으로 들어가서
카카오 소셜 로그인 Redirect Uri 설정을 한 후 프론트 담당이었던 나는 해당 카카오 소셜 로그인 url로 보냈다
그러고 나서 카카오 로그인을 한 후 백엔드 개발자분께서 Cookies.set ~ 이렇게 ACCESS_TOKEN, REFRESH_TOKEN을 저장해 주셨다
그러면 나는 프론트에서 쿠키에 저장된 토큰을 가져와서 axios.defaults.headers.Authorization = "Bearer ${ACCESS_TOKEN}"이렇게 설정을 했다
하지만,
왜!!!! 쿠키에 저장된 토큰을 불러오지 못하는,,,
왜? 하지만 필자는 누구의 탓을 하지 않고 원활한 관계가 유지가 되는 개발팀이 되고 싶기에 필자의 실수라고 생각하고 계속해서 원인을 찾아봤다.
하지만 원인은 모르겠고 온갖 모든 곳에 콘솔을 찍어봤다 ㅎㅎㅎㅎㅎ
const aceessToken = Cookies.get("ACCESS_TOKEN")
console.log(accessToken);이런 식으로 말이지..
그래도 안 뜬다 계속 bearer undefined...
소셜 로그인이 아닌 우리가 만든 로그인을 한 후 토큰을 가져왔을 땐 콘솔에 잘 찍히는 걸 확인했다
자, 이제 누구를..
그러다가 다음날 출근인데 이거 때문에 새벽 3시에 자고 일어났는데, 백엔드 담당 개발자분께서 서버에서 setCookie를 할 때 옵션 'http-only'로 주셨다
이제는 소셜로그인 토큰을 가져와 bearer에 잘 담긴다!
http-only ?
Cookies 쿠키는 프론트(클라이언트)에서 자바스크립트로 가져올 수 있기 때문에, 보안적인 측면에서 좋지 않습니다.
그래서 가장 대표적인 공격 중 하나가 CSS(Cross Site Scripting) 입니다.
즉, 해당 CSS를 보안하기 위한 설정으로 http-only 설정을 합니다.그러면 http-only를 false로 해도 괜찮은 걸까?
아니! XSS 공격 방지를 위해 http-only 옵션을 속성을 부여해야 한다.
그러면 어떻게 접근할까 고민하다가,,,
지금 나는 React가 아닌 Nextjs를 사용하고 있었다
서버 컴포넌트로 조회해서 접근하면 되겠다 라는 생각을 하고만 있고 글을 작성하고 있다
지금 당장 작업하러 가볼거다
해결하고 왔다
일단 위에 삭선을 스~윽 그은 글은 무시해도 될 것 같다
알지도 못해서 한번 생각을 적어둔거라 그냥 무시하시길,,,
토큰이 undefined 떳던 이유는 서로 도메인이 달랐기 때문이다.
필자는 프로젝트를 프론트 도메인 서버 도메인이 다르다. 왜 다르게 만들었는지 모르겠다
아마 다른 도메인 서버를 두개나 띄우고 싶었던 불필요한 실험정신에 해본 것 같다
웹 브라우저 정책상 다른 도메인으로 쿠키를 넘겨줄 수 없다는 사실을 알게 되었다.
Cookie도 하나의 origin을 갖는다고,,,
그러면 http-only를 false로 풀어줘야 하나?
절대 안된다 자바스크립트 코드로 접근해서 탈취할 수 있는 보안적 문제가 있다
그래서 백엔드 개발자랑 고민했던 방법은 단, 하나
퓨전이다
도메인을 하나로 합치는 것.
이게 맞다 처음부터 이렇게 했어야 했다.
나는 Vercel을 이용해서 서버 도메인을 만들었다(심지어 domain이름을 샀다)
이건 tmi지만 합치는 과정은 다음과 같다.
EC2에 도커 컨테이너를 만들었다. 그래서 서버 프론트 각각의 이미지를 가지고 띄워주어 같은 도메인으로,,,,
그 결과 쿠키로 넘어온 토큰을 잘 받아올 수 있었다 (ㄹㅇ 감격했다)
이 프로젝트는 체쿠리라는 출석부 프로젝트이다.
개인 학원에는 출석부 시스템이 갖춰줘있는 곳이 없기 때문에 만들게 되었다. (친구 와이프 분이 운영하셔서 만들게 되었다)
