CSP error: CSS not loading on local development environment

support
1

I have a private git repo which deployed on netlify successfully. (https://jhooq.com)

Recently I swtiched my development laptop and was trying to setup my website back again on my laptop

Step 1- I cloned my repo (Sorry its private repo)

git clone --recurse-submodules --remote-submodules https://github.com/rahulwagh/jhooq.git

Step -2 I started my hugo instance

hugo serve

Problem - When i access my website on localhost:1313, i do not see any css loading.

Capture
Capture1844×926 46.2 KB

When i looked closely on the chrome developer tool console i see error

Failed to find a valid digest in the 'integrity' attribute for resource 'localhost:1313/css/styles.fc508d92a633a5d6e8d3fd2a3bc148e14b70c5b9bf8f21ad0f82ac098787f4042736c23b796d64e104be86f9b1c63ff9dbcf0089c6193371163729b701f5a18b.css' with computed SHA-256 integrity 'C6srVqVAI3jRAOD/xGEgp5OZax+FuYsKqBSntC8VkvU='. The resource has been blocked.

I am guessing its has to do with css name -fc508d92a633a5d6e8d3fd2a3bc148e14b70c5b9bf8f21ad0f82ac098787f4042736c23b796d64e104be86f9b1c63ff9dbcf0089c6193371163729b701f5a18b

So can anyone help me how can i fix this integrity issue with css name

2

It has nothing to do with the file name and all with the integrity attribute on your stylesheet. Find the place where your CSS is created and added in the header and see what happens AFTER the styles get fingerprinted. This fingerprint has to come last and is used in the integrity attribute. I assume something does something after fingerprinting (minify maybe?) and the checksum is not correct anymore. DO NOT CHANGE the content of the stylesheet file AFTER doing fingerprinting.

3

You have enabled Content Security Policy in your project’s config file.

To fix CSS loading, you need to replace the old digest value with the new one.