Content Security Policy (CSP)란? 간단설명과 사용방법

Content Security Policy (CSP)란 무엇인가?

**Content Security Policy(CSP)**는 웹 사이트가 실행할 수 있는 콘텐츠의 출처를 제한하여 악성 스크립트의 실행을 방지하는 보안 기능입니다. CSP는 브라우저에서 콘텐츠를 검사하고, 지정된 정책에 위반되는 콘텐츠를 차단함으로써 사이트의 보안을 강화합니다. 이로 인해 XSS(Cross-Site Scripting)와 같은 웹 기반 공격으로부터 사용자를 보호하는 데 효과적입니다.

왜 CSP를 사용해야 하는가?

웹 애플리케이션이 점점 복잡해짐에 따라 다양한 외부 리소스를 가져오는 경우가 많아지고 있습니다. 이러한 환경에서는 보안상의 취약점이 늘어날 가능성이 높습니다. CSP를 사용하면 다음과 같은 이유로 보안 강화에 큰 도움이 됩니다.

1. XSS 공격 방지: XSS는 웹 애플리케이션에 악성 스크립트를 삽입해 사용자의 브라우저에서 실행되게 하는 공격입니다. CSP는 신뢰할 수 없는 스크립트의 실행을 차단하여 XSS 공격을 방지합니다.
2. 데이터 탈취 예방: 악성 스크립트를 통해 사용자의 세션 정보, 쿠키, 개인 정보를 탈취할 수 있습니다. CSP는 이러한 스크립트의 실행을 방지함으로써 데이터 유출을 막습니다.
3. 출처 제어: CSP를 사용하면 웹 애플리케이션에서 신뢰할 수 있는 출처에서만 리소스를 로드하도록 제한할 수 있습니다. 이를 통해 무단으로 추가된 외부 리소스의 로딩을 막아 보안을 강화할 수 있습니다.

CSP 기본 구조

CSP는 HTTP 응답 헤더(Content-Security-Policy)를 통해 설정할 수 있습니다. 예를 들어, 다음과 같은 헤더를 사용해 CSP를 설정할 수 있습니다.

Content-Security-Policy: policy-directive; policy-directive

 

각 policy-directive는 특정한 리소스의 출처를 정의하는 규칙을 포함합니다. 주요 CSP 지시어는 다음과 같습니다.

• default-src: 모든 리소스의 기본 출처를 정의합니다.
• script-src: 스크립트 리소스의 출처를 지정합니다.
• style-src: 스타일시트의 출처를 지정합니다.
• img-src: 이미지 리소스의 출처를 지정합니다.
• connect-src: AJAX 요청 등 네트워크 요청의 출처를 지정합니다.

예제: 기본적인 CSP 적용

아래 예제에서는 기본적인 CSP 정책을 사용해 웹 애플리케이션에서 외부 스크립트 실행을 차단하고, 특정 출처에서만 이미지를 로드하도록 설정해 보겠습니다.

Content-Security-Policy: default-src 'self'; img-src https://example.com; script-src 'self'

 

위 정책의 의미는 다음과 같습니다.

• default-src 'self': 기본적으로 동일 출처에서만 리소스를 로드합니다.
• img-src https://example.com: 이미지는 https://example.com에서만 로드할 수 있습니다.
• script-src 'self': 스크립트는 동일 출처에서만 로드합니다.

이 정책을 설정하면, 외부에서 추가된 스크립트나 이미지 등이 로드되지 않으므로, XSS 공격에 대한 저항력이 강화됩니다.

실용적인 예제

만약 웹 페이지에서 Google Fonts와 같은 외부 리소스를 사용해야 한다면, 해당 출처를 명시적으로 허용해야 합니다. 예를 들어, Google Fonts와 같은 스타일을 로드하는 경우 다음과 같이 설정할 수 있습니다.

Content-Security-Policy: default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com

 

위 설정은 fonts.googleapis.com에서 스타일을, fonts.gstatic.com에서 폰트를 로드할 수 있도록 허용합니다.

보고 모드 설정

CSP 정책이 적용되면 웹 페이지의 특정 리소스가 차단될 수 있으며, 이를 모니터링하기 위해 보고 모드를 사용할 수 있습니다. 이때는 Content-Security-Policy-Report-Only 헤더를 사용하여 실제 차단 없이 정책 위반 시 로그만 남기게 할 수 있습니다.

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

 

이 설정을 통해 /csp-report-endpoint로 보고서가 전송되며, 이를 통해 정책을 튜닝할 수 있습니다.

 

CSP는 악성 콘텐츠의 실행을 방지하여 웹 애플리케이션의 보안을 높이는 강력한 도구입니다. CSP를 올바르게 설정하면 XSS, 데이터 탈취 등의 위협으로부터 사용자를 보호할 수 있습니다.