====== CSP(Content Security Policy) ====== * description : CSP(Content Security Policy)로 콘텐츠 보안 정책 설정하기 * author : 와프 * email : iyyeo@repia.com * lastupdate : 2021-10-08 ===== 개요 ===== {{:wiki:javascript:csp:csp1.png?600|}} * 콘텐츠 보안 정책(CSP: Content Security Policy)이란 교차 사이트 스크립팅(XSS) 공격과 데이터 삽입 공격을 막기 위한 추가적인 브라우저 보안 계층입니다.\\ \\ {{:wiki:javascript:csp:csp2.png?600|}} * 사용자들이 많이 사용하는 브라우저는 대부분 CSP를 지원하고 있습니다.\\ \\ {{:wiki:javascript:csp:csp3.png?600|}} * CSP 헤더 혹은 태그를 전달받은 사용자의 브라우저는 다음과 같이 작동합니다. - 유효한 도메인으로 지정한 도메인의 스크립트만 실행하여 XSS 위험성을 제거합니다. - 허용 목록에 있는 도메인에서 수신한 스크립트만 실행하며, 그 외 스크립트는 무시합니다. * CSP에서 설정한 내용을 위반하는 내용이 호출되면 브라우저는 그것을 차단하고 차단 내역을 알려줍니다. * CSP는 콘텐츠를 다운로드하여 실행하는 도메인을 제한하지만 다른 보안 헤더들과 같이 사용하면서 더 높은 보안 강도를 추구할 수 있습니다. ☞ Strict-Transport-Security 헤더를 사용하여 암호화된 채널만 사용하도록 설정. ===== 사용방법 ===== * CSP를 사용하는 방법은 어렵지 않습니다. 웹 서버의 응답 헤더에 Content-Security-Policy 헤더를 추가하도록 설정하거나 HTML에 태그를 사용하여 추가할 수 있습니다. <헤더 방식> Content-Security-Policy: 설정할 정책 내용 <태그 방식> \\ * CSP 문법은 다음과 같습니다. 웹 페이지가 사용하는 하위 도메인을 파악하고 웹 서버에 설정합니다. 추후 서드 파티 스크립트의 원치 않는 도메인 호출을 막을 수 있습니다. #모든 콘텐츠는 현재 도메인에서만 제공되어야 한다. Content-Security-Policy: default-src 'self' #신뢰할 수 있는 특정 도메인과 그것의 모든 하위 도메인의 콘텐츠를 허용한다. Content-Security-Policy: default-src 'self' *. trusted.com #이미지는 모든 도메인, 미디어와 스크립트는 특정 도메인만 허용한다. Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com #콘텐츠 다운로드는 기본적으로 HTTPS를 사용하는 특정 도메인만 사용한다. Content-Security-Policy: default-src https://onlinebanking.mybank.com ===== Tip ===== 스크립트 리소스가 가장 명백한 보안 위험이지만, CSP는 페이지가 로드하도록 허용되는 리소스를 상당히 세분화하여 제어할 수 있는 다양하고 충분한 정책 지시문을 제공합니다. 다음은 나머지 리소스 지시문입니다. * ''base-uri''는 페이지의 요소에 나타날 수 있는 URL을 제한합니다. * ''child-src''는 작업자와 삽입된 프레임 콘텐츠에 대한 URL을 나열합니다. 예: child-src https://youtube.com을 사용하면 다른 출처가 아니라 YouTube에서 가져온 동영상을 삽입할 수 있습니다. 지원 중단된 frame-src 지시문 대신 이 지시문을 사용하세요. * ''connect-src''는 (XHR, WebSockets 및 EventSource를 통해) 연결할 수 있는 출처를 제한합니다. * ''font-src''는 웹 글꼴을 제공할 수 있는 출처를 지정합니다. font-src https://themes.googleusercontent.com을 통해 Google의 웹 글꼴을 사용할 수 있습니다. * ''form-action''은
태그에서의 제출을 위해 유효한 엔드포인트를 나열합니다. * ''frame-ancestors''는 현재 페이지를 삽입할 수 있는 소스를 지정합니다. 이 지시문은 ,