Html Google Fonts 违反内容安全政策
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33984908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Fonts violates Content Security Policy
提问by José María
I'm trying to use Google Fonts and I've never had any problems, but now when I try to add the CSS file on my header I get this error on the console:
我正在尝试使用 Google 字体，但从未遇到任何问题，但是现在当我尝试在我的标题上添加 CSS 文件时，我在控制台上收到此错误：
Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Whatever'because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".
拒绝加载样式表，'http://fonts.googleapis.com/css?family=Whatever'因为它违反了以下内容安全策略指令："style-src 'self' 'unsafe-inline'".
回答by Rolinh
There are two things to fix here:
这里有两件事需要解决：
- Use https for the Google fonts link (
https://fonts.googleapis.com/css?family=Whatever) - Authorize
https://fonts.googleapis.cominstyle-srcdirective andhttps://fonts.gstatic.cominfont-srcdirective:"style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
- 将 https 用于 Google 字体链接 (
https://fonts.googleapis.com/css?family=Whatever) - 授权
https://fonts.googleapis.com的style-src指令，并https://fonts.gstatic.com在font-src指令："style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
回答by Owen
If you're like me and a little confused because every answer is just saying you need to authorize a URL in a style-srcdirective without showing how to do it, here's the full tag:
如果你像我一样有点困惑，因为每个答案都只是说你需要在style-src指令中授权一个 URL而没有显示如何去做，这里是完整的标签：
<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;">
回答by Manohar Reddy Poreddy
There are multiple sources that can be given for Content-Security-Policy.
可以提供多种来源Content-Security-Policy。
Below has clear details, which worked for me.
下面有明确的细节，这对我有用。
Depending on which content (css, img, font, media) source error you have, you can change the URL in the below.
根据您的内容（css、img、字体、媒体）源错误，您可以更改下面的 URL。
<html>
<head>
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
style-src 'self' https://fonts.googleapis.com;
font-src 'self' data: https://fonts.gstatic.com;
img-src 'self' data: content:;
media-src *;
"
/>
<title>My page title</title>
</head>
<body>
some text
</body>
</html>
Hope that helps.
希望有帮助。
回答by Daniel Danielecki
When working with Helmet, the following works perfectly (written in TypeScript):
使用Helmet 时，以下效果完美（用 TypeScript 编写）：
import * as express from 'express';
import { Express } from 'express';
const helmet = require('helmet');
const expressApp: Express = express(); // Create Express instance.
expressApp.use(
helmet.contentSecurityPolicy({
directives: {
fontSrc: [
"'self'", // Default policy for specifiying valid sources for fonts loaded using "@font-face": allow all content coming from origin (without subdomains).
'https://fonts.gstatic.com' // Google Fonts.
],
styleSrc: [
"'self'", // Default policy for valid sources for stylesheets: allow all content coming from origin (without subdomains).
'https://fonts.googleapis.com' // Google Fonts.
],
}
})
);
