Deal with SRI issue

[JasonYao]

Ok, digging into this problem is a bit of a rabbit hole, but i think i found the smoking gun

The problem

My site right now looks like this

The console error

Failed to find a valid digest in the 'integrity' attribute for resource 'https://www.jasonyao.com/css/style.min.8c5b1db953dbbc8f8f693a5063dfc01cc0e62ec5cd66779bc140a6f3a4f1fb791213794fff056b0024da355198a2d53c.css' with computed SHA-256 integrity 'MrLGMT0ePKOgnqvX/e2Pb8admndAI+pdAnufbBf0l0g='. The resource has been blocked.

Debugging Steps

Verifying if my files have been tampered with, or if it's a similar bug i previously found in FF related to SRI

• Testing that asset with an SRI hash generator gave a hash value of sha384-xW4k7xHZdaIEMjt2BDxWg7eNfbIIBZ5o/hGSAqNXw6sPN2xShMp7D2S4N/bqjf6R, while the value generated by hugo was sha384-jFsduVPbvI+PaTpQY9/AHMDmLsXNZnebwUCm86Tx+3kSE3lP/wVrACTaNVGYotU8

THIS MEANS THE FILE WAS TAMPERED WITH

Ok, so the file's appears to have been tampered, but WHICH PART?

• Sticking this into a differ showed:

  

• The left hand side is the what the CSS file should be, and what was generated by hugo and is in our repo. The right hand side is what was actually served by my site

• It's subtle, but the difference was:

Original	Modified
box-shadow: black	box-shadow: #fff

To be fair, these two statements are functionally the same, as #fff is just a different way to represent the value black.

Still though. Those bastards. Somebody (either github at their edge, or cloudflare at the CDN level) decided to break my site by modifying my .css static assets without telling me, all to save literally 1 byte of data (black is 5 chars while #fff is 4).

Next steps

• Figure out if Cloudflare has optimizations turned on, and turn it off if possible.

References

1. github-repo.css.txt
2. live-site-served-css.css.txt

[JasonYao]

A quick hack solution in the meantime is to just use their #fff value.

Trying that now to see if that'll fix the issue. It's a bit more complicated since it's the underlying theme css, so i'll need to copy their CSS over and then remove it from the header of our html

[JasonYao]

https://github.com/JasonYao/JasonYao.github.io/commit/ef7b1103e3a852765447503b76c6c6f02c543858 fixes the issue with a hack

As for the culprit, I believe this represents everything pretty well:

Cloudflare

Here's what my cloudflare settings looked like, hidden away under their Speed > Optimization settings

Looks like old me wanted to be lazy and just have things sped up, and SRI wasn't really much of a thing back then.

I'm debating on turning this off and reverting the hack, but for now I'm just going to go get some sleep now that the site is good

[JasonYao]

turned off auto minify for js and css assets since those are the ones with SRI, while leaving html minification since there's no integrity checks for that