csr-rsc-ssg-isr-ssr-ssrf

이 저장소는 하나 이상의 미트업을 발표하기 위한 자료로 사용될 수 있습니다. 과정은 다음과 같습니다...

• "CSR" Client Side Rendering: 표준 SPA 라이브러리로서의 React
• "RSC" React Server Components: 오직 서버 측에서만 실행되는 React 컴포넌트
• "SSG" Static Site Generation: 빌드 시점에 React 컴포넌트 실행
• "ISR" Incremental Static Regeneration: 요청 시 컴포넌트 재생성
• "SSR" Server Side Rendering: 서버 측 사전 렌더링 후 클라이언트 측 실행 (hydration)
• "SSRF" Server Side Request Forgery: 최근 Next.JS에서 수정된 보안 취약점

이 작업은 주로 두 가지 출처에 기반합니다:

• https://demystifying-rsc.vercel.app/
• https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

---

CSR Client Side Rendering

1-csr-load-data vanilla react SPA loading data

[!IMPORTANT] CSR(Client-Side Rendering): React 코드가 브라우저로 전달되어 DOM에 삽입될 콘텐츠를 생성합니다.

데모

cd 1-csr-load-data
npm start

2-csr-router vanilla react SPA routing

[!IMPORTANT] 페이지가 처음 로드된 후, 동일한 웹사이트 내에서 다른 페이지로 이동할 때 JavaScript를 사용하여 전체 페이지를 새로 고치지 않고 페이지의 일부를 다시 렌더링합니다.

데모

cd 2-csr-router
npm start

RSC React Server Components

3-rsc-load-data React Server Components (Next.js impl) loading data

[!IMPORTANT] 브라우저가 아닌 서버에서 만 실행되도록 작성된 React 컴포넌트.

데모

cd 3-rsc-load-data
npm run build
npm run start

4-rsc-router React Server Components (Next.js impl) routing

[!IMPORTANT] 컴포넌트가 서버에서만 실행됩니다. 기본 동작은 정적 렌더링입니다: 컴포넌트가 빌드 시점에 실행됩니다.

데모

cd 4-rsc-router
npm run build
npm run start

5-SSR SSR Server Side Rendering

[!IMPORTANT] SSR은 클라이언트 컴포넌트를 서버에서 사전 렌더링하는 것을 의미합니다. React 코드가 요청 시점에 실행됩니다. 결과는 향후 요청을 위해 캐시될 수 있습니다.

모범 사례: 가능한 한 컴포넌트 트리 아래쪽에 'use client'; 컴포넌트를 정의하세요.

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree

Hydration

[!IMPORTANT] "React에서 'hydration'은 React가 서버 환경에서 이미 렌더링된 기존 HTML에 '연결'되는 방식입니다. hydration 중에 React는 기존 마크업에 이벤트 리스너를 연결하고 클라이언트에서 앱 렌더링을 인계받으려고 시도합니다. 완전히 React로 구축된 앱에서는 일반적으로 시작 시 전체 앱에 대해 하나의 '루트'만 한 번 hydration합니다."

https://react.dev/reference/react-dom/client/hydrateRoot

https://www.gatsbyjs.com/docs/conceptual/partial-hydration/

데모

cd 5-ssr
npm run build
npm run start

6-pages-router-ssg (Next.js impl)

[!IMPORTANT] pages 라우터를 사용한 SSG(Static Site Generation): 애플리케이션을 빌드할 때 React 코드가 실행되며, 생성된 출력은 정적입니다.

데모

cd 6-pages-router-ssg
npm run build
npm run start

7-pages-router-isr (Next.js impl)

[!IMPORTANT] ISR(pages 라우터 사용): "Next.js를 사용하면 사이트를 구축한 후 정적 페이지를 생성하거나 업데이트할 수 있습니다. ISR(Incremental Static Regeneration)을 사용하면 전체 사이트를 다시 빌드할 필요 없이 페이지 단위로 정적 생성을 사용할 수 있습니다. ISR을 사용하면 수백만 개의 페이지로 확장하면서도 정적의 이점을 유지할 수 있습니다."

데모

cd 7-pages-router-isr
npm run build
npm run start

ISR이 필요한 이유?

"요청 시 데이터가 오래될(stale) 수 있습니다"

https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation

Server actions

https://react.dev/reference/rsc/server-actions

SSRF (NextJS v14.1.1에서 수정됨)

SSRF 정의

...

이유?

• 취약한 서버에 접근할 수 있지만 대상 서버에 직접 접근할 수 없는 경우(DMZ, FireWall 등)
• 자신의 출처를 숨기면서 요청을 실행하려는 경우
• ...

데모 8-ssrf-14.1.0

컨텍스트

https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

목표

CVE-2024-34351 악용 조건

• 14.1.1 미만 버전의 Next.JS 기반 애플리케이션
• redirect 함수 사용 (절대 경로 포함). 데모에서는 addTodo.js: redirect(/blog/${inputValue});

redirect 함수 작동 방식

출처: https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

• Next.JS redirect 함수는 브라우저에 HTTP 302 응답을 반환하지 않습니다.

Next.JS는 서버 측에서 요청을 실행한 후 결과를 브라우저에 반환합니다:

• 요청을 실행하려면 Next.JS가 호출할 URL을 구성해야 합니다. 데모에서 addTodo.js: redirect('/blog/123'); 함수는 URL http://207.154.209.99/blog/123을 구성합니다. 이 URL을 구성하기 위해 Next.JS는 초기 요청의 HTTP 헤더에서 호스트 207.154.209.99를 가져옵니다.
• Next.JS는 먼저 HTTP HEAD로 URL을 요청합니다.
• 응답이 Content-Type: text/x-component 헤더를 반환하면 Next.JS는 URL을 HTTP GET으로 요청합니다.

악용

대상 서버에서 SSRF를 발생시키려면 다른 서버를 실행해야 합니다:

• 모든 경로(query path)에서 수신 대기
• 모든 HEAD 요청에 대해 HTTP 200과 Content-Type: text/x-component 헤더 반환
• 모든 GET 요청에 대해 대상 서버로 HTTP 302 반환

8-ssrf-14.1.0의 취약점 수정

해결책 1 (영구적이지 않음): 호스트를 강제하는 nginx 설정

/etc/nginx/sites-available/nextjs에서