hugo Syntax Highlighting and Content Security Policy

One of the side effects of my recent changes to this website is that it no longer needs external scripts or the like. Thus it should be easy to add a Content Security Policy to this site.

Netlify makes it simple to add http headers. I chose the option to add a _headers file. Since it needs to go into the publish directory, I put it into the static directory with these security settings

/*
  X-Content-Type-Options: nosniff
  Strict-Transport-Security: "max-age=31536000; includeSubDomains; preload" env=HTTPS
  Cache-Control: max-age=31536000, public
  X-Frame-Options: deny
  Referrer-Policy: no-referrer
  Feature-Policy: microphone 'none'; payment 'none'; geolocation 'none'; midi 'none'; sync-xhr 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'
  Content-Security-Policy: default-src 'none'; manifest-src 'self'; font-src 'self'; img-src 'self'; style-src 'self'; form-action 'none'; frame-ancestors 'none'; base-uri 'none'; require-trusted-types-for 'script'
  X-XSS-Protection: 1; mode=block

Everything seemed fine and I liked the A+ rating at the Mozilla Observatory

Some days later however I noticed that the syntax highlighting didn’t work on the published site but as expected in local development. Apparently something was wrong with the content security policy.

One check in the developer tools console showed that the style-src 'self' setting blocked the inline styles the syntax highlighting uses.

Since I didn’t want to change that I looked at the hugo syntax highlighting documentation and found an easy solution. Instead of the standard inline styles you can switch to a stylesheet by setting markup.highlight.noClasses=false in the site configuration.

I created the stylesheet as documented (by the way the style is ’emacs’ of course) and stored it in the assets folder. Then I copied the stylesheet loading code into custom-head.html and highlighting worked.

When I first saw that option in the documentation I wondered why you would want to set this and now I know and like the simplicity of the solution. One more advantage of hugo as a static site generator!