lxndrblz / anatole

Anatole is a minimalistic two-column theme for Hugo.
https://themes.gohugo.io/themes/anatole/
MIT License
651 stars 363 forks source link

Updated Fontawesome *.min.css files to resolve integrity check errors #335

Closed guidemetothemoon closed 2 years ago

guidemetothemoon commented 2 years ago

P.S. It's my first time contributing, apologies in case something is missing - I've tried to follow the established contribution guidelines :)

Description

Changes related to this issue: https://github.com/lxndrblz/anatole/issues/299 cause integrity check errors provided below. These errors happen once you attempt to use social media icons for instance:

Failed to find a valid digest in the 'integrity' attribute for resource '<website>/fontawesome/css/solid.min.6ee9fbc38b1b14c99d05fdc597d9af749968eaf84e43050a6d059cad81a60bcc.css' with computed SHA-256 integrity 'TrP1Z4d6t0hI+yNEp2g3zJtsxCrjYjY0jF9GcV/frWc='. The resource has been blocked.

Failed to find a valid digest in the 'integrity' attribute for resource '<website>/fontawesome/css/brands.min.4bfdb43d33551d871070eb4a2ad6fd6e0d1910839cd73d763698f1db19049ddc.css' with computed SHA-256 integrity '3BDi1rr/CfGlgp184RZ2z0fUQpCkpNkdu0YJdlzdmhE='. The resource has been blocked.

Failed to find a valid digest in the 'integrity' attribute for resource '<website>/fontawesome/css/fontawesome.min.3eab8ef80d1761270f30323d1bd5d9d10a8f6a7610dbe233adba89094ed48fbd.css' with computed SHA-256 integrity 'E3K98f0smgriSX7SBZWMREv8HAM28mqcd9hcqPvnzlg='. The resource has been blocked.

The reason for these errors is that the initial changeset added 3 *.min.css files:

...but in the wrong format. Instead of being a one-liner, these files were indented and pretty-formatted which is different from the original source: https://cdnjs.com/libraries/font-awesome/6.0.0 and therefore gets a different checksum generated. The fix for this is to add properly compressed .min.css files. Files are taken from the original CDN, version 6.0.0 which is currently the one being used by Anatole theme. The fix has been tested both on Desktop and mobile version of the theme.

Issue Number:


Additional Information (Optional)


Checklist

Yes, I included all necessary artifacts, including:


Testing Checklist

Yes, I ensured that all of the following scenarios were tested:


Notify the following users

netlify[bot] commented 2 years ago

Deploy Preview for anatole-demo ready!

Name Link
Latest commit d5fbd52aa43acfa7d93fe598ebb89c10b5dbd88a
Latest deploy log https://app.netlify.com/sites/anatole-demo/deploys/623c260b78a44f0008941721
Deploy Preview https://deploy-preview-335--anatole-demo.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

sonarcloud[bot] commented 2 years ago

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
No Duplication information No Duplication information

lxndrblz commented 2 years ago

@guidemetothemoon Thanks for your PR. I totally agree that the files should be minified if they carry "min" in their name.

The one thing that baffles me a bit is why you got the integrity error as Hugo will calculate the hash over the files no matter if the content is pretty printed or minified. I think if this had been a global problem, it would have came up quite quickly. Nevertheless I will go ahead and merge the PR. Thanks again.

guidemetothemoon commented 2 years ago

Thanks for the review! I agree, I did some research and was surprised that no issues from others were raised for the same. I first thought that the issue may have been related to the line endings but after some tweaking back and forth I ended up with current resolution. Could it be that if the content is not minified, then the checksum is still different because the content kind of changes in terms of size? That's what I saw in this case at least. Or maybe this has something to do with how template is set up? I'm using the traditional set up as a Git submodule. But anyway, happy to help! And thanks for this theme - I'm actively using it for my tech blog and absolutely love it! :)