웹 브라우저는 웹 서버로부터 받는 페이지의 컨텐츠가 모두 의도된 컨텐츠인지 확인할 수 없다. XSS 공격의 경우, 페이지 내에 교모하게 자바스크립트 구문을 삽입하여 마치 원래 페이지의 컨텐츠인 것처럼 브라우저를 속이고 동일 출처 정책을 우회한다. 이에 따라 페이지의 컨텐츠에서 사용하는 자원들이 모두 웹 서버에서 의도한 자원이 맞는지 확인하기 위해 **Content Security Policy (CSP)**가 탄생했다.
**Content Security Policy (CSP, 컨텐츠 보안 정책)**는 XSS나 데이터를 삽입하는 류의 공격이 발생하였을 때 피해를 줄이고 웹 관리자가 공격 시도를 보고 받을 수 있도록 새롭게 추가된 보안 계층이다.
XSS 공격은 브라우저가 서버로부터 전달 받은 컨텐츠를 신뢰한다는 점을 이용한다. 설령 그 컨텐츠가 원래는 서버에서 추가된 것이 아니라 공격자에 의해 추가된 악성 컨텐츠 (e.g. 쿠키를 빼내는 자바스크립트 코드)일지라도 말이다. CSP는 이를 방지하기 위해 웹 페이지에 사용될 수 있는 자원의 위치, 출처 등에 제약을 걸 수 있다. 따라서 공격자가 웹 사이트에 본래 있지 않던 스크립트를 삽입하거나 공격자에게 권한이 있는 서버 등에 요청을 보내지 못하도록 막을 수 있다.
CSP는 XSS 등 공격의 피해를 완전히 무력화하기 위한 수단은 아니기 때문에 XSS에 대한 자체적인 방어가 병행되어야 한다.
CSP 헤더는 1개 이상의 정책 지시문이 세미콜론(;)으로 분리된 형태로 이루어져 있다. 정책 지시문은 지시문 (e.g. default-src, script-src 등)과 1개 이상의 출처 (e.g. 'self', https:, *.dreamhack.io 등)가 공백으로 분리된 형태로 지정하여야 한다.
아래 구문은 페이지 내부의 자원들이 같은 오리진 혹은 https://example.dreamhack.io에서만 로드되어야 함을 나타내는 예시 CSP 구문이다.
{{default-src 'self' <https://example.dreamhack.io> }}
아래 예시와 같이 CSP 구문은 일반적으로 Content-Security-Policy HTTP 헤더에 추가하여 적용할 수 있다. 해당 구문에서 policy-directive 부분에 CSP를 정의하는 정책 디렉티브를 작성한다.
Content-Security-Policy: <policy-directive>; <policy-directive>
HTTP 헤더를 이용해 페이지 내부의 자원들이 같은 오리진 혹은 https://example.dreamhack.io에서만 로드되어야 함을 나타내는 CSP 헤더는 아래와 같다.
Content-Security-Policy: default-src 'self' <https://example.dreamhack.io>
CSP 헤더는 HTTP 헤더 외에 meta 태그의 엘리먼트로도 정의할 수 있다. 위의 CSP를 meta 태그로 정의하면 아래와 같이 정의할 수 있다.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' <https://example.dreamhack.io>">
구글은 CSP를 올바르게 정의하였는지 검사하기 위해 CSP Evaluator를 제공한다. 해당 사이트에서 직접 작성한 CSP가 안전한지 검사할 수 있다.