Skip to content

HTMX extension requires unsafe-eval in CSP #78

@iantonge

Description

@iantonge

I'm working on a site with a strict CSP (default-src 'self';script-src 'self'). Both HTMX and idiomorph work just fine with the strict CSP, however the HTMX extension includes the following:

return Function("return (" + swapStyle.slice(6) + ")")();

This requires adding unsafe-eval to my CSP, which is not something I'm prepared to do. Fortunately I don't need the hx-swap='morph:<expr>' feature, so I was able to work around this by basically copy/pasting the current file and removing this block of code - which is fine, but now I need to make sure I keep an eye on this file and incorporate any meaningful changes whenever I upgrade the library, which is not optimal. It certainly created some friction for me when trying to get idiomorph up and running.

I understand removing a feature probably isn't a viable option, but perhaps there could be a separate idiomorph-htmx-safe.js file? If nothing else it might be worth flagging up the unsafe-inline requirement in the documentation.

Alternatively, "that's just how it is, deal with it" is a perfectly reasonable response :-)

Activity

MichaelWest22

MichaelWest22 commented on Dec 27, 2024

@MichaelWest22
Collaborator

Hi iantonge,

I just tested this to see what happens in my local app with a strict CSP set. When using the swap='morph:xxxxx' swap format it does indeed throw unsafe eval CSP warnings. But if your application only uses the safe non eval versions then you should not get any CSP violation warnings which I think this is really equivalent to the safe.js version you were thinking about anyway. htmx has a nicer option to disables its use of eval so you never get the warnings and the eval functions just fail silently but I think getting the warnings while your developing and testing your app is quite a good thing as long as you know to check your console for issues.

Also a note that most of the advanced idiomorph behavior options that you can set via the eval can also be set via javascript updating Idiomorph.defaults object to override the defaults.

iantonge

iantonge commented on Dec 30, 2024

@iantonge
Author

Thanks for taking the time to look at this. My experience was that I got a CSP violation and the js fell over even though that line was never hit - although testing it in a fresh project now I can see that is not the case. I can only assume I had a typo which meant that actually that line was hit. I think we can chalk this up to "Problem exists between keyboard and chair".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @MichaelWest22@iantonge

        Issue actions