인프런 커뮤니티 질문&답변
작성한 질문수
프론트엔드 + 서버 oauth2 연동
작성
·
163
·
수정됨
0
안녕하세요, 좋은 강의 감사합니다.
현재 제가 개발중인 react 로 된 SPA 어플리케이션이 있는데요, 프론트엔드에서 직접 authorization server 로 access token 을 가져오자니 페이지가 새로고침 될때 날라가는 현상이 발생합니다. 이를 localStorage, sessionStorage, cookie 등에 저장하는것도 안전하지 않아서 (혹시 안전하게 하는 방법이 있나요?)
아예 "로그인"만 서버쪽에서 수행하고 access token, refresh token 을 프론트로 전달해줘서 refresh token 만 httpOnly Cookie 에 넣으려고 합니다. 이제 새로고침 될때마다 서버에 access token 요청을 refresh token 으로 한다음, 그 access token 을 사용하려고 합니다.
혹시 이 같은 방식이 쓰이는지 알 수 있을까요? 아니면 추천해 주시고 싶은 방식이 있으신가요?
2. 서버 사이드 view 를 통해 로그인만 oauth2Login 으로 수행하고, 로그인 후 나머지는 SPA 프론트엔드로 리다이렉트 가 가능한가요? 혹은 이렇게 쓰기도 하나요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
광전사님께서 질문하신 프론트엔드와 백엔드 서버 간의 OAuth2 연동 방법에 대해서는, 특히 Access Token과 Refresh Token을 어떻게 안전하게 관리하고 활용할 수 있는지에 대한 고민이신 것 같습니다.
일반적으로, SPA(Single Page Application)에서 OAuth2를 활용할 때 Access Token은 브라우저의 sessionStorage나 localStorage에 임시로 저장하게 되며, 보안상의 이유로 Refresh Token을 클라이언트 측에 직접 저장하는 것은 권장하지 않습니다. 대신, Refresh Token은 httpOnly Cookie에 저장하여 서버로만 전송되도록 하여 XSS(Cross-site Scripting) 공격으로부터 보호하는 것이 일반적인 접근 방식입니다.
질문하신 내용과 유사한 상황에 대해 설명하고 해결 방법을 제안한 기존 답변은 다음과 같습니다.
유사 질문 1: 소셜 로그인 관련 질문드립니다!!
이 질문은 소셜 로그인 이후 토큰을 서버에 인가를 요청하는 과정에 대한 구현 방법을 묻는 내용입니다. 여기서는 OAuth 2.0 표준을 따르며, session 대신 Cookie를 사용하는 방법과 OAuth 2.0 로그인 성공 이벤트 처리에 대해 답변을 제공합니다.
질문하신 방식은 실제로 많이 사용되는 방식 중 하나입니다. 클라이언트 측에서 직접 Access Token을 처리하는 대신 서버 측에서 Token을 관리하고, 안전하게 클라이언트에 전달하여 사용하는 방법은 보안성을 높이는 좋은 전략입니다. 특히, httpOnly Cookie에 Refresh Token을 저장하고 사용하는 방식은 토큰 탈취를 방지하며, 서버 측에서 토큰의 유효성을 검증하고 새 Access Token을 발급하는 과정을 안전하게 관리할 수 있게 합니다.
이러한 접근법은 CSRF(Cross-Site Request Forgery) 공격과 XSS 공격으로부터 보호하는 데에도 도움이 됩니다. 다만, 이와 관련하여 구현 시 CORS(Cross-Origin Resource Sharing) 설정과 CSRF 보호 기능을 적절히 설정하고 관리하는 것이 중요합니다.
이 질문에 대해 깊이 있게 답변한 지식공유자의 이전 답변과 유사한 질문을 참조하려면 위 링크를 방문하시면 됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.