CSP blocks inline scripts when loading Alpine.js components via HTMX

[axzilla]

The Setup

I have components that combine Alpine.js for interactivity and HTMX for dynamic loading. These components contain both markup and their Alpine.js initialization code with proper CSP nonces.

The Problem

• Initial page load: Everything works perfectly. CSP with nonces allows the inline scripts.
• Loading via HTMX: CSP blocks the exact same inline scripts, even with valid nonces.

Example of what works on initial load but fails with HTMX:

<div>
    <script nonce="valid-nonce">
        Alpine.data('toastComponent', () => ({
            show: true,
            // component logic
        }))
    </script>
    <div x-data="toastComponent">
        <!-- markup -->
    </div>
</div>

Current Workaround

I had to split the components:

1. A script part that needs to be loaded in the page header or parent component
2. A markup part that can be loaded via HTMX

<!-- In page header/parent -->
@ToastScript()  <!-- Alpine.js initialization -->

<!-- In HTMX target -->
@Toast()  <!-- Just the markup -->

This works but breaks component encapsulation - users need to remember to initialize the script part separately.

Questions

1. Is there a way to keep components truly self-contained while using HTMX?
2. Has anyone solved this CSP + dynamic loading challenge differently?
3. Are there HTMX patterns that could help maintain component encapsulation?

Would love to hear your thoughts and experiences!

[axzilla]

I think I've got it figured out now. There are two main points:

1. Source URL:
   I had to change the HTMX source from

   cdn.jsdelivr.net 
   

   to

   unpkg.com
   

2. Timing:
   The following code works fine with HTMX swaps, but not if the component is needed on the initial page load:

   Alpine.data('myComponent', () => ({
       foo: 'bar',
   }))

   On the initial page load, we need this approach. But after an HTMX swap, it never gets executed again:

   document.addEventListener('alpine:init', () => {
       Alpine.data('myComponent', () => ({
           foo: 'bar',
       }))
   })

   A workaround like this should exist:

   <script nonce={ templ.GetNonce(ctx) }>
       (() => {
           const registerToast = () => {
               Alpine.data('example', () => ({
                   someState: true,
                   someFunc() {
                       // ...
                   },
               }));
           };
   
           typeof Alpine !== 'undefined'
               ? registerToast()
               : document.addEventListener('alpine:init', registerToast);
       })();
   </script>

   Maybe it's just me, but this workaround doesn't feel entirely right. For now, I'll stick with my current solution where I separate the script from the component and include them both separately:

   • Load the script on initial page load:

     @componentScript

   • Load the HTML component either on the initial page load or via HTMX:

     @component