Google Fonts violates Content Security Policy
HtmlCssHttpGoogle Font-ApiContent Security-PolicyHtml Problem Overview
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:
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'".
Html Solutions
Solution 1 - Html
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"
Solution 2 - Html
If you're like me and a little confused because every answer is just saying you need to authorize a URL in a style-src directive without showing how to do it, here's the full tag:
<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;">
Solution 3 - Html
There are multiple sources that can be given for 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.
<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.
Solution 4 - Html
When working with Helmet, the following works perfectly (written in 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.
],
}
})
);