개요

먼저 CSP란 (Content Security Policy)의 약자로, 웹 브라우저에서 각종 XSS공격을 막기위해 만들어진 정책으로, 아무나 인라인 자바스크립트나 CSS를 입력할 수 없도록한다.

지시문	설명
default-src	디폴트 설정을 바꾼다
connect-src	연결 설정을 바꾼다
script-src	스크립트 권한 설정을 바꾼다
child-src	iframe 태그에 들어가는 src에 대한 설정을 바꾼다
style-src	style sheet에 관련된 설정을 바꾼다
font-src	font출처와 관련된 설정을 바꾼다
img-src	img 주소 설정 바꾼다
report-url	CSP를 위반할때 보고서를 보낼 출처를 지정한다.

src-옵션	설명
none	그냥 안됨
특정도메인	그 도메인만 허용
self	현재 도메인만 허용
unsafe-inline	그냥 다 됨
nonce-암호화된 문자	밑에 설명

도메인을 src-옵션에 넣을땐 특정요소를 와일드 카드로 대체할 수 있다

• *://example.com
  출처의 scheme을 와일드카드로 대체할 수 있다.
• https://*.example.com
  서브 도메인을 와일드 카드로 대체할 수 있다.
  dong.*.com같이 호스트의 중간에 들어가는건 안된다.
• http:/dong.com:*
  포트를 와일드카드로 대체할 수 있다.

실제로 사용되는 방법은 2가지가 있다

1. http 헤더를 통해 설정하는 방법

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

   이런 형태이다.
   예시를 들어보자면

   Content-Security-Policy: default-src 'self' https://itsmydomain.com

   이런식으로 쓰면 프로그램내 자원들을 로드할때 같은 오리진이나 https://itsmydomain.com에서 온 자원만 허용한다

2. meta 태그로 설정하는 방법
   말그대로 html에서 메타정보를 정의하는 태그인 <meta>태그를 이용하는 방법이다.
   바로 예시를 들어보자면

<meta http-equiv="Content-Security-Policy"content="default-src 'self' https://example.dreamhack.io">

(위에 코드와 같은 역할을 하는 코드임)

nonce 설정

unsafe-inline은 그냥 다 허용하는 것이라고 하면, nonce는 그보다는 보안성을 챙긴 옵션이다. 특정 암호화 값을 이용해 script 태그를 검증할 수 있다

ex)

<script nonce='히히 나 암호화된 값'>
	alert('히히 난 실행되지롱~');
</script>

<script>
  	alert('ㅠㅠ 난 실행안되지롱 ㅜㅜ');
</script>

이렇게 된다.