Google Fonts violates Content Security Policy

58
votes

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'".

4
htmlcsshttpgoogle-font-apicontent-security-policy
So you have to change the CSP header you send to allow that resource. If you look at the current setting you can clearly see that styles are limited to the location self which most likely does not include googleapis.com . - arkascha
I've tried modifying it using a meta tag and adding some things I've seen on the internet but I have not been able to solve the this... - José María
This has nothing to do with meta tags. A CSP header is an http header, so part of the protocol, not the content. You send it, be it by purpose or accidentally. Maybe because you use some framework, but we cannot say any more without you posting more details. - arkascha
Hmmmm, I'm using Meteor JS - José María
You can easily check that header yourself if you don't believe the error message you see: just open your browsers development console and look at the headers of the basic requests done. They will contain said header. Or you use a network sniffer, comes out the same. - arkascha

4 Answers

92
votes

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.com in style-src directive and https://fonts.gstatic.com in font-src directive: "style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
52
votes

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;">
13
votes

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.

6
votes

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.
      ],
    }
  })
);