Google 글꼴 (fonts.googleapis.com)을 CSP 헤더에 추가

Question

개인 프로젝트를 gitHub 페이지에 호스팅하고 cloudflare를 사용하여 https를 적용합니다. 이제 CSP 정책을 구현하고 싶습니다.

<meta HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' *.fonts.googleapis.com/* *.cloudflare.com/* *.fonts.googleapis.com/*;"> 

그러나 나는 다음과 같은 오류가 점점 오전 :

:

Refused to load the stylesheet ' https://fonts.googleapis.com/icon?family=Material+Icons ' because it violates the following Content Security Policy directive: "default-src 'self' .fonts.googleapis.com/.cloudflare.com/ .fonts.googleapis.com/". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

이것은 내가 포함하고있는 스크립트입니다

나는 내 페이지의 헤드에 메타 태그를 추가하는 시도

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
     rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet"> 

*.fonts.googleapis.com/* 페이지의 모든 것을 허용하지 않겠습니까?

내가 처음으로 CSP를 설정하는 것이므로 github 페이지를 설정하는 올바른 방법일까요? 나는 아직 이것에 대한 독서를 찾지 못했다. 이 직관적 것이지만

Answer 1

Won't setting *.fonts.googleapis.com/* allow everything from the page?

는 대답은 없는입니다. 이 같은 것을 볼 수 있었다 두 개의 글꼴

Wildcards are accepted, but only as a scheme, a port, or in the leftmost position of the hostname: *://*.example.com:* would match all subdomains of example.com (but not example.com itself), using any scheme, on any port.

그래서 작업 CSP를 :

와일드 카드의 주제 (섹션 Implementation details)에 HTML5rocks introduction to Content Security Policy 꽤 좋은 참조

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ 'unsafe-inline';"> 

---

참고 1 : 해당 CSP directives을 사용하는 것이 좋습니다. 귀하의 경우에는 그렇게처럼 font-src 및 style-src을 사용해야합니다

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';"> 

해당 지침을 사용하는 이점이 CSP는 지금 매우 제한적 얻을 수 있다는 것입니다. F.e. 더 이상 스크립트 소스에 'unsafe-inline'을 허용하지 않습니다. 인라인 자바 스크립트는 이제 금지되어 있습니다. 이전에 허용 된 https://fonts.gstatic.com/의 스크립트를로드하는 것도 금지되었습니다. 등등 ...

---

주 2 : 당신은 모든 해시 또는 비표를 사용하여 'unsafe-inline' 키워드를 제거 얻을 수 있습니다. 이 예제에서는이 작업을 수행하지 못했지만 관심이 있으시면 HTML5rocks intro을 다시 살펴보십시오.