CSP 생성기

Content-Security-Policy(CSP)는 브라우저가 어떤 출처의 스크립트·스타일·이미지·폰트·연결을 허용할지 지정하는 보안 헤더입니다. 잘 설계된 CSP는 XSS(크로스 사이트 스크립팅)와 데이터 탈취, 클릭재킹 같은 공격의 영향을 크게 줄여 줍니다. 이 CSP 생성기는 default-src, script-src 등 주요 디렉티브별로 허용 소스를 체크박스로 고르고 커스텀 도메인을 추가하면, 그에 맞는 헤더 문자열을 실시간으로 조립해 줍니다.

만든 CSP는 응답 헤더(Content-Security-Policy)나 <meta> 태그로 적용할 수 있습니다. 처음에는 보고 전용(Content-Security-Policy-Report-Only)으로 배포해 위반 리포트를 모으며 정책을 다듬은 뒤 본격 적용하는 것을 권장합니다. 모든 계산은 브라우저 안에서만 일어나며 입력값은 어디에도 전송되지 않습니다.

주요 디렉티브 이해하기

CSP는 리소스 종류별로 허용 출처를 나눠 지정합니다. 가장 중요한 출발점은 default-src로, 개별 디렉티브가 지정되지 않은 리소스에 대한 기본 정책 역할을 합니다.

• default-src: 다른 *-src 디렉티브가 없을 때 적용되는 기본 폴백.
• script-src: 자바스크립트 실행 출처. 가장 보안에 민감합니다.
• style-src: CSS 스타일시트와 인라인 스타일 출처.
• img-src: 이미지 로드 출처.
• font-src: 웹폰트 출처.
• connect-src: fetch·XHR·WebSocket·EventSource 등 네트워크 연결 출처.
• frame-src: iframe으로 삽입할 수 있는 출처.

소스 키워드의 의미와 unsafe-inline의 위험

각 디렉티브에는 키워드와 도메인을 섞어 넣을 수 있습니다. 'self'는 같은 출처(scheme + host + port)를, 'none'은 모든 출처 차단을 의미합니다. data:는 인라인 데이터 URI를, https:는 임의의 HTTPS 출처를 허용합니다.

• 'unsafe-inline': <script> 인라인 코드나 onclick같은 인라인 핸들러, 인라인 <style>을 허용합니다. 이 키워드를 script-src에 켜면 CSP의 XSS 방어 효과가 사실상 사라지므로 가급적 쓰지 말고, nonce나 hash 방식으로 대체하세요.
• https:나 와일드카드(*)처럼 지나치게 넓은 출처는 신뢰할 수 없는 제3자 리소스까지 허용할 수 있으니, 실제로 쓰는 CDN·API 도메인으로 좁히는 편이 안전합니다.
• 'none'은 단독으로만 의미가 있습니다. 다른 출처와 함께 쓰면 효과가 없습니다.

적용과 점진적 도입

1. 먼저 Content-Security-Policy-Report-Only 헤더로 배포해 위반 리포트를 수집합니다.
2. 리포트를 보며 정상 동작에 필요한 출처를 디렉티브에 추가해 정책을 다듬습니다.
3. 위반이 사라지면 본 헤더(Content-Security-Policy)로 전환해 실제 차단을 활성화합니다.

XSS 방어를 강화하려면 script-src에서 'unsafe-inline'을 빼고 nonce·hash 기반으로 운영하는 것이 모범 사례입니다. 적용을 마쳤다면 보안 헤더 점검으로 CSP가 응답에 실제로 내려가고 있는지 확인하세요.