liminfoCSP & SRI Generator
Content Security Policy 헤더 및 SRI 해시 생성기
CSP 헤더
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self';<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self';">CSP & SRI Generator 소개
CSP 헤더 생성기 & SRI 해시 계산기는 웹 개발자와 보안 엔지니어가 Content-Security-Policy HTTP 헤더를 정확하게 작성할 수 있도록 돕는 이중 모드 보안 도구입니다. default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, media-src, object-src 등 주요 디렉티브를 개별 설정할 수 있으며, 선택적으로 report-uri 엔드포인트를 추가할 수 있습니다. 생성된 정책은 HTTP 헤더 문자열과 HTML meta 태그 두 가지 형식으로 즉시 출력됩니다.
프론트엔드 개발자, DevSecOps 엔지니어, 보안 컴플라이언스 담당자들이 CSP 문자열을 수작업으로 작성하는 번거로움 없이 이 도구를 활용합니다. 잘못 설정된 CSP는 XSS 취약점 누락이나 리소스 차단으로 인한 사이트 오류의 주된 원인이 됩니다. SRI 해시 계산기 탭에서는 브라우저 내장 Web Crypto API를 사용하여 인라인 스크립트나 스타일의 SHA-256 또는 SHA-384 해시를 즉시 계산하며, 입력한 내용은 서버로 전송되지 않습니다.
내부적으로 CSP 생성기는 CSP Level 3 명세에 따라 디렉티브 키-값 쌍을 세미콜론으로 구분된 정책 문자열로 조합합니다. SRI 해시 계산기는 crypto.subtle.digest()로 UTF-8 인코딩된 텍스트를 해시 처리한 뒤, ArrayBuffer를 Base64로 변환하고 알고리즘 식별자(예: sha256-)를 접두어로 붙여 CSP script-src 또는 style-src에 바로 사용 가능한 형식으로 반환합니다.
주요 기능
- default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, media-src, object-src 8개 디렉티브 지원
- CSP 위반 리포팅을 위한 report-uri 엔드포인트 선택 설정
- HTTP 헤더 문자열과 <meta http-equiv> 태그 두 가지 형식 동시 출력
- Web Crypto API 기반 SHA-256 / SHA-384 해시 알고리즘 선택 지원
- CSP 소스 표현식 형식으로 해시 결과 반환 (예: 'sha256-abc...')
- CSP 헤더 및 SRI 해시 결과 원클릭 클립보드 복사
- 100% 클라이언트 처리 — 입력 내용이 브라우저 밖으로 전송되지 않음
- CSP 생성과 SRI 해시 계산을 하나의 인터페이스에서 처리하는 탭 전환 UI
자주 묻는 질문
Content-Security-Policy(CSP) 헤더란 무엇인가요?
Content-Security-Policy는 브라우저가 허용된 출처의 리소스(스크립트, 스타일, 이미지, 폰트 등)만 로드하도록 지시하는 HTTP 응답 헤더입니다. XSS(크로스 사이트 스크립팅) 및 데이터 주입 공격에 대한 가장 효과적인 방어 수단 중 하나로, 브라우저는 목록에 없는 출처로의 요청을 실행 전에 차단합니다.
script-src 디렉티브는 무엇을 제어하나요?
script-src는 브라우저가 실행할 수 있는 JavaScript 소스를 제한합니다. 값으로는 'self'(동일 출처), 명시적 HTTPS URL, 논스 값('nonce-abc123'), 또는 인라인 스크립트용 해시 값('sha256-...')을 사용할 수 있습니다. script-src를 생략하면 브라우저는 default-src 값을 대신 적용합니다.
style-src에서 'unsafe-inline'을 언제 사용해야 하나요?
'unsafe-inline'은 모든 인라인 <style> 태그와 style 속성을 허용하여 정책을 크게 약화시킵니다. 더 안전한 방법은 인라인 스타일을 외부 스타일시트로 분리하거나, 논스 또는 해시 값을 사용하여 신뢰할 수 있는 특정 인라인 블록만 허용하는 것입니다. CSS-in-JS 프레임워크 대부분은 CSP 논스를 지원합니다.
SRI(서브리소스 무결성)란 무엇인가요?
SRI는 브라우저가 CDN 등 외부 서버에서 가져온 리소스의 무결성을 검증하는 보안 기능입니다. <script> 또는 <link> 태그에 Base64 인코딩된 SHA 해시를 integrity 속성으로 추가하면, 브라우저는 다운로드한 파일의 해시를 계산하고 일치하지 않으면 실행을 거부합니다.
인라인 스크립트의 SRI 해시는 어떻게 계산하나요?
SRI 해시 계산기 탭으로 전환한 뒤, <script> 태그 없이 인라인 스크립트 또는 스타일 블록의 내용만 붙여 넣으세요. SHA-256 또는 SHA-384를 선택하고 해시 계산 버튼을 클릭하면 'sha256-BASE64' 형식의 값이 반환됩니다. 이 값을 CSP의 script-src 또는 style-src 디렉티브에 직접 추가할 수 있습니다.
SHA-256과 SHA-384 중 어떤 것을 사용해야 하나요?
두 알고리즘 모두 안전합니다. SHA-256은 더 광범위하게 지원되며 해시 문자열이 짧습니다. SHA-384는 충돌 공격에 대한 더 높은 보안 마진을 제공합니다. W3C SRI 명세는 새로운 배포에서 SHA-384 또는 SHA-512를 권장하지만, 대부분의 경우 SHA-256으로도 충분합니다.
report-uri 설정은 어떤 역할을 하나요?
report-uri는 CSP 정책 위반이 발생할 때 브라우저가 JSON 위반 리포트를 POST로 전송할 URL을 지정합니다. Content-Security-Policy-Report-Only 모드에서 프로덕션 위반 사항을 모니터링한 뒤 강제 적용 모드로 전환할 때 유용합니다. CSP Level 3에서는 report-to 디렉티브로 대체되었지만, report-uri가 여전히 더 넓은 브라우저 지원을 보유하고 있습니다.
Nginx에서 생성된 CSP 헤더를 어떻게 적용하나요?
생성된 헤더 문자열을 복사하여 Nginx server 블록에 추가하세요: add_header Content-Security-Policy "default-src 'self'; script-src 'self'...";. 이후 nginx -s reload로 Nginx를 재로드합니다. 또는 <meta http-equiv> 스니펫을 HTML 문서의 <head>에 붙여 넣어도 되지만, 서버 헤더가 주입된 마크업으로 재정의될 수 없어 더 강력한 보호를 제공합니다.