Hugo - Failed to find a valid digest in the 'integrity' attribute for resource - The resource has been blocked - Host on Github

Question

Issue:

I am trying to deploy/host my Hugo site on GitHub.

The site renders perfectly when I run it locally (http://localhost:1313/) using the hugo server command, but it does not render correctly when I host it on GitHub.

Initially, I thought the issue was the deployment on GitHub, but then I opened the index.html file which is generated by the hugo command within the public folder and I noticed that it does not work there either. So I assumed there is something wrong with my css connection in the index.html file:

href=https://username.github.io/assets/css/stylesheet.min.06dcab22093156f8a08872c23ce7ee2a8234185d3c84741f7b0ce0c78df475b8.css

but this seems to be the correct link.

Installation Process and Research Efforts:

In order to create the hugo site in the first place, I followed the quick-start tutorial and in order to apply the theme of my choice, I followed the official installation process described here by PaperMod. Finally, to host it on GitHub, I followed the recommended instructions.

My config.yml file has the recommended structure as the example file presented in the offical repository.

Besides filing an issue on the GitHub repository of the theme developer which I didn't get a clear answer except for a correction he pointed out which didn't work, I looked at a couple of articles like this, this and this but none of them work.

I am using windows 10 and my Hugo version is v0.78.2/extended windows/amd64.

Update:

I check the console of the html file and I found these three errors:

(index):1 Failed to find a valid digest in the 'integrity' attribute for resource 'https://username.github.io/assets/css/stylesheet.min.5846effdc39e688e1bf07acc7a47123f949ae43a8b0e776fa1a2a626406cc602.css' with computed SHA-256 integrity 'J6YEe5hjKuk/TENUR7jEMr6VNR4lwN8iVpSGj1g8MU4='. The resource has been blocked.

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Aney

Answer 1

Workaround:

I replaced:

integrity="J6YEe5hjKuk/TENUR7jEMr6VNR4lwN8iVpSGj1g8MU4="

with:

integrity=""

in the css tag of every single index.html file.

This worked, although I found a solution to do this automatically and skip the error in the first place.

Solution(!) - Update:

It looks like the head.html file under the assets folder has the following structure:

 <!-- Styles --> 
 {{- $stylesheet := (resources.Match "css/*.css") | resources.Concat "assets/css/stylesheet.css" | minify | fingerprint -}} 
 <link href="{{ $stylesheet.Permalink }}" integrity="{{ $stylesheet.Data.Integrity }}" rel="preload stylesheet" 
     as="style"> 

I replaced integrity="{{ $stylesheet.Data.Integrity }}" with integrity="" and it worked! It automatically generates index.html files that are built with empty integrity and as a result there is no error and it works perfectly.

Aney

Answer 2

Thanks to @Samuel Three's answer, I started to look more closely at my Cloudflare configuration.

I discovered that I had Cloudflare's "Auto Minify" feature turned on (under Speed / Optimisation) for JavaScript and CSS. Disabling those (and flushing the Cloudflare cache once) fixed the issue for me, and I was able to leave Cloudflare's cache enabled from that point on.

Of course, if Cloudflare modify the JS or CSS files in any way, the computed SHA integrity will no longer be correct.

Submit

This is indeed correct, I wonder why CF alters the integrity in the first place.... – Arnaldo

I didn't want to ignore integrity completely - that sounds like a bad idea. this was the solution to my specific setup and worked instantly. – Bisk

Answer 3

For anyone else having the same issue with the integrity, adding the following code to my config.yml file solved the problem.

params:
    assets:
        disableFingerprinting: true

Tylertylosis

This worked great. With toml it's params.assets.disableFingerprinting = true. Wondering if there's a safer yet simple solution though – Nigel

Answer 4

I found a solution if you are using Cloudflare as the DNS for you domain.

Just clean the Cloudflare CDN cache or turn off it to prevent it happening again.

https://github.com/lxndrblz/anatole/issues/114#issuecomment-828750909

Wisecrack

Answer 5

Ignoring the integrity completely will, of course, solve this (and we certainly don't want any other processes to modify the file on the fly later - turn that off in Cloudflare if you have it enabled in Speed > Optimization > Auto Minify, for example).

However, I hit this problem because my fingerprint wasn't last in the chain of resource events that modify the content. For example, this was my problem:

...
{{ $css = $css | fingerprint "sha256" }}
{{ $css = $css | resources.PostCSS }}
{{ $css = $css | resources.PostProcess }}
...
<link
  rel="stylesheet"
  href="{{ $css.RelPermalink }}"
  integrity="{{ $css.Data.Integrity }}"
  media="screen"
/>

But this now works perfectly:

...
{{ $css = $css | resources.PostCSS }}
{{ $css = $css | fingerprint "sha256" }}
{{ $css = $css | resources.PostProcess }}
...
<link
  rel="stylesheet"
  href="{{ $css.RelPermalink }}"
  integrity="{{ $css.Data.Integrity }}"
  media="screen"
/>

Hope this helps anyone else that hits this gotcha.

Polybasite