CSP issue unsafe-inline

[udf2457]

I am seeing the following when using htmx:

Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “default-src https:”

I think htmx need to take a leaf out of fontawsome's book : https://docs.fontawesome.com/web/dig-deeper/security/

With fontawesome you do this:

    <script src="https://example.com/fontawesome/v6.6.0/js/all.js" data-auto-add-css="false"></script>
    <link href="https://example.com/fontawesome/v6.6.0/css/svg-with-js.css" rel="stylesheet" />

And it works perfectly on secured sites such as mine which have restrictive CSP.

[MichaelWest22]

htmx already has a config setting called htmx.config.includeIndicatorStyles that you can set false so it will not use inline styles to create the indicator styles and this is the same as the data-auto-add-css setting you mention. You are then free to declare the indictor css styles yourself if required.

Would just need to add the following in an included css file i think:

.htmx-indicator{opacity:0}
.htmx-request .htmx-indicator{opacity:1; transition: opacity 200ms ease-in;}
.htmx-request.htmx-indicator{opacity:1; transition: opacity 200ms ease-in;}

Also there is a htmx.config.inlineScriptNonce which allows you to improve your CSP with a styles-src random nonce value and set this config to the same random nonce value in a htmx-config meta tag on each full page request which resolves the CSP issue.

[udf2457]

Thanks @MichaelWest22 , I'll have a look into your suggestions when I get a chance in the next few days.