CSP Error Using Hosted Google Fonts (Documentation?)

[EricAtNRD]

Hello,

Enthusiastic Hinode newbie here. I ran into an issue today that does not seem like a bug (probably "works as expected"), but a documentation update might help.

The Issue:
A CSP error is triggered when trying to use a hosted Google font from a local / dev server (even in the simplest case of uncommenting the supplied themeFontPath for the external version of the "Inter" font in config/_default/params.toml).

To reproduce:

1. Comment out: # themeFontPath = "/fonts" # local path
2. Uncomment: themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path

Errors:

• Safari: Refused to load https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap because it does not appear in the style-src directive of the Content Security Policy.
• Chrome: Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap' because it violates the following Content Security Policy directive: "style-src 'self' www.youtube.com". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Presumably this is simply a matter of updating the CSP module configuration (which I have not yet figured out how to do!) or just downloading the fonts locally, but the documentation does not make this clear:

https://gethinode.com/docs/configuration/fonts/

Hinode enables support for Google Fonts by default. If you use a different font provider, be sure to adjust the Content Security Policy in the Server Configuration. The font-face definitions in the file assets/scss/fonts.scss are ignored when using an external font.

Presumably the best way to address this is to add fonts.googleapis.com as a style-src as per: https://gethinode.com/docs/advanced-settings/server-headers/

Best wishes,
Eric

[EricAtNRD]

After a quick test I can verify that the error can indeed be fixed by simply adding fonts.googleapis.com to the style-src in config/_default/server.toml. E.g. the new version is:
style-src 'self' www.youtube.com fonts.googleapis.com;

However, config/_default/server.toml says on the first line "# Auto-generated file - do not modify" - so probably not the CORRECT way to fix the issue... What is the correct way to address this?

Thank you!
Eric

[markdumay]

Hi @EricAtNRD, thanks for sharing the elaborate context and examples. I realize the docs need some clarification. For now, you can best modify the site parameters in config/_default/params.toml. It contains the core CSP settings. Adding fonts.googleapis.com to the style-src directive should do the trick.

[modules.hinode.csp]
    style-src = ["www.youtube.com"]
    font-src = ["fonts.gstatic.com"]
    frame-src = [
        "player.cloudinary.com",
        "www.youtube-nocookie.com",
        "www.youtube.com"
    ]
    img-src = [
        "data:",
        "*.imgix.net",
        "*.imagekit.io",
        "*.cloudinary.com",
        "i.ytimg.com"
    ]

Next, run the following npm command to update the various configuration files. This will update the CSP settings for the internal Hugo server, as well as for Netlify. You may need to change this pending your deployment target.

npm run build:headers