별거(?) 아니지만 소소한 이야기를 해보려고 해!
사이드 프로젝트 과정 중에 소셜로그인 작업을 하고 있어.
소셜로그인 이야기를 하기 앞서 우리는 기존 로그인 토큰 관리를 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를 사용하고 있었어,,, 까먹은거 아님
서버 컴포넌트로 조회해서 접근하면 되겠다!!! 라는 생각을 하고만 있고 글을 작성하고 있어.
지금 당장 작업하러 가볼게!!
두서없는 글 읽어주셔서 감사합니다!
