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!