Content Security Policy (CSP)

CSP란?

페이지 내에서 불러오는 리소스들의 제한을 조절하는 매커니즘이다. 주로 cross-origin 스크립트의 실행을 제한한다.

필요성

• 가장 큰 목적은 XSS 또는 코드 인젝션같은 공격들을 방어하는것이다.
  • 하지만 완전히 막는 방법은 아니며, 예방 차원으로 생각해야 한다.
• SOP가 제한하지 않는 태그들의 보안 취약점을 막기 위해 등장한 정책인 듯

특징

• 헤더로 페이지에 어떤 리소스를 불러올 수 있는지 명시
• 현재 버전 3까지 나왔으며, 브라우저가 옛 버전만 지원하더라도 호환이 가능하다
• 브라우저가 CSP를 지원하지 않으면 무시되며 기본 SOP만 적용된다
• CSP 헤더가 없으면 기본 SOP로 적용된다

사용

Content-Security-Policy 헤더 또는 태그를 통해 적용한다.

값으로 지정하는 제한을 정책 디렉티브(policy-directive)라고 하며 여러 디렉티브를 지정할 땐 세미콜론으로 구분한다.

또 각 정책 디렉티브는 디렉티브(directive)와 값(value)으로 나뉜다.

Content-Security-Policy: <policy-directive>; <policy-directive>

디렉티브

주 목적이 cross-origin 접근을 제한하는 것이므로 대부분의 디렉티브는 허용하는 origin을 지정하는 것들이다.

주요 Values

공통적으로 사용되는 디렉티브 value

• 'none'

  어떠한 리소스도 허용하지 않는다. none은 다른 값과 같이 사용할 수 없다.

• 'self'

  현재 origin의 리소스만 허용한다. 하위 도메인은 허용하지 않는다.

• 'unsafe-inline'

  스크립트나 스타일을 인라인으로 사용하는 것을 허용한다.

• 'unsafe-eval'

  eval, setImmediate와 같은 api를 사용하는 것을 허용한다.

• <Host>

  직접 허용하는 호스트를 명시할 수 있다. example.com, *.example.com, https://example.com/b.html과 같은 값들이 될 수 있다.

• <Scheme:>

  허용하는 프로토콜을 명시할 수 있다. http:, https:, data: 와 같은 값들이 될 수 있다.

주요 Directives

주요 디렉티브

• default-src

  다른 fetch 디렉티브가 정의되지 않았을 때 fallback으로 적용

• child-src

  web worker와 <frame>, <iframe>의 유효한 소스를 정의. frame-src, worker-src로 나뉨

• connect-src

  fetch, XMLHttpRequest, WebSocker, EventSource와 같은 js에서 접근하는 소스를 정의

• font-src

  @font-face 를 통해 불러오는 소스를 정의

• frame-src

  <frame>, <iframe>의 유효한 소스를 정의

• img-src

  이미지의 유효한 소스를 정의

• manifest-src

  앱 매니페스트 파일의 유요한 소스를 정의

• media-src

  <audio>, <video>, <track> 요소의 유효한 소스를 정의

• object-src

  <object>, <embed>, <applet> 요소의 유효한 소스를 정의

• srcipt-src

  자바스크립트 파일에 대한 유효한 소스를 정의

• style-src

  스타일시트에 대한 유효한 소스를 정의

• sandbox

  요청한 리소스에 대해 iframe의 sandbox와 비슷한 속성을 적용

• form-action

  <form> 요소의 유효한 타켓을 정의

• frame-ancestors

  <frame>, <iframe>, <object>, <embed>, <applet> 요소의 유효한 부모 페이지를 정의

• upgrade-insecure-requests

  유저 에이전트가 HTTP요청을 HTTPS요청으로 대체하도록 한다. 이 디렉티브는 대규모 사이트에서 레거시 HTTP링크를 대처하기 위해 만들어짐

예시

아래 헤더는 모든리소스에 대해 인라인 요소를 허용하며, https만 허용하는 것을 의미한다.

Content-Security-Policy: default-src https: 'unsafe-inline';

아래 헤더는 현재 origin과 zum.com 도메인(+서브도메인)의 스크립트 리소스만 허용하는 것을 의미한다.

Content-Security-Policy: script-src 'self' *.zum.com;

CSP 체크해볼 수 있는 사이트

https://csp-evaluator.withgoogle.com/

Reference

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

https://developers.google.com/web/fundamentals/security/csp?hl=ko

https://content-security-policy.com/

https://web.dev/strict-csp/

https://developers.google.com/web/fundamentals/security/csp

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy