Next.js 14 SSR로 사용자 데이터 보안 강화하기

 

아트인포

아트인포-ARTINFO

 

최근 뉴스에 댓글 기능을 추가하면서 이전에 개발하며 지나쳤던 내용이 떠오른게 있었다.

현재는 로그인되어있을때(토큰이 쿠키에 있을때) 유저데이터를 CSR로 불러와 tanstack query를 사용하여 캐싱하는 상태이다.

유저의 정보들이 네트워크 패널에 그대로 노출된다.

개발 당시에는 로그인한 본인의 정보이기때문에 보안적으로 크게 문제될거라고는 생각하지 않았지만 지금은 생각이 좀 달라졌다. 유저의 정보가 저렇게 노출되어선 안된다고 생각하였고 어떠한 방법들로 개선해볼까 생각하였고 떠오르는 방법들로는

1. BFF(Backend For Frontend)
   Next.js에 중간 연결역할을 해줄 api를 하나 더 만드는 것이다. CSR -> Next SERVER -> Api Server 방식으로
   next.js api에서 유저 정보를 받아온뒤 정말 필요한 데이터만 클라이언트로 내려주는 방식을 떠올렸었다.
   하지만 이것도 유저데이터를 내려주는 방식이기에 좋지 않다고 생각했다.
   
   
2. SSR Prefetch
   Next.js 서버컴포넌트에서 로그인여부 확인 후 유저데이터를 미리 prefetch 하는 방법이다.
   이 방식을 사용하려면 글로벌로 사용 할 수 있는 서버컴포넌트가 필요했다.
   아트인포의 라우팅 방식은
   
   

/메인, 채용, 레슨 등
app/(site)/layout.tsx

/회원가입, 로그인등 (헤더와 바텀네비게이션이 없다)
app/(auth)/layout.tsx

이런 구조로 그룹화 되어 있었기에 

/app/(site)/layout.tsx

  const accessToken = cookies().get("accessToken")
  const queryClient = GetQueryClient()

  if (accessToken) {
    await queryClient.prefetchQuery({
      queryKey: queries.users.detail().queryKey,
      queryFn: getUser,
    })
  }

  const dehydratedState = dehydrate(queryClient)

쿠키값의 여부로 로그인여부를 파악, tanstack query prefetchQuery를 사용하여 데이터를 호출 및 캐싱해준다.

/components/layout/header.tsx (CSR)

유저데이터를 실제 사용하는 곳이다.

 const { data: user } = useQuery({
    ...queries.users.detail(),
    enabled: !!data?.user,
  })

useQuery를 사용하였지만 이미 유저데이터를 prefetch하여 캐싱을 하였기때문에 호출은 일어나지 않는다.

저기에선 캐싱된 데이터를 꺼내쓰는 용도로 사용된다.

유저데이터 api는 CSR에서 호출되지 않는다.

 

Tanstack Query를 쓰게 된후로 전역상태관리 라이브러리(recoil, zustand 등)이 사용 할 일이 많이 없어졌다.

api에서 호출한 데이터를 가공없이 보관을 하고 싶은 경우엔 tanstack query의 캐싱기능을 이용하면 된다고 생각한다.

물론 정갈한 키 관리가 필요할 것이다.