CSP 헤더 생성기

Strict CSP 시작 구성

Strict 프리셋은 web.dev에서 설명하는 nonce 기반 strict CSP를 따릅니다. HTTP 헤더 탭의 출력은 다음과 같습니다.

Content-Security-Policy: default-src 'self'; script-src 'nonce-{RANDOM}' 'strict-dynamic'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests

'nonce-{RANDOM}'는 자리표시자이며 그대로는 쓸 수 없습니다. 서버가 응답마다 128비트 이상의 새 무작위 값으로 바꾸고, 렌더링하는 각 <script>의 nonce=”…”에 같은 값을 써야 합니다. 정책에 자리표시자가 남아 있는 동안 도구는 경고를 표시합니다. 고정된 nonce 하나를 정적 설정에 붙여 넣지 마세요. 한 번 본 사람은 누구나 주입한 스크립트에서 다시 쓸 수 있습니다.

이전 버전의 이 프리셋은 ‘self’를 썼지만 자리표시자로 바꿨습니다. ‘strict-dynamic’이 있으면 CSP Level 3은 일치하는 nonce나 해시가 없는 한 HTML 파서가 삽입한 스크립트를 모두 차단하고, ‘self’와 호스트 소스는 더 이상 확인하지 않습니다(CSP3 §8.2). 그래서 script-src ‘self’ ‘strict-dynamic’만으로는 현재 Chrome, Firefox, Safari에서 스크립트가 하나도 실행되지 않으며, 도구는 이제 이 조합에 경고를 띄웁니다. nonce를 설정할 수 없는 정적 빌드 사이트라면 자리표시자를 지우고 해시 계산기로 인라인 스크립트마다 해시를 추가하거나, ‘중간’ 프리셋에서 시작하세요.

Express (helmet) 탭은 응답마다 값을 만드는 부분까지 출력합니다. crypto.randomBytes(16).toString(‘base64’)를 res.locals.cspNonce에 저장하는 미들웨어를 추가하고 script-src에 함수를 넘기는데, helmet README에 나오는 방식입니다. 템플릿에서는 이 값을 각 script 태그에 출력해야 합니다. Nginx 탭은 자리표시자를 그대로 두고 주석을 붙입니다. Nginx는 애플리케이션이 렌더링하는 HTML에 같은 nonce를 넣을 수 없기 때문입니다.

흔한 함정

• ’none’은 단독으로만 효과가 있습니다. 다른 소스와 함께 적으면 ‘none’은 효과가 없고 다른 소스는 허용됩니다.
• HTTP 헤더 전용 지시문이 있습니다. CSP3 §3.3에 따라 <meta> 안의 frame-ancestors, report-uri, sandbox는 무시되고 Report-Only 모드도 없습니다. 도구는 <meta> 탭에서 이들을 빼고 경고합니다.
• ‘strict-dynamic’에는 nonce나 해시가 필요합니다. 없으면 페이지의 스크립트가 모두 차단되며, 도구가 이를 알려 줍니다.
• 해시/nonce가 있으면 ‘unsafe-inline’은 무시됩니다. 최신 브라우저는 더 안전한 쪽을 우선합니다.
• default-src는 반드시 정의하세요. 누락된 fetch 지시문은 default-src로 폴백하며, 이것이 없으면 새로 추가될 지시문에도 폴백이 적용되지 않습니다.
• 커스텀 호스트에 세미콜론을 넣지 마세요. 세미콜론은 정책을 끊어 이후 모든 지시문을 손상시킵니다.

해시 vs. Nonce

정적 인라인 콘텐츠(애널리틱스 스니펫, 크리티컬 CSS, 서버 렌더링되는 보조 스크립트)에는 해시를 사용합니다. 정적 HTML과 엣지 캐시와 잘 맞고, 요청별 값을 필요로 하지 않습니다.

요청마다 새로 렌더링되는 콘텐츠에는 nonce를 사용합니다. 서버가 헤더에 ‘nonce-XYZ’를 넣고, 동일한 값을 모든 <script nonce=“XYZ”>에 새깁니다. ‘strict-dynamic’과 함께 사용하면 신뢰된 스크립트의 자식 스크립트도 신뢰가 상속돼 거대한 호스트 허용 목록을 유지할 필요가 없습니다.

배포 치트시트

• Nginx: Nginx 탭 내용을 server 블록에 붙여넣고 reload. always 플래그는 오류 응답에도 헤더를 강제합니다.
• Apache: .htaccess나 httpd.conf에 Header always set Content-Security-Policy ”…”를 작성합니다.
• Express / Node: helmet 스니펫을 붙여넣고, useDefaults를 false로 설정해 정책이 helmet 기본값과 조용히 병합되지 않도록 하세요.
• Cloudflare Pages / Vercel / Netlify: HTTP 헤더 형식을 각 플랫폼의 헤더 설정(_headers, vercel.json, netlify.toml)에 붙여넣습니다.