HTMX CSP extension (hx-csp) returns nonce mismatch, in contradiction with documentation

[dblanque]

Hello!

I am having an issue with HTMX 4 (Beta 4) where hx-csp does not seem to correctly use the fresh nonce from the new partial response from the server, and get instead the following error:
hx-csp.js:90 htmx: [hx-csp] blocked <form#form-login> — nonce mismatch (possible injection)

CSP Settings

SECURE_CSP = {
    "default-src": [CSP.SELF],
    "script-src": [CSP.SELF, CSP.NONCE, "'strict-dynamic'" ],
    "img-src": [CSP.SELF, "data:"],
}

Partial Snippet

<c-form
  x-data="form_login_data"
  id="form-login"
  class="self-center gap-0"
  hx-disable:inherited="this, #form-login-submit, #username, #email, #password, #select-language, #select-theme"
  @input="updateFormDisabledState"
  hx-nonce="{{ csp_nonce }}"
  hx-post="{% url "fe-login" %}"
  hx-swap="none"
  hx-headers='{"x-csrftoken": "{{ csrf_token }}"}'
  > (...)
</c-form>

I don't know if I'm being a dummy, or missing something but, according to the HTMX CSP Documentation which I quote:

The extension rewrites the response nonce to the page nonce so swapped-in elements pass subsequent nonce checks.
Before doing that rewrite, it scrubs any element that already carries the page nonce value from the raw response text.

In theory (and from what I can see in the response headers) each server response has a different nonce, just as the documentation says:

The server cannot know the page nonce — it only knows its own per-response nonce. So if the page nonce appears in a response, it was put there by an attacker, not the server. Scrubbing it first means the rewrite pass cannot accidentally promote attacker-controlled elements to trusted status.

I have also tried returning partials without hx-nonce when the request is an htmx request, however that results in a no-nonce error, which makes sense and is probably what should happen.

From what I gather, HTMX wanting to match the previous nonce to the next/fresh one isn't intended behavior, right? Or am I doing something wrong?

Regards and thanks in advance,
Dylan

Edit:

I also see in the hx-csp code that the following function compares the nonce to the page Nonce rather than the response Nonce...

function checkNonce(elt) {
    if (!pageNonce) return false;
    let eltNonce = getNonce(elt);
    if (eltNonce !== pageNonce && stripHxAttributes(elt, eltNonce)) return false;
}

[dblanque]

Ah, I believe I may have found the culprit:

I've moved the responseNonce to the highest scope within the extension (like the pageNonce) and changed the let declaration to utilize that higher scope response nonce.

After changing the checkNonce function to check both the page and response nonces, it seems to be working normally without the mismatch error.

let responseNonce = null;

function checkNonce(elt) {
    if (!pageNonce && !responseNonce) return false;
    let eltNonce = getNonce(elt);
    if ((eltNonce !== pageNonce && eltNonce !== responseNonce) && stripHxAttributes(elt, eltNonce)) return false;
}

Now, I know this isn't a valid solution because, if extensions are singletons then this might cause some race-condition problems when a request lifecycle starts before another one has ended, so I'm guessing the issue is when doing the second rewriteNoncesInText call to replace the responseNonce with the pageNonce.

[dblanque]

Okay, so it definitely was something regex related in the rewriteNoncesInText. It turns out django-minify-html removes single/double quotation-marks from nonces (wtf), so I changed the regex a bit to make them optional (and support spaces as well).

I also undid all the changes previously mentioned, leaving this as the sole change to the currently available hx-csp extension.

// Rewrites responseNonce → replacement in raw HTML before DOM parsing,
// covering hx-nonce and script nonce attributes in one pass.
// Pass replacement='' to strip nonce attributes entirely (stolen-nonce scrub).
function rewriteNoncesInText(text, responseNonce, replacement = pageNonce) {
    let escaped = escapeRegex(responseNonce);

    // Match 'nonce' or 'hx-nonce' with optional whitespace around the '='
    // ^|\s ensures we don't match 'data-nonce'
    let regex = new RegExp(`(^|\\s)(hx-nonce|nonce)(\\s*=\\s*)(["'])?${escaped}\\4`, 'gi');
    return text.replace(regex, (match, prefix, attrName, equals, quote) => {
        if (!replacement) return ''; // Scrubbing mode
        // If quote is undefined, default to an empty string
        quote = quote || ""; 
        return `${prefix}${attrName}${equals}${quote}${replacement}${quote}`;
    });
}

