CSP는 Content Security Policy의 약자입니다.
CSP는 XSS와 data injection attacks 같은 공격으로부터 웹브라우저를 보호해주는 보안층을 추가하는데 도움을 줍니다.

CSP는 여러 버전이 있는데 앞선 버전이 이전 버전과 호환이 됩니다.
CSP를 사용하기 위해서는 웹 서버에서 HTTP 헤더에 Content-Security-Policy를 추가하면 됩니다.

대안책으로 HTML문서에 CSP관련 정보를 삽입할 수 있습니다.

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

그러나 헤더를 통해 전달하는 것을 권장합니다.

CSP를 통해 예방하고자 하는 위협들

1. XSS
   XSS는 사용자가 악의적인 공격 사이트를 신뢰함으로써 해당 사이트에서 서버로 공격이 일어나는 것을 말합니다.
   CSP는 XSS를 예방하는데 도움을 줍니다.

2. packet sniffing attacks
   CSP는 모든 콘텐츠가 HTTPS로만 전달되게 만들어 줄 수 있습니다.
   또한 쿠키도 HTTPS를 통해서만 전달되게 만들 수 있고 Strict-Transport-Security HTTP 헤더를 사용하여 브라우저가 암호화된 채널을 통해서만 사이트에 연결되도록 할 수 있습니다.

CSP 사용법

CSP를 사용하기 위해서는 HTTP헤더에 Content-Security-Policy를 추가하면 됩니다.

Content-Security-Policy: policy

여기서 policy에 어떤 정책을 적용할 건지 적어두면 됩니다.

policy 적용 예제들을 보겠습니다.

1. 동일 출처에서 오는 컨텐츠만 허용하기

Content-Security-Policy: default-src 'self'

2. 동일 출처와 신뢰할 수 있는 출처의 컨텐츠만 허용하기

Content-Security-Policy: default-src 'self' example.com *.example.com

3. 기본적으로 동일 출처의 컨텐츠만 허용하되 이미지는 모든 출처를 허용하고 미디어와 스크립트는 특정 출처 허용하기

Content-Security-Policy: default-src 'self'; img-src *; media-src example.org example.net; script-src userscripts.example.com

4. 특정 출처 컨텐츠만 허용하기

Content-Security-Policy: default-src https://onlinebanking.example.com

5. 동일 출처와 특정 서브 도메인 출처 컨텐츠만 허용하고 이미지는 모든 출처 허용하기

Content-Security-Policy: default-src 'self' *.example.com; img-src *

CSP 정책 테스트하기

CSP정책을 테스트해보고 싶을 수 있습니다.
이떄는 Content-Security-Policy-Report-Only 속성을 이용하면 됩니다.
이는 CSP 정책을 어긴 사항이 있었을때 리포트만 보내고 컨텐츠를 제한하지는 않습니다.

Content-Security-Policy-Report-Only: policy

CSP 리포팅하기

CSP 정책에 어긋난 것들을 리포팅 하기 위해서 HTTP 헤더에 Reporting-Endpoints을 추가해줘야합니다.
여기에 추가되는 값들을 리포팅을 보낼 수 있는 URL을 설정하는 것입니다.

Reporting-Endpoints: csp-endpoint="https://example.com/csp-reports"

참고로 ','를 통해 여러 개의 값을 가지는 것이 가능합니다.

Reporting-Endpoints: csp-endpoint="https://example.com/csp-reports",
                     hpkp-endpoint="https://example.com/hpkp-reports"

이렇게 추가된 것들에게 리포트를 보내기 위해서는
Content-Security-Policy에서 report-to 옵션에 리포트를 보내고자 하는 사이트에 대한 키 값을 넣어줘야 합니다.

Reporting-Endpoints: csp-endpoint="https://example.com/csp-reports"
Content-Security-Policy: default-src 'self'; report-to csp-endpoint

리포팅은 JSON객체로 전달되며 아래와 같은 형태입니다.

{
  "csp-report": {
    "blocked-uri": "http://example.com/css/style.css",
    "disposition": "report",
    "document-uri": "http://example.com/signup.html",
    "effective-directive": "style-src-elem",
    "original-policy": "default-src 'none'; style-src cdn.example.com; report-to /_/csp-reports",
    "referrer": "",
    "status-code": 200,
    "violated-directive": "style-src-elem"
  }
}