미들웨어, 알고나니 다 설명된다!

오랜만에 디깅미션이 돌아왔다!

이정환 Next강의를 이미 완강했었기때문에 수업을 잘이해하지않을까 생각했는데

미들웨어는 설명이없어서(있었는데 기억을 못하는걸수도;;)

나의 영원한 친구 클로드와 지피티와 함께 미들웨어에 대해 공부하는 시간을 가졌다

 

미들웨어는

건물입구의 경비원 같은 존재라 생각하면 된다. 페이지 보여주기 전에 한번 거르는 관문인것이다

// middleware.ts
import { NextResponse } from 'next/server'

export function middleware(request) {
  const token = request.cookies.get('token')

  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard/:path*']
}

사용자가 /dashboard 접속하면 미들웨어가 로그인여부를 따진다

안했으면 /login으로 보내고 했으면 그대로 통과시켜주는 것이다

 

예시처럼 로그인 여부체크나 특정 페이지 접근제한. 국가별 리다이렉트 등의 상황에서 자주 쓰인다고 한다

 

 

미들웨어 초보들은 들으라

export function middleware() {
  console.log('실행')
} //큰일난다!

export const config = {
  matcher: ['/dashboard/:path*']
} //matcher로 쓸곳만 명시하자

matcher 안쓰면 이 콘솔메시지가 페이지, 이미지, css, api, 심지어 favicon까지 전부거쳐 실행될것이다

당연히 성능저하가 된다

 

matcher: '/:path*'//모든경로 다포함

export const config = {
  matcher: [
    '/((?!login|signup|api|_next|favicon.ico).*)' //login, signup, api, 정적 파일 빼고 전부
  ]
}

matcher에 모든경로를 포함해서 체크하면 리다이렉트된 페이지가 또다시 미들웨어를 타기때문에 무한루프가 된다

그러니 꼭 필요한 경로에서만 쓰도록 명시해야한다.

 

 

하나더 말하자면 미들웨어는 서버에서 실행된다.

localStorage.getItem('user') // 응안됨.

때문에 localStorage같은 브라우저 api들은 먹히지 않는다.

사용할수 있는것은 쿠키,헤더,url 정보이니 명심하라~!!!!!!!

 

 

 

middleware의 보안이슈

RSC 취약점이 발견되엇다

작년 12월 React Server Components의 취약점때문에 보안 공격이슈가 있어

많은이들의 react,next 프로젝트가 코인 채굴기로 변질되어있었다라는 후기를 꽤나 볼수있었다.

 

이후 next16이 나오면서 middleware.ts는 proxy.ts로 바꾸라고 권장하고 있다.

단순히 파일명 변경이 아니라 proxy에서는 전달만하고 인증처리는 서버컴포넌트에서 안전하게 인증하라는 뜻이다!

(쓰는 방법은 아래에서 알려드림)

 

아직까진 middleware라고 적어도 동작은 하지만 언제 또 없어질지 모르니 걍 proxy로 쓰도록하자

마이그레이션하는 방법은 공식문서 참고 ㄱㄱ

 

https://nextjs.org/docs/messages/middleware-to-proxy

Renaming Middleware to Proxy

 

https://www.dailysecu.com/news/articleView.html?idxno=203063

[긴급] React·Next.js RSC서 인증 없는 원격 코드 실행 취약점…“패치 미적용 시 즉각 침해 가능” -

 

 

 

그래서 결론은 2단계 인증패턴을 쓰면 좋다!

// middleware or proxy
export function middleware(request) {
  const token = request.cookies.get('token')

  if (!token) {
    return NextResponse.redirect('/login')
  }
}

먼저 미들웨어에서 토큰 존재만 체크한뒤

 

// app/dashboard/page.tsx
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'

export default async function Page() {
  const token = (await cookies()).get('token')
  if (!token) redirect('/login')

  const session = await db.session.findUnique({
    where: { token: token.value }
  })

  if (!session) redirect('/login')

  return <>대시보드</>
}

서버컴포넌트에서 DB까지 확인하면 그때가서 진짜 인증하는 구조로 쓰는것이 안전하겠다.

 

 

대충 이런짤로 마무리 (미들웨어 이해완했다는 뜻)