將谷歌字體（fonts.googleapis.com）添加到CSP標頭

Question

我在gitHub頁面上託管個人項目，並使用cloudflare執行https。現在我想實施一項CSP政策。

我嘗試添加meta標籤到我的網頁的頭：

<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?

雖然這將是直觀的，答案是沒有。

看到不錯HTML5rocks introduction to Content Security Policy上通配符（部分Implementation details）主題：

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的兩種字體可能是這個樣子：

<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'作爲腳本來源。這意味着內聯JavaScript現在被禁止。禁止從https://fonts.gstatic.com/加載之前允許的腳本。等等...

---

注2：您可以擺脫'unsafe-inline'關鍵字都將通過使用散列或隨機數。我沒有能夠爲這個例子做這個工作，但如果你有興趣，只需再次看看HTML5rocks intro。