将Google字体(fonts.googleapis.com)添加到CSP标头中 [英] Adding google fonts (fonts.googleapis.com) to CSP header
问题描述
我正在gitHub页面上托管一个个人项目，并使用cloudflare强制执行https.现在，我想实施CSP政策.
I am hosting a personal project on gitHub pages, and using cloudflare to enforce https. Now I would like to implement a CSP policy.
我尝试将meta标签添加到页面顶部:
I tried adding meta tag to the head of my page:
<meta HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' *.fonts.googleapis.com/* *.cloudflare.com/* *.fonts.googleapis.com/*;">
但是我遇到以下错误:
拒绝加载样式表 ' https://fonts.googleapis.com/icon?family=Material+Icons'因为它 违反以下内容安全策略指令:"default-src 'self' .fonts.googleapis.com/ .cloudflare.com/ .fonts.googleapis.com/".请注意，未明确设置"style-src"，因此将"default-src"用作后备广告.
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/*设置为不允许页面上的所有内容?
won't setting *.fonts.googleapis.com/* allow everything from the page?
因为这是我第一次设置CSP，这是为github页面设置CSP的正确方法吗?我还没有找到任何阅读的书.
Since this is the first time I am setting a CSP is this the correct way to set it for github pages? I have not found any reading on this yet.
推荐答案
是否设置* .fonts.googleapis.com/*允许页面上的所有内容?
Won't setting *.fonts.googleapis.com/* allow everything from the page?
尽管这很直观，但答案是否.
Although this would be intuitive, the answer is no.
请参见 HTML5rocks内容安全政策简介 a>关于通配符的主题(实现详细信息):
See the pretty good HTML5rocks introduction to Content Security Policy on the topic of wildcards (section Implementation details):
通配符被接受，但仅用作方案，端口或主机名的最左侧位置:*://*.example.com:*将匹配example.com的所有子域(，但不匹配example.com本身)，可以在任何端口上使用任何方案.
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可能看起来像这样:
So a working CSP for the two fonts could look something like this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ 'unsafe-inline';">
注意1:好的做法是使用相应的 CSP指令.在您的情况下，您应该像这样使用font-src和style-src:
Note 1: It's a good practice to use the corresponding CSP directives. In your case you should use the font-src and style-src like so:
<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/加载脚本.等等...
The advantage of using the corresponding directives is that your CSP gets pretty restrictive now. F.e. you're not allowing 'unsafe-inline' for script sources anymore. This means inline javascript is now forbidden. It's also forbidden to load scripts from https://fonts.gstatic.com/, which was allowed before. And so on...
注2:您完全可以通过使用哈希或随机数来摆脱'unsafe-inline'关键字.我无法在此示例中进行此工作，但如果您有兴趣，请看一下 HTML5再次介绍了.
Note 2: You can get rid of the 'unsafe-inline' keyword at all by using a hash or a nonce. I have not been able to make this work for this example but if you're interested, just take a look at the HTML5rocks intro again.
这篇关于将Google字体(fonts.googleapis.com)添加到CSP标头中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
