Fingerprinting + PostProcess + HTML minify causes HTML validation errors

[internetfreak]

What version of Hugo are you using (hugo version)?

0.87

Does this issue reproduce with the latest release?

Yes

What is happening?

When building a site that uses fingerprints for the resources while also minifying the final output with the option keepQuotes = false the output will cause HTML validation errors due to the fact that the fingerprint is base64 encoded and can contain = which break HTML when unquoted.
From my observations the final fingerprint is added to the site after the minification took process so the minifier cannot detect the base64 string and keep the quotes.

What to expect?

Minification should take place after all other build steps are done so the output processed by the minifier is definitely the final output and does not get processed any further after minification.
I tested the issue with the online version of the used minifier and it in fact keeps quotes when it encounters a base64 encoded string while removing all other quotes which then allows the document to pass validation

How to reproduce?

1. Create a minimal hugo site
2. Add some fingerprinted resource to the site, e.g. {{§css = resources.Get "my/styles.css" | fingerprint}}
3. Output that file and fingerprint: <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
4. Set the following config option: keepQuotes = false
5. Call hugo with hugo --minify
6. The final build will now have unquoted = characters in its source (if the hash requires them)

[jmooring]

Unable to reproduce with v0.87.0.

git clone --single-branch -b hugo-github-issue-8884 https://github.com/jmooring/hugo-testing hugo-github-issue-8884
cd hugo-github-issue-8884
hugo server --minify

[internetfreak]

I have tested your repo and indeed I am also unable to reproduce it so I went again to my site to test it further and I found the most likely culprit: PostProcess.
I checked the HTML output and noticed that only one stylesheet reference is affected which is my reference of the TailwindCSS styles. In production mode, I call it like this: {{ $tailwindCSS := $tailwindCSS | minify | fingerprint | resources.PostProcess }}
When I watch the html generated by hugo I see that it fills and minifies the output but for the stylesheet that has yet to process there's only a placeholder which is then later replaced by the correct reference but as there's no quotes due to the minification, the error occurs.
Removing resources.PostProcess from the build chain yields the expected result.

[jmooring]

Verified. Updated MRE:

git clone --single-branch -b hugo-github-issue-8884 https://github.com/jmooring/hugo-testing hugo-github-issue-8884
cd hugo-github-issue-8884
hugo server --minify

Changing PostProcessSuffix = "__e" to PostProcessSuffix = "__e=" in postpub.go fixes the problem, but affects more than just the integrity attribute (a heavy-handed fix).

[bep]

@jmooring I think that with minification as part of the publisher chain, the best we currently can do is to make sure the attribute values stays quoted. I don't see any harm in adding a "=" to the suffix. We could do it just for the integrity attribute, but that would be a little "what's next?"

I do have a improved (but little bit more involved design for these post processings) somewhere, with a new defer template keyword. Which would be really cool, but will not happen today.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.