[MichaelWest22]

Thanks for finding this. I hadn't though about this non quoted form which is kind of valid in html parsers. I've pushed a fix to the four-dev branch to make the quotes optional which should resolve your issue. You can test: https://raw.githubusercontent.com/bigskysoftware/htmx/refs/heads/four-dev/src/ext/hx-csp.js

Also would be great to get some feedback on how well hx-csp works once your past this annoyance and how locked down you have been able to get your csp policy to using this.

[dblanque]

Hey Michael! Glad to be of help, thank you for maintaining htmx :D

I've just tried it and it seems to work great! I guess I overdid it in my changes a bit when I could've just made the quote capture group optional 😆 .

For the moment I just have the CSP settings I put above on the first post but I'll let you know if it has any other issues with stricter settings. I'm not entirely sure on how to do the trusted-types thing with AlpineJS and django-browser-reload so I intentionally didn't set those strict params in CSP.

[MichaelWest22]

Yeah for trusted types you just have to set it on in your CSP and test your application with no other changes and if you get no trusted types violations in console then you are good to go. But as soon as a third party js script tries any standard dom insertion that could possibly inject script tags it blocks it and breaks your functionality so each new script or insertion feature may force you to drop the trusted type enforcement.

Also if you can get your CSP to work without strict-dynamic it will enforce full nonce protection in hx-csp. With this setting in place any script tags without nonces inserted via htmx will all be auto trusted as they were created by a nonced htmx.js.

[dblanque]

I removed strict-dynamic and it still works normally, apparently, but I will report back in if I notice any issues.

Thank you again Michael!

[MichaelWest22]

SECURE_CSP = {
    "default-src": [CSP.SELF],
    "script-src": [CSP.NONCE], # without strict-dynamic you need to remove 'self'
    "img-src": [CSP.SELF, "data:"],
    "require-trusted-types-for": ["'script'"],
    "trusted-types": ["htmx"],

    # Recommended additions:
    "style-src": [CSP.SELF, CSP.NONCE],   # lock down CSS injection
    "connect-src": [CSP.SELF],            # restricts where htmx AJAX can go
    "form-action": [CSP.SELF],            # blocks formaction redirect attacks (hx-boost)
    "frame-ancestors": ["'none'"],        # clickjacking protection
    "base-uri": [CSP.SELF],               # blocks <base> tag hijacking of relative URLs
}

One thing to note is that strict-dynamic you had makes 'self' script-src non functional by design so you have to nonce all your scripts and they recommend leaving 'self' in there just for backward compat. So in your case you likely need to also remove self here to enforce nonces (they don't make it easy to understand do they!)

you can try adding the two trusted types lines just to test if it works or not in your case would be cool to know. and i've included the other base recommendations you can add for best security.

[dblanque]

Thank you for the tips! And no they definitely don't make CSP easy to grasp 😆 .

I went ahead and added your recommendations and it all seems to work normally, I also had to add worker-src for the django-browser-reload worker.

CSP_TO_USE = {
    "default-src": [CSP.SELF],
    "script-src": [CSP.NONCE],
    "img-src": [CSP.SELF, "data:"],
    "style-src": [CSP.SELF, CSP.NONCE],   # lock down CSS injection
    "connect-src": [CSP.SELF],            # restricts where htmx AJAX can go
    "form-action": [CSP.SELF],            # blocks formaction redirect attacks (hx-boost)
    "frame-ancestors": ["'none'"],        # clickjacking protection
    "base-uri": [CSP.SELF],               # blocks <base> tag hijacking of relative URLs
    "worker-src": [CSP.SELF] if DEBUG else ["'none'"],
}

As for the trusted types I kept that out due to AlpineJS not being very compatible with that, or at least being a major hassle. Still this should be a massive security improvement on the long-term versus not having any CSP implemented.

Thank you again, I really appreciate it. I will report if I find any problems.