콘텐츠 보안 정책은 이 페이지가 어디에서 항목을 로드할 수 있는지 브라우저에 알려주는 헤더 또는 메타 태그입니다. 즉, 페이지 자체 원본의 스크립트만 로드할 수 있고, https를 통해 어디에서나 이미지를 로드할 수 있으며, 다른 사이트의 프레임은 로드할 수 없으며, 인라인 스크립트는 로드할 수 없습니다.
목록 밖의 모든 항목은 거부되고 콘솔에 보고됩니다.
이는 어디에서나 스크립트를 로드할 수 있는 페이지가 공격자의 스크립트를 로드하도록 만들어질 수 있기 때문에 존재합니다. 또한 붙여넣은 페이지를 렌더링하지만 외부 차트 라이브러리를 차단하는 미리보기 창 뒤에 있는 메커니즘이기도 합니다.
이 가이드에서는 알아야 할 지침, 합리적인 시작 정책 및 위반 사항을 다룹니다.
Content-Security-Policy: default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'
허용된 소스를 나열하는 응답 헤더입니다. 공격자가 마크업에 삽입한 스크립트를 포함하여 브라우저는 다른 모든 것을 거부합니다.
알아야 할 콘텐츠 보안 정책 지침
| 지시문 | 컨트롤 |
|---|---|
default-src |
아래의 모든 것에 대한 대체 |
script-src |
스크립트의 출처 |
style-src |
스타일시트 |
img-src |
이미지 |
font-src |
글꼴 |
connect-src |
fetch, 웹소켓, EventSource |
frame-src |
이 페이지가 프레임에 넣을 수 있는 내용 |
frame-ancestors |
이 페이지를 프레임에 넣을 수 있는 사람 |
form-action |
양식을 제출할 수 있는 곳 |
두 가지 소스 키워드가 가장 중요합니다. 'self'는 페이지 자체의 출처를 의미하고 'none'는 전혀 의미가 없습니다.
합리적인 시작 정책
Content-Security-Policy:
default-src 'self';
script-src 'self';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
font-src 'self' data:;
connect-src 'self';
frame-ancestors 'self';
form-action 'self';
base-uri 'none';
object-src 'none'
선택 사항에 대한 참고 사항:
style-src에는 'unsafe-inline'가 포함됩니다. 인라인 style 속성은 스타일시트에 있을 수 없는 차트의 막대 너비를 포함하여 실제 마크업의 모든 곳에 있기 때문입니다. 인라인 스타일은 인라인 스크립트보다 위험이 훨씬 적습니다.
img-src에는 data:가 포함되어 있습니다 또는 삽입된 이미지가 차단됩니다. 이는 로컬에서 작동하고 게시되면 사라지는 아이콘의 빈번한 원인입니다.
**object-src 'none'**는 플러그인을 완전히 비활성화합니다. 합법적인 것은 아무것도 필요하지 않습니다.
**base-uri 'none'**는 삽입된 <base> 태그가 페이지의 모든 상대 주소를 다시 쓰는 것을 중지합니다. 이는 실제적이고 자주 잊혀지는 공격입니다.
**frame-ancestors 'self'**는 클릭수를 캡처하기 위해 다른 사이트에서 귀하의 페이지를 프레이밍하고 오버레이하는 것을 중지합니다.
script-src의 unsafe-inline이 정책을 무효화하는 이유
script-src 'self' 'unsafe-inline'
삽입된 스크립트는 인라인입니다. 인라인 스크립트를 허용하면 CSP가 존재하는 공격을 방지할 수 있으므로 이 구성은 보이는 동안 거의 보호 기능을 제공하지 않습니다.
인라인 스크립트가 불가피한 경우 nonce를 사용하세요.
script-src 'self' 'nonce-r4nd0m'
<script nonce="r4nd0m">…</script>
nonce는 응답별로 다시 생성되어야 합니다. 고정 nonce는 unsafe-inline와 동일합니다.
먼저 보고 전용 모드로 출시
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
위반 사항이 보고되며 아무 것도 차단되지 않습니다. 일주일 동안 실행하고 무엇이 깨졌는지 읽은 다음 시행하십시오. 실제 사이트에서 추측된 정책을 시행하면 페이지가 의존하는 줄 몰랐던 내용이 안정적으로 중단됩니다.
예상대로 무엇이 깨졌는가
| 증상 | 지시어 누락 |
|---|---|
| 삽입된 이미지가 사라졌습니다. | img-src의 data: |
| 글꼴이 뒤로 물러남 | font-src |
| 분석 스크립트 실행이 거부됩니다. | script-src의 호스트 |
fetch가 정책 메시지와 함께 실패함 |
connect-src |
| 삽입이 공백으로 표시됩니다. | frame-src |
| iframe 미리보기가 렌더링되지 않습니다. | 프레임 소스를 포함한 frame-src |
페이지가 붙여넣은 HTML을 렌더링하는 경우 마지막 사항이 중요합니다. srcdoc 프레임에는 이를 허용하는 정책이 필요합니다.
CSP 또는 샌드박스
그들은 반대쪽 끝에서 작동하며 둘 다 유용합니다.
CSP는 서버에 의해 설정되며 이 페이지가 로드하고 실행할 수 있는 항목을 제한합니다.
**샌드박스**는 iframe의 속성이며 삽입된 콘텐츠가 수행할 수 있는 작업을 제한합니다.
신뢰할 수 없는 HTML을 렌더링하는 페이지에는 자체 로딩을 제한하는 정책과 게스트를 제한하는 샌드박스가 모두 있어야 합니다.
CORS 아님
CORS는 응답을 읽을 수 있는지 여부를 알려주는 다른 서버입니다. CSP는 도달할 수 있는 내용을 알려주는 자체 페이지입니다. 오류 메시지는 다릅니다. CSP 위반은 정책과 위반된 지시문의 이름을 지정합니다.
헤더 또는 메타태그
HTTP 헤더로 전송된 정책은 페이지가 구문 분석되기 전에 적용되며 frame-ancestors 및 보고 지시어를 포함할 수 있습니다.
<meta http-equiv> 태그의 동일한 정책은 헤더를 설정할 수 없는 페이지, 단일 파일, 다른 사람의 호스트에 있는 페이지에 작동하지만 프레이밍을 중지할 수 없으며 헤더에 나타나는 지점에서만 적용됩니다.
파일로 전송될 문서의 경우 메타 형식이 유일한 옵션입니다. 사이트의 경우 헤더가 더 좋습니다.
붙여넣은 HTML에서 정책이 위반되는 내용
엄격한 정책이 적용된 미리보기 창에서는 붙여넣은 페이지의 외부 차트 라이브러리, 해당 글꼴 서비스 및 인라인 스크립트를 거부하며, 페이지에는 각 항목이 그려졌을 공백이 표시됩니다. 콘솔은 매번 지시문의 이름을 지정합니다.
페이지가 잘못된 것이 아닙니다. 이는 창에서 허용하지 않는 사항에 따라 다릅니다. 내부에 스크립트가 있고 외부 주소가 없는 자체 포함 페이지는 거의 모든 정책을 통과하며, 이는 페이지를 그런 식으로 구축하는 또 다른 이유입니다.
샌드박스 속성은 뷰어가 사용하는 또 다른 벽이며, 둘은 혼동하기 쉽습니다. 샌드박스는 프레임된 페이지가 수행할 수 있는 작업을 제한하고, 정책은 페이지가 로드할 수 있는 작업을 제한합니다.
정책 작성: 4단계
default-src 'self'로 시작하세요. 페이지 자체 원본의 모든 내용만 해당됩니다. 그런 다음 한 번에 하나의 지시문씩 의도적으로 구멍을 엽니다.- 페이지에 실제로 필요한 것을 허용합니다. 주소 및 포함된 이미지의 경우
img-src https: data:;script-src 'self'이며 페이지의 스크립트가 자체적인 경우에는 아무것도 없습니다. frame-ancestors를 추가하세요.'self'또는'none'를 사용하여 페이지를 프레이밍하는 다른 사이트를 중지하세요. 단, 삽입하려는 경우에는 이름을 지정하세요.- 콘솔을 보고 조정하세요. 거부된 모든 로드는 이를 거부한 지시어와 함께 기록됩니다. 자체 포함 페이지는 열 필요가 거의 없습니다. 이는 그런 식으로 페이지를 구축하는 데 대한 또 하나의 주장입니다.