🛡️ Next.js Content Security Policy(CSP) 설정 가이드

Next.js 애플리케이션의 보안을 강화하기 위해 **Content Security Policy(CSP)**를 설정하는 방법을 정리했습니다.
CSP는 XSS(Cross-Site Scripting) 및 코드 인젝션 공격을 방지하는 데 중요한 역할을 합니다.

✅ 1. CSP의 기본 개념

CSP(Content Security Policy)는 브라우저가 외부 리소스를 로드하거나 실행할 때 허용 여부를 결정하는 보안 정책입니다.
이를 통해 악성 코드 실행을 방지하고, 신뢰할 수 있는 소스만 허용하여 애플리케이션 보안을 강화합니다.

✅ 2. Next.js에서 기본 CSP 설정

Next.js에서는 next.config.js 파일을 사용하여 간단하게 CSP를 설정할 수 있습니다.

기본 설정

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self';",
          },
        ],
      },
    ];
  },
};

설정 해석

default-src 'self': 현재 도메인에서만 리소스를 로드
script-src 'self': 스크립트도 현재 도메인에서만 허용
style-src 'self': 스타일 역시 현재 도메인에서만 허용
img-src 'self': 이미지도 동일 도메인에서만 로드

✅ 3. 동적 콘텐츠를 위한 Nonce 설정

일부 동적 스크립트나 스타일을 허용해야 할 때는 Nonce를 사용하여 특정 인라인 콘텐츠만 허용할 수 있습니다.

3.1. Nonce 생성 미들웨어 설정

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import crypto from 'crypto';

export function middleware(request: NextRequest) {
  const nonce = crypto.randomBytes(16).toString('base64');
  const csp = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' data:;
    connect-src 'self';
  `.replace(/\s{2,}/g, ' ').trim();

  const response = NextResponse.next();
  response.headers.set('Content-Security-Policy', csp);
  response.headers.set('x-nonce', nonce);
  return response;
}

3.2. Nonce를 활용한 인라인 스크립트 설정

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    const nonce = (this.props as any).nonce;
    return (
      <Html>
        <Head>
          <script nonce={nonce}>console.log('안전한 스크립트');</script>
        </Head>
        <body>
          <Main />
          <NextScript nonce={nonce} />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

✅ 4. CSP 설정 주의사항

동적 리소스 문제

React Strict Mode: 일부 인라인 스크립트가 CSP에 의해 차단될 수 있습니다.
External Script: 외부에서 제공되는 스크립트는 반드시 script-src 설정에 도메인을 명시해야 합니다.

보고 설정

CSP 위반 로그를 모니터링하여 문제를 조기에 파악할 수 있습니다.

Content-Security-Policy: default-src 'self'; report-uri /csp-report

실시간 모니터링

CSP 위반 보고를 수집하여 대응할 수 있도록 전송 URL을 설정할 수 있습니다.

✅ 5. 실전 예제

강화된 CSP 설정

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: `
              default-src 'self';
              script-src 'self' 'unsafe-inline' https://apis.google.com;
              style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
              img-src 'self' data:;
              connect-src 'self' https://api.example.com;
              font-src 'self' https://fonts.gstatic.com;
              frame-ancestors 'none';
              object-src 'none';
              base-uri 'self';
              form-action 'self';
              upgrade-insecure-requests;
            `.replace(/\s{2,}/g, ' ').trim(),
          },
        ],
      },
    ];
  },
};

해설

script-src 'unsafe-inline': 인라인 스크립트 허용 (권장하지 않음)
style-src 'unsafe-inline': 인라인 스타일 허용
connect-src https://api.example.com: 외부 API 호출 허용
font-src https://fonts.gstatic.com: Google Fonts 허용
frame-ancestors 'none': 외부에서 iframe으로 삽입 불가
object-src 'none': 플래시 같은 객체 사용 금지

✅ 6. CSP 테스트 및 디버깅

브라우저 개발자 도구 활용

페이지를 열고 F12(개발자 도구) 클릭
Console 탭에서 CSP 위반 로그 확인
Content Security Policy 에러 발생 시 정책 수정

위반 로그 확인

CSP 위반 보고서를 서버로 전송하여 문제를 실시간으로 파악할 수 있습니다.

Content-Security-Policy: default-src 'self'; report-uri /csp-report

✅ 요약 정리

항목 설정 방법 비고

기본 CSP 설정	next.config.js에서 설정	모든 페이지에 적용
Nonce 활용	미들웨어에서 동적 생성	인라인 스크립트 허용
위반 보고 설정	report-uri로 로그 전송	실시간 모니터링 가능
테스트 및 디버깅	브라우저 개발자 도구 활용	CSP 오류 파악 용이

Next.js, Content Security Policy, CSP, 웹 보안, XSS 방지, nonce, 보안 헤더, 웹 애플리케이션 보안, Next.js 보안, 서버 보안 설정