Live , Dev For Client
GDSC 블로그 프로젝트를 하면서 가장 힘을 많이 쓰고 고생한 건 아무래도 Auth 관련 인 것 같다.
지금 로그인 방식은 Uri 로 parameter 에 Token 값을 전달 하는 형식이다. 그런데 이런 경우 uri를 check 하는 JS 에 의해서 쉽게 탈취 될 수 있는 보안적인 문제가 있다고 생각 했다. 따라서 쿠키로 토큰 값을 받아오는 형식을 생각했다.
현재 가장 원하는 로그인 방식은 Cookie token 을 서버에서 받아 오는 것이다.
여기서 좀 문제가 많았다..
문제
- Blog Client Live 서버는 API 서버와 상위 도메인이 같아서 쿠키 값을 전달하는데 문제가 없었다.
- Auth Server 와 Client 개발 환경은 도메인이 달라 쿠키가 전달이 안됬다. Cookie Cross Origin restrict …
- 언제 부터 인지 쿠키의 보안 문제를 해결하기 위해서 sameSite = None 에서 rax 등으로 변경 되었다 따라서 cors 간 쿠키 공유가 불가능 하다.
- CORS 간 쿠키 공유를 위해서 백엔드 쿠키 세팅 , 프론트 withCredential 세팅 , Access-Allow-origin 구체화 등 번거로운 점이 많다.
- 자세한 내용은 아래 자료 참조
해결 하려던 행위 1 번
먼저 해결 하고자 했던 방식의 첫 번째 이다. 물론 이걸로 해결 하진 않았다…
return `https://accounts.gdsc-dju.com/oauth2/authorization/google?redirect_uri=${
process.env.NODE_ENV === 'development'
? OAUTH2_REDIRECT_URI_Dev
: OAUTH2_REDIRECT_URI
}`;위는 우리 프론트 엔드 분들의 코드중 일부분이다. 다음 URL 을 통해서 oauth Google Request 를 하게 된다.
- 이렇게 문제를 해결하려고 … 백엔드 쿠키 로직을 계속 건드렸다. ㅠㅠ 그런데 사실 도움이 안됬던…
- 더러워진 나의 커밋 로그…
여기서 문제가 많이 생긴다. 위 자료를 활용하기에 어려움이 많았는데 다음과 같다.
- 위에 참고 했던 블로그에서 말하는 내용은 axios , ajax 등을 통한 내용이다. 실제 프론트는 Location.href = “구글 로긴페이지” 뿐
- Login 관련 로직 자체를 백엔드에서 전부 담당하고 있어서 Client에서 보낼 내용은 사실 Redirect Url 뿐이다.
- WithCredential 값을 줄 방법이 없다.
- 데이터를 받아오는 방식이 아니라 Google Login Page 에서 redirect 하도록 백엔드에서 하고 있다.
- 현재 프론트에서 로그인 로직을 완료 하는게 아니라 타 도메인 페이지에서 완료 후 토큰 만 받아오는 형식이다.
해결 했던 방식
진짜 간단한 해결 방법이 아니였을까? 너무 쿠키 세팅에 치중 했던게 큰 문제이지 않았을까 싶다.
- 해결법 Localhost 도메인 주소를 바꾼다.
- 이런 방법이 있는 지 조차 몰랐다.
- 쿠키 Cross domain 간 쿠키 공유 X 로 생긴 문제면 Cross 도메인이 아니면 된다!!!
- 로컬 호스트 주소를 devlog.gdsc-dju.com:3000 도메인으로 변경 -> 도메인이 같아서 쿠키가 잘 들어옴
- 위와 같이 잘 해결 한 것을 볼 수 있다 ㅎㅎ
참고자료
- 윈도우 로컬호스트 주소 변경 https://jfbta.tistory.com/96
- 맥 로컬 호스트 주소변경 https://blog.stories.pe.kr/530
결론 및 느낀 점
- 한 가지 방법에 매몰되지 말아야겠다는 생각이 든다.
- 문제가 있으면 문제를 안생기게 하는 방법이 있다는 것 또한 많이 느꼈다.
- 첫 번째 방법이 same Site None , secure = true 로 두는 방식이라서 프론트 개발 환경에서 SSL 설정도 해줘야 하고… xss 방식에 좀 취약하다고 생각 했는데 지금 방식이 훨씬 좋고 빠르게 해결 할 수 있었다.
rocoli에요