1️⃣ 현재 웹사이트 리소스 분석하기

CSP를 설정하기 전에 현재 웹사이트가 어떤 리소스를 사용하고 있는지 파악해야 해. 이를 위한 방법은:

1. 개발자 도구 네트워크 탭 활용: 페이지 로드 시 요청되는 모든 리소스를 확인
2. CSP 보고 모드 사용: 실제로 차단하지 않고 위반 사항만 보고받기
3. 자동화 도구 활용: CSP 분석 도구를 사용해 웹사이트 스캔하기

보고 모드는 다음과 같이 설정할 수 있어:

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

2️⃣ 기본 CSP 정책 설계하기

분석 결과를 바탕으로 기본 CSP 정책을 설계해보자. 2025년 기준 권장되는 시작점은:

Content-Security-Policy: 
    default-src 'self'; 
    script-src 'self' https://trusted-scripts.com; 
    style-src 'self' https://trusted-styles.com; 
    img-src 'self' https://trusted-images.com data:; 
    font-src 'self' https://trusted-fonts.com; 
    connect-src 'self' https://api.example.com;

이 기본 정책은 자체 도메인과 신뢰할 수 있는 외부 도메인의 리소스만 허용하고 있어. 'self'는 현재 도메인을 의미하고, 특정 외부 도메인은 명시적으로 허용했지.

3️⃣ 인라인 스크립트와 스타일 처리하기

많은 웹사이트가 인라인 스크립트나 스타일을 사용해. 하지만 CSP에서는 기본적으로 이를 차단하지. 인라인 코드를 처리하는 방법은 세 가지야:

1. 외부 파일로 분리: 가장 권장되는 방법! 인라인 코드를 외부 파일로 분리해서 로드
2. nonce 사용: 서버에서 생성한 랜덤 값을 CSP와 인라인 스크립트에 모두 포함
3. 해시 사용: 인라인 스크립트의 해시값을 계산해 CSP에 포함

nonce를 사용한 예시:

// 서버에서 랜덤 nonce 생성
const nonce = crypto.randomBytes(16).toString('base64');

// CSP 헤더에 nonce 포함
response.setHeader('Content-Security-Policy', `script-src 'self' 'nonce-${nonce}'`);

// HTML에 nonce 속성 포함
<script nonce="${nonce}">
    // 인라인 스크립트 코드
</script>

해시를 사용한 예시:

// 인라인 스크립트
<script>alert('Hello, world!');</script>

// 위 스크립트의 SHA-256 해시를 CSP에 포함
Content-Security-Policy: script-src 'self' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng=';

4️⃣ 점진적으로 정책 강화하기

CSP는 한 번에 완벽하게 설정하기 어려워. 점진적인 접근 방식이 좋아:

1. 보고 모드로 시작: Content-Security-Policy-Report-Only 헤더로 시작
2. 위반 사항 분석: 보고된 위반 사항을 분석하고 정책 조정
3. 부분적 적용: 일부 지시문만 먼저 적용 (예: script-src만)
4. 점진적 제한: 'unsafe-inline'이나 'unsafe-eval' 같은 위험한 소스 표현식을 단계적으로 제거

5️⃣ 고급 CSP 기능 활용하기

2025년 현재, CSP는 다양한 고급 기능을 제공해. 이런 기능들을 활용하면 더 강력한 보안을 구현할 수 있어:

1. strict-dynamic: 신뢰할 수 있는 스크립트가 동적으로 로드하는 스크립트도 신뢰
2. upgrade-insecure-requests: HTTP 요청을 자동으로 HTTPS로 업그레이드
3. require-trusted-types-for: DOM XSS 공격 방어를 위한 Trusted Types 강제
4. report-to: 최신 보고 API를 사용해 위반 사항 보고

고급 CSP 예시:

Content-Security-Policy: 
    default-src 'self'; 
    script-src 'self' 'nonce-{랜덤값}' 'strict-dynamic'; 
    object-src 'none'; 
    base-uri 'none'; 
    upgrade-insecure-requests; 
    report-to csp-endpoint;