Nginx에서 React 애플리케이션의 CSP(Content Security Policy) 오류 해결


React 애플리케이션을 Nginx로 배포하면서 Spring Boot API 서버와 통신하는 과정에서 CSP(Content Security Policy) 오류가 발생했습니다.

csp1

csp2

1. CSP란 무엇인가?

CSP(Content Security Policy)는 웹 애플리케이션의 보안을 강화하기 위해 특정 출처에서만 리소스를 로드하도록 제한하는 보안 헤더입니다. CSP는 XSS(크로스 사이트 스크립팅) 공격이나 데이터 탈취 같은 보안 위협을 예방하는 데 중요한 역할을 합니다.

하지만 CSP 설정이 누락되거나 잘못 지정되면, JavaScript 파일, CSS, 이미지, API 요청 등이 차단되어 애플리케이션이 정상적으로 작동하지 않을 수 있습니다.


2. CSP 오류 원인 분석

1) 상황

  • React 애플리케이션을 Nginx로 배포하고, Spring Boot API 서버와 통신하는 구조.
  • 외부 리소스(네이버 지도 API, CDN 등)도 애플리케이션에서 사용 중이.
  • 브라우저에서 CSP 오류가 발생.

2) 원인

  • Nginx 기본 설정에는 CSP 관련 헤더가 포함되지 않음.
  • React 애플리케이션에서 Spring Boot API 서버와 외부 리소스 접근 차단.
  • CSP 정책이 명시적으로 설정되지 않아 브라우저가 모든 외부 리소스를 차단.


3. Nginx 설정으로 CSP 오류 해결

CSP 오류를 해결하기 위해 Nginx 설정 파일을 수정하고, 필요한 출처를 명시적으로 허용했습니다.

1) 수정된 Nginx 설정

nginx


2) 주요 CSP 디렉티브 설명

  • default-src: 모든 리소스의 기본 출처를 지정합니다. ('self'는 동일 출처만 허용.)
  • script-src: JavaScript 파일의 허용된 출처를 지정합니다.
    'unsafe-inline', 'unsafe-eval'은 동적 JavaScript 실행을 허용합니다.
  • style-src: CSS 스타일 시트의 허용된 출처를 지정합니다.
  • connect-src: API 요청이나 WebSocket 연결을 허용하는 출처를 지정합니다.
  • img-src: 이미지를 로드할 수 있는 출처를 정의합니다.
    data:는 Base64 인코딩된 이미지를 허용합니다.
  • font-src: 웹 폰트의 허용된 출처를 지정합니다.


3) 설정 적용

  • 변경 사항을 저장한 후 Nginx 설정 파일의 구문을 테스트하고, 
     sudo nginx -t
  • Nginx 서비스를 재시작하여 변경 사항을 적용합니다: 
     sudo systemctl restart nginx


4. 결과

  • React 애플리케이션과 Spring Boot API 서버 간 통신이 정상적으로 이루어졌습니다.
  • 네이버 지도 API와 같은 외부 리소스도 문제없이 로드되었습니다.


Reference