How to fix CSS integrity error in Hugo

I decided to use Hugo for a new blogging site I’m working on. I’m really enjoying it so far, because it comes with a lot of goodies by default, like Markdown post image optimization and RSS feeds.

Stylesheets not loading in Hugo

I did run into an issue though. It seems whenever I’d deploy the new site, stylesheets would refuse to load. Then, I’d clear CloudFlare’s cache, and the site would load the stylesheets, but then when I’d run Lighthouse, the stylesheets would again refuse to load.

Console errors in the browser would read as follows:

Failed to find a valid digest in the 'integrity' attribute for index.html:1 resource 'https://....' with computed SHA256 integrity '.....'. The resource has been blocked.

This has to do with Subresource Integrity, which I believe is part of Cross-Origin Resource Sharing (CORS).

Yay! My first CORS error. I’ve seen a lot of aching about CORS errors on Twitter.

CloudFlare Rocket Loader is the problem

CloudFlare Rocket Loader is a delayed loading and bundling feature for JavaScript. I don’t know why it’s affecting CSS, but turning it off solved the problem 🤷‍♂️

Make sure to clear CloudFlare’s cache after turning it off.

Other ways to fix the problem

You can edit your templates to remove the integrity feature altogether. In my theme, the template loading the CSS was layouts/_default/baseof.html.

Here’s what the code looks like with integrity in place:

{% raw %}<link rel="preload" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" as="style" crossorigin="anonymous">{% endraw %}

Change integrity to integrity="":

{% raw %}<link rel="preload" href="{{ $styles.Permalink }}" integrity="" as="style" crossorigin="anonymous">{% endraw %}

There were about 4-5 <link> and <script> tags in my template, I changed it for all of them. I reverted back to the way it was when I discovered Rocket Loader is the issue.