Geek Answers Handbook

Chrome Throwing Browser Error in Google Security Policy for Google Fonts

I added the URL of the Google fonts to the font-src directive of my Content-Security-Policy header. I get the following error in Chrome 42:

Refused to load the stylesheet 'http://fonts.googleapis.com/css?
family=Open+Sans:300,400,400italic,600,800|Source+Code+Pro' because it violates the
following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".

The header field is as follows:

Content-Security-Policy: default-src 'self'; font-src http://fonts.googleapis.com;
style-src 'self' 'unsafe-inline'
+4
source share
3 answers

The problem is that links to http://fonts.googleapis.comreturn stylesheets, not fonts. If you look at the stylesheet that you pull it into, you will find several @ font-face rules that pull fonts out of http://fonts.gstatic.com.

To do this correctly, the Content-Security-Policy header should look something like this:

Content-Security-Policy: default-src 'self'; font-src http://fonts.gstatic.com; 
style-src 'self' 'unsafe-inline' http://fonts.googleapis.com
+9
source

, https:

Content-Security-Policy: default-src 'self'; font-src https://fonts.gstatic.com; 
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com
+1

If you are like me and a little confused because each answer simply says that you need to resolve the url in the style-src directive without specifying how to do this, here is the full tag:

<meta http-equiv="Content-Security-Policy" content="style-src 'self' http://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;">
0
source

More articles:


All Articles