HTML Academy · 강의

콘텐츠 보안 정책 meta http-equiv

meta http-equiv로 콘텐츠 보안 정책 설정하기

콘텐츠 보안 정책 meta http-equiv은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

CSP란 무엇인가요?

콘텐츠 보안 정책은 페이지가 로드하고 실행할 수 있는 리소스를 제한하는, 브라우저가 강제하는 정책입니다. 이는 사이트 간 스크립팅에 대한 가장 강력한 방어 수단입니다. 공격자가 <script> 태그를 삽입하더라도 정책이 허용하지 않으면 브라우저가 실행을 거부합니다.

전달하는 두 가지 방법

CSP는 HTTP 응답 헤더(Content-Security-Policy: ...)로 보내거나 HTML의 메타 태그로 보낼 수 있습니다: <meta http-equiv="Content-Security-Policy" content="...">. 헤더 방식이 권장되며, 서버를 제어할 수 없을 때는 메타 태그가 유용합니다.

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://cdn.example.com">

일반적인 지시어

default-src는 지정되지 않은 리소스 유형에 대한 대체 설정입니다. script-src, style-src, img-src, connect-src(XHR/가져오기), font-src, frame-src는 각각 해당 종류의 리소스를 제한합니다. 특정 출처를 허용 목록에 추가하거나 동일 출처만 허용하려면 'self'를 사용하십시오.

self 키워드

'self'(따옴표 포함)는 페이지 자체의 출처를 가리킵니다. script-src 'self'는 "페이지와 동일한 출처에서 호스팅되는 스크립트만 실행"한다는 뜻입니다. 이는 대부분의 정책에서 기준이 되는 설정이며, 필요에 따라 특정 외부 CDN을 추가하십시오.

인라인 스크립트 차단

기본적으로 CSP는 모든 인라인 <script> 태그와 이벤트 처리기 속성(onclick)을 차단합니다. 삽입된 <script>는 인라인이므로 실행될 수 없어, 이는 가장 강력한 XSS 보호 기능입니다. 모든 스크립트를 외부 파일로 옮기고 src로 참조하십시오.

논스와 해시

필요한 인라인 스크립트에는 논스를 사용하십시오. 서버가 요청마다 무작위 토큰을 생성하고 CSP에 script-src 'nonce-RANDOM'으로 설정한 다음, 신뢰할 수 있는 <script> 태그에 nonce="RANDOM"을 추가합니다. 삽입된 스크립트에는 논스가 없으므로 차단됩니다.

<meta http-equiv="Content-Security-Policy"
  content="script-src 'nonce-abc123'">
<script nonce="abc123">// allowed</script>
<script>// blocked — no nonce</script>

unsafe-inline과 unsafe-eval

'unsafe-inline'은 인라인 스크립트와 스타일을 다시 허용합니다. 'unsafe-eval'은 eval()과 new Function()을 다시 허용합니다. 둘 다 CSP를 심각하게 약화시키므로, 마이그레이션 중 최후의 수단으로만 사용하고 제거할 계획을 세우십시오.

메타 태그의 한계

메타 태그로 전달되는 CSP에서는 report-uri 지시어나 다른 보고 기능을 사용할 수 없습니다. 또한 헤더보다 늦게 적용되므로 메타 태그보다 앞에 있는 모든 항목은 보호되지 않습니다. 헤더 방식이 확실히 더 좋으며, 메타 태그는 대체 수단으로만 사용하십시오.

보고 전용 모드

사이트를 중단하지 않고 새 정책을 테스트하려면 Content-Security-Policy-Report-Only: ...를 사용하십시오. 브라우저는 위반 사항을 차단하지 않고 보고하므로, 적용 모드로 전환하기 전에 정책을 조정하여 모든 합법적인 리소스를 허용할 수 있습니다.

일반적인 함정

style-src 'unsafe-inline'을 빠뜨리면 인라인 스타일이 차단됩니다(프레임워크가 자주 생성합니다). connect-src를 빠뜨리면 API로 보내는 AJAX가 차단됩니다. 항상 먼저 보고 전용 모드에서 정책을 테스트하고, 콘솔에서 차단된 리소스를 검토하십시오.

지식 확인

공격자가 스크립트 태그를 성공적으로 삽입하더라도 CSP는 XSS 공격을 어떻게 방어합니까?

요약

CSP는 로드할 수 있는 스크립트, 스타일, 이미지 및 기타 리소스를 제한하는 브라우저 강제 정책입니다. 응답 헤더(권장) 또는 메타 태그로 전달하십시오. 필요한 인라인 스크립트에는 논스를 사용하고, unsafe-inline과 unsafe-eval은 피하며, 먼저 보고 전용 모드에서 테스트하십시오. 'nonce-X'와 'strict-dynamic'을 사용하는 엄격한 CSP가 최신 방식의 기준입니다.

자주 묻는 질문