Using SCSS assets with integrity checking on Netlify

support
1

I’ve just started updating a theme and site to work with the 0.43+ SCSS processing.

However, I’m running into some problems with the SHA integrity checks for the processed CSS files.

This is an example error from Firefox’s web console:

"https://keen-saha-3f6b43.netlify.com/css/style.min.1c06b23a349b966b6f6956365806033e458bb8516b04e452121ad444900914a4.css" is not eligible for integrity checks since it's neither CORS-enabled nor same-origin.

The code that is processing the SCSS is

{{- $cssOpts := (dict "targetPath" "css/style.css") -}}
{{- $style := resources.Get "scss/main.scss" | toCSS $cssOpts | minify | fingerprint -}}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media="screen">

It works properly when testing locally, and when using Safari (I understand it doesn’t care about integrity checking), but fails with Firefox.

Any ideas on how to get things working?

Link to theme repo
Link to site repo
Link to site

2

I believe this is because you haven’t forced https for your resources. Integrity checks can only be used with resources loaded over https.

Maybe some external testing would help?

By the way, your link uses http rather than https which doesn’t help.

3

Thanks! As you pointed out, accessing the site over https works as expected.

I thought the issue may be my netlify setup rather than with Hugo. I’ll keep looking in that direction.

4

And I found the answer on how to do redirects on stackoverflow, and it looks like the site is working.