Question

Can anyone help me with Content-Security-Policy?

Posted December 17, 2020 651 views
Nginx

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

edited by MattIPv4
1 comment
  • Everyone is just assuming I’m using HTTPS. I don’t even have it installed. And before you tell me “all sites should serve all content over HTTPS” that’s not my goals. But thanks for letting me know it’s a HTTPS issue. Only reinforces my views on browser/corporate power control schemes lol. :P

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.

×
2 answers

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

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.

Submit an Answer