[Next.js] 로그인 하지 않은 사용자의 강제 접속 이슈 (feat.middleware)

문제 상황

로그인 하지 않은 사용자가 url을 통해 강제 접속이 되는 보안 이유가 발생하였습니다.

ex) 로그인을 한 유저에게만 다른사람의 프로필 페이지나 게시글을 보게 하려고 했는데 게시글 id, 유저 id를 알아내어 url을 통해 강제로 접속 가능한 이슈

 

이것을 해결하기 위해 Next.js에서 제공해주는 middleware를 사용하였습니다.

 

middleware란?

Next.js 12부터 도입된 기능으로, HTTP 요청이 서버로 전달되기 전에 특정 작업을 수행할 수 있게 해줍니다. 미들웨어를 사용하면 요청을 처리하거나 응답을 가로채서 변경할 수 있으며, API 라우트와 페이지의 로직을 더욱 세밀하게 제어할 수 있습니다.  파일 경로 : 프로젝트의 루트 디렉토리 (최상단) 파일 이름 : middleware.js 또는 middleware.ts 파일로 정의

 

middleware를 사용하여 public으로 접근 가능한 URL 목록을 생성해 주었습니다.

//퍼블릭으로 접근 가능한 URL 목록
const publicOnlyUrls: Routes = {
  "/": true,
  "/enter": true,
  "/create-account": true,
  "/github/start": true,
  "/github/complete": true,
  "/kakao/start": true,
  "/kakao/complete": true,
};

 

로그인x) public을 제외한 다른 페이지로 url을 강제 접속 시 => /enter로 이동
로그인o) Z다시 로그인 페이지로 가서 이중 로그인을 방지 => /home으로 이동

export async function middleware(request: NextRequest) {
  const session = await getSession();
  const exists = publicOnlyUrls[request.nextUrl.pathname]; //유저가 publicOnlyUrls로 이동하는지 알 수 있게함

  //로그인하지 않은 상태
  if (!session.id) {
    if (!exists) {
      return NextResponse.redirect(new URL("/enter", request.url));
    }
  }
  //로그인 한 상태
  else {
    if (exists) {
      return NextResponse.redirect(new URL("/home", request.url));
    }
  }
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};
//미들웨어가 실행되지 않는것

 

이렇게 middleware를 사용하여 조건에 따라 로직을 추가 하여 보안 및 사용자 경험 개선에도 많은 도움이 되었습니다.

 

보안 이슈 해결 완료!