Question

Can anyone help me with Content-Security-Policy?

All I am trying to do is get google fonts working on my website.

The HTML I am using is:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' fonts.gstatic.com/; style-src 'self' fonts.googleapis.com/ 'unsafe-inline';">

The errors in firefox and chromium:

index.php:4 Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Sriracha%7CPT+Serif' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Which, I obviously didn’t set, both browsers are doing this on their own, default installation of both.

Here’s the header info from the website:

[Response Headers]
Request URL: http://tuxug.com/index.php
Request Method: GET
Status Code: 200 OK
Remote Address: 134.209.163.70:80
Referrer Policy: no-referrer-when-downgrade
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 17 Dec 2020 21:19:32 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: close
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: default-src 'self';script-src 'self' 'unsafe-eval' 'unsafe-inline';style-src 'self' 'unsafe-inline'
Content-Language: en
Cache-Control: no-cache, must-revalidate, stale-while-revalidate, max-age=0, private, no-transform
Pragma: no-cache
Expires: 0

[Request Headers]
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Cache-Control: max-age=0
Connection: keep-alive
Cookie: PHPSESSID=xxx
Host: tuxug.com
Referer: http://tuxug.com/
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

I’m at my wits’ end with this any help would be greatly appreciated

Show comments

Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Accepted Answer

I am the OP. Had this page still in my bookmarks heh. Just wanted to say I got this all working without using the garbage HTTPS. I got google fonts working on http: here but it took a lot of work getting around Content-Security-Policy without doing browser modifications.

I won’t want to say how I got it working properly because some control freak nerd will likely try to fix it or something. But I will say you can do this.

Schemeless source fonts.googleapis.com will use Same Origin Policy to determine the scheme. Therefore on HTTP-pages it will be http://fonts.googleapis.com and https://fonts.googleapis.com on HTTPS ones. Hence on HTTPS:-pages the httpS://fonts.googleapis.com source will not allow to load styles from http://fonts.googleapis.com/css?family=Sriracha%7CPT+Serif.

The policy style-src 'self' http://fonts.googleapis.com fonts.googleapis.com 'unsafe-inline'; will solve troubles with CSP but you meet a new trouble with mixed content (loading the style via http: on https: page).

Best way is to change scheme of load style to https in your HTML code: httpS://fonts.googleapis.com/css?family=Sriracha%7CPT+Serif This will work with your original CSP.

Bobby Iliev
Site Moderator
Site Moderator badge
December 20, 2020

Hi there @ZenTiger13,

I believe that as your website is working over HTTPS, you need to load the resources from Google via HTTPS as well.

To do so just update the tag to:

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

Let me know how it goes! Regards, Bobby

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel