Content Security Policy (CSP) 보안 정책

🚀 **CSP(Content Security Policy)**는 웹 보안을 강화하기 위한 HTTP 헤더로, 악성 코드 삽입(XSS), 클릭재킹(Clickjacking)과 같은 공격을 방지하는 역할을 합니다.
이번 포스팅에서는 CSP의 개념, 주요 디렉티브, 설정 방법, 그리고 해결 방법까지 자세히 알아보겠습니다.

---

 1. CSP란?

**CSP(Content Security Policy)**는 웹사이트가 실행할 수 있는 리소스(스크립트, 스타일, 이미지 등)를 제한하는 보안 정책입니다.
이 정책을 설정하면 악성 JavaScript 실행, 클릭재킹, 데이터 도용과 같은 보안 취약점을 방지할 수 있습니다.

---

 2. CSP 설정 방법

CSP는 HTTP 응답 헤더 또는 HTML <meta> 태그를 통해 설정할 수 있습니다.

✅ (1) HTTP 응답 헤더에서 설정

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

✔ 설명:

• default-src 'self' → 기본적으로 현재 도메인(self)에서만 리소스 로드 가능
• script-src 'self' https://apis.example.com → JavaScript는 현재 도메인과 https://apis.example.com에서만 실행 가능

---

✅ (2) HTML <meta> 태그에서 설정

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

✔ 서버에서 헤더 설정이 어려운 경우, <meta> 태그를 통해 CSP를 적용할 수 있습니다.

---

3. CSP 주요 디렉티브(정책 옵션)

 

디렉티브	설명	예제
default-src	모든 리소스(스크립트, 스타일, 이미지 등)의 기본 정책	default-src 'self' (현재 도메인에서만 허용)
script-src	JavaScript 실행 허용 도메인 지정	script-src 'self' https://apis.example.com
style-src	CSS 파일 및 인라인 스타일 허용 도메인 지정	style-src 'self' 'nonce-abc123'
img-src	이미지 로드 허용 도메인 지정	img-src 'self' data:
font-src	웹 폰트 허용 도메인 지정	font-src 'self' https://fonts.gstatic.com
connect-src	AJAX, WebSocket, API 요청 허용	connect-src 'self' https://api.example.com
frame-src	<iframe>에 허용할 도메인 지정	frame-src 'self' https://youtube.com
object-src	Flash, Java Applet 등의 실행 허용	object-src 'none' (사용 금지)

---

4. CSP 정책 적용 방식

✅ 보안 정책만 보고 실행은 허용 (report-only 모드)

🚀 CSP 정책을 테스트할 때 유용!

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'

• -Report-Only를 사용하면, 정책을 위반해도 차단되지 않고 경고만 표시.

---

5. CSP 설정 예제

✅ 강력한 CSP 설정 예제

Content-Security-Policy: 
    default-src 'self';
    script-src 'self' 'nonce-xyz123';
    style-src 'self' 'nonce-xyz123';
    img-src 'self' https://images.example.com;
    font-src 'self' https://fonts.googleapis.com;
    object-src 'none';
    frame-src 'none';

✔ 설명

• JavaScript와 CSS는 nonce가 있는 경우에만 허용
• img-src는 현재 도메인 및 https://images.example.com에서만 로드 가능
• font-src는 Google Fonts에서만 허용
• object-src 및 frame-src는 완전히 차단

---

6. CSP 관련 주요 오류 해결 방법

🚫 오류 1: Refused to apply inline style

❌ 발생 원인:
CSP 정책에서 인라인 스타일(style="...")이 차단됨.

✅ 해결 방법:

1. <style nonce="...">을 사용하여 특정 스타일만 허용
2. CSS 파일 사용 (style="..." 대신 class 적용)
3. CSP에 unsafe-inline 추가 (보안상 위험)

---

🚫 오류 2: Refused to execute inline event handler

❌ 발생 원인:
CSP 정책에서 onclick="..." 같은 인라인 이벤트 핸들러가 차단됨.

✅ 해결 방법:

1. addEventListener를 사용하여 이벤트 등록

document.getElementById("btn").addEventListener("click", function() {
    alert("Clicked!");
});

1. CSP에서 unsafe-inline 또는 nonce 추가 (보안상 위험)

---

🚀 결론

✔ CSP는 웹사이트 보안을 강화하는 핵심적인 보안 정책입니다.
✔ 보안성을 높이려면 nonce 또는 sha256-hash를 사용하여 특정 리소스만 허용하는 것이 좋습니다.
✔ XSS와 같은 공격을 방지하려면 unsafe-inline을 사용하지 않는 것이 중요합니다.
✔ Spring Boot 및 기타 백엔드 프레임워크에서도 CSP를 적용하여 보안을 강화할 수 있습니다.