CSP issue with IndicatorStyles - needs a htmx.config.inlineStyleNonce config option

[Kimotu]

Please add config option htmx.config.inlineStyleNonce:'' and extend function insertIndicatorStyles to include:

"<style nonce=\"" + htmx.config.inlineStyleNonce + "\">\
                      ." + htmx.config.indicatorClass + "{opacity:0;transition: opacity 200ms ease-in;}\
                      ." + htmx.config.requestClass + " ." + htmx.config.indicatorClass + "{opacity:1}\
                      ." + htmx.config.requestClass + "." + htmx.config.indicatorClass + "{opacity:1}\
                    </style>");

Tested it in a locale modified installation. Works.

[jyrimatti]

I also ran into this issue. For example when a recommended Content Security Policy is used: <meta http-equiv="Content-Security-Policy" content="default-src 'self'" /> no runtime style tags are allows to be inserted to the document (without a known hash/nonce).

This behaviour can be disabled by using <meta name="htmx-config" content='{ "includeIndicatorStyles": false }' /> but it feels kind of awkward to add this everywhere.

Is there a reason why this style is added programmatically, instead of providing a separate htmx.css file that the users could include if needed?

[terrablue]

Would you accept a PR here? I needed to add style-src 'unsafe-inline'; to my CSP to temporarily resolve this issue, but it loosens up the default security. I'd go with either of the proposed solutions here, though I'd prefer the CSS solution.