Token 관련 정보를 Cookie 로? 아니면 Payload 로? #8
Replies: 3 comments 4 replies
-
|
Next.js를 BFF(Route Handler)로 쓰는 현재 구조 기준으로 보면,
이 조합이 가장 자연스럽다고 생각합니다. 지금은 브라우저가 직접 백엔드에 붙는 React SPA 구조가 아니라, Browser <-> Next.js Route Handlers (/api/**) <-> Spring Backend이렇게 항상 Next.js를 한 번 거치기 때문에, 반대로, 백엔드는 BFF에게 { "accessToken": "...", "refreshToken": "..." }처럼 payload로만 응답을 주고, 이 값은 서버-서버 통신(백엔드 ↔ Next.js) 에서만 보이고 Next.js Route Handler가 이 값을 읽어서 Set-Cookie(HttpOnly + Secure + SameSite 옵션)를 직접 구성해 브라우저에 내려주면 브라우저 입장에서는 오직 HttpOnly 쿠키만 가지고 움직이게 됩니다. 정리하면, 우리처럼 Next.js BFF가 사이에 있는 구조에서는 (여기서 말하는 BFF는 Next.js Server(Route handler)를 뜻함)
|
Beta Was this translation helpful? Give feedback.
-
|
@eunwoo-levi |
Beta Was this translation helpful? Give feedback.
-
|
@eunwoo-levi 추후에 인증이 필요한 api 를 요청할때는 흐름이 어떤식으로 이루어지는건가요 ? 브라우저 쿠키 (access, refresh) 를 BFF (Next) 로 전달하면 해당 쿠키에 있는 토큰을 WAS (Spring) 의 Header Authorization 필드로 미들웨어단에서 처리하는건가요 ? 그렇다고 했을때 서버컴포넌트가 아닌 브라우저에서 다이렉트로 WAS (Spring) 으로 요청을 하는경우에는 WAS 가 Authorization 필드가 아닌 쿠키를 받기때문에 로직이 복잡해지거나 제대로 토큰을 받지 못할것 같은데 어떤식으로 처리하는지 궁금합니다! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Token 관련 정보를 Cookie 로? 아니면 Payload 로?
최근 보안관련 이슈가 증가하고 있는 추세에서, 인증/인가 부분에 대한 고민이 생겨 프론트분들께 여쭤보고 싶은게 생겼습니다!
[Main Point]
인증/인가 관련해서 서버측에서 정보를 전달할 때, Cookie 로 RefreshToken 를 전달할 지 아니면 Payload 로 전달할지에 대해 의견을 여쭤보고 싶습니다.
개요
Reddit 을 살펴보던 중, 많은 사람들이 WAS ( Server ) 에서 httpOnly 설정을 추가하고, Domain 을 서버 쪽 Domain 으로 설정해놓은 Cookie 를 발행하고 있는 것을 알 수 있었습니다. 해당 방식처럼 사용했을 때, React 에서 LocalStorage 를 이용하지 않고, 자동으로 AccessToken 과 RefreshToken 에 대해서 보낼 수 있다는 장점이 있어, Response 에 Server 측에서 쿠키를 구워서 전달해주는 방식을 생각하고 있습니다! 🍪 ( 현재는 Payload 로 전달하고 있습니다! )
논의하고 싶은 부분
하지만 제가 알기로는 Server 에서 Cookie 를 구워서 전달할 경우, Domain 이 달라 React.js ( CSR관점 ) 에서 Third-party 쿠키로 간주하는 문제가 발생하는 걸로 알고 있습니다.
그리고 이번 프로젝트에서 Next.js 를 사용하는 걸로 알고있는데, Next.js 에 대해서는 큰 지식을 가지고 있지 않아서, Cookie 관련 부분에서 어떤 사용방식을 가져가는지에 대해 프론트엔드분들은 어떻게 생각하시는지 궁금합니다!
Beta Was this translation helpful? Give feedback.
All reactions