Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding google fonts (fonts.googleapis.com) to CSP header

I am hosting a personal project on gitHub pages, and using cloudflare to enforce https. Now I would like to implement a CSP policy.

I tried adding meta tag to the head of my page:

<meta HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' *.fonts.googleapis.com/* *.cloudflare.com/* *.fonts.googleapis.com/*;">

But I am getting the following error:

Refused to load the stylesheet 'https://fonts.googleapis.com/icon?family=Material+Icons' because it violates the following Content Security Policy directive: "default-src 'self' .fonts.googleapis.com/ .cloudflare.com/ .fonts.googleapis.com/". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

This are the scripts that I am including:

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet">

won't setting *.fonts.googleapis.com/* allow everything from the page?

Since this is the first time I am setting a CSP is this the correct way to set it for github pages? I have not found any reading on this yet.

like image 837
Miha Šušteršič Avatar asked Feb 21 '17 13:02

Miha Šušteršič


People also ask

How do I add a font to Google header?

To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.

How do I import fonts into Googleapis?

Use the @import method: @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); Obviously, "Open Sans" ( Open+Sans ) is the font that is imported. So replace it with yours.

How do I import Google Fonts into CSS?

Open Google Fonts and follow these steps: Find the font and click it (a card with the font), then, click "+ Select this style". On the right side, you'll see a container with the name "Selected family". Click "Embed" and choose <link> or @import depending on where you need to add the font (in HTML or CSS).

Can Google Fonts be embedded?

Use the Google Fonts CSS API to embed the fonts directly on your website.


1 Answers

Won't setting *.fonts.googleapis.com/* allow everything from the page?

Although this would be intuitive, the answer is no.

See the pretty good HTML5rocks introduction to Content Security Policy on the topic of wildcards (section Implementation details):

Wildcards are accepted, but only as a scheme, a port, or in the leftmost position of the hostname: *://*.example.com:* would match all subdomains of example.com (but not example.com itself), using any scheme, on any port.

So a working CSP for the two fonts could look something like this:

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

Note 1: It's a good practice to use the corresponding CSP directives. In your case you should use the font-src and style-src like so:

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

The advantage of using the corresponding directives is that your CSP gets pretty restrictive now. E.g., you're not allowing 'unsafe-inline' for script sources anymore. This means inline javascript is now forbidden. It's also forbidden to load scripts from https://fonts.gstatic.com/, which was allowed before. And so on...


Note 2: You can get rid of the 'unsafe-inline' keyword at all by using a hash or a nonce. I have not been able to make this work for this example but if you're interested, just take a look at the HTML5rocks intro again.

like image 177
Phonolog Avatar answered Sep 20 '22 08:09

Phonolog