Craft 5 Blitz cache CSRF issue

[TUSAB-web]

What happened?

Since updating to Craft and Freeform 5, I have experienced a caching issue. Our site uses Blitz and we previously implemented the code on this page to refresh the CSRF tokens. https://docs.solspace.com/craft/freeform/v4/guides/templating/caching-forms/

One thing we had to do before with multiple forms (in different modals) was to modify that code to recognize the 2nd form on a page (call it formTwo) and then load that JS with that setting for formTwo.

After experiencing the problems, I changed our code to match the new recommendations here: https://docs.solspace.com/craft/freeform/v5/guides/templating/caching-forms/

Multiple forms that are inline on the page work now. But the issue with a 2nd form in another modal is that it will not refresh the token. I’ve tried inserting the code in various ways and various places, but I can’t seem to solve the puzzle.

Errors and Stack Trace (if available)

Summary
URL: https://sitenameremoved.com/path
Status: 400
Source: Network
Address: ipaddressremoved:443
Initiator: 
freeform.js:2:43988

Request
:method: POST
:scheme: https
:authority: sitenameremoved.com
:path: /this/way
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Content-Length: 4437
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypnR12Ypbjos6VSw1
Cookie: Craft-baaac969-d1cf-42f5-a55a-d0607f35af07:sidebar=expanded; Craft-baaac969-d1cf-42f5-a55a-d0607f35af07:sidebar-details=expanded; form_posted_7=1738180640; form_posted_20=1738179900; form_posted_18=1738179486; CRAFT_CSRF_TOKEN=fcd0a444898d6365e9a7ed17a7b488af28f1d8f292f582476dd282a663e6f2f5a%3A2%3A%7Bi%3A0%3Bs%3A16%3A%22CRAFT_CSRF_TOKEN%22%3Bi%3A1%3Bs%3A147%3A%22PkQmX3mVEH5w7gWNz4mDF6S5o25nBnfJeMAk3_No%7C4805e1917ab0c0dd2ec4b08e6011e0ba4743a3a7a4dbd9e7ec96263ed97a3774PkQmX3mVEH5w7gWNz4mDF6S5o25nBnfJeMAk3_No%7C1%22%3B%7D; CraftSessionId=845dab7427ea58e20ee287024784e5f5; e28f9985a1df45157eb57db043898a8b_username=1a8e4e63614a8a2e6f07e6d2924e48b2b1ac7cff98a0a9830ccee7dc8da7468ba%3A2%3A%7Bi%3A0%3Bs%3A41%3A%22e28f9985a1df45157eb57db043898a8b_username%22%3Bi%3A1%3Bs%3A5%3A%22mls14%22%3B%7D; form_posted_1=1738167639; _ga=GA1.1.634562217.1728483859; _ga_8V8EX1CPHB=GS1.1.1738104982.6.0.1738105969.0.0.0; form_posted_17=1738103438; form_posted_10=1738102008; _ga_CSLL4ZEK4L=GS1.1.1738012033.1.0.1738012036.0.0.0; 2a3cfb2c48a51375e68b24648778dfe5_username=c55845c79b4f2433fe266a54a13b5a20f6fbe964a678514f3404cb4131abcefea%3A2%3A%7Bi%3A0%3Bs%3A41%3A%222a3cfb2c48a51375e68b24648778dfe5_username%22%3Bi%3A1%3Bs%3A5%3A%22mls14%22%3B%7D
HTTP_X_REQUESTED_WITH: XMLHttpRequest
Origin: https://site-name-removed.com/
Priority: u=3, i
Referer: https://site-name-removed.com/page
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
X-Requested-With: XMLHttpRequest

Response
:status: 400
Access-Control-Allow-Credentials: true
Cache-Control: no-cache, no-store, must-revalidate
Content-Type: text/html; charset=utf-8
Date: Wed, 29 Jan 2025 21:03:07 GMT
Expires: 0
Pragma: no-cache
Server: nginx/1.26.1
x-debug-duration: 2,193
x-debug-link: https:/site-name-removed.com/actions/debug/default/view?tag=679a978a48d12
x-debug-tag: 679a978a48d12
x-powered-by: Craft CMS
x-robots-tag: none

Request Data
MIME Type: multipart/form-data
Boundary: ----WebKitFormBoundarypnR12Ypbjos6VSw1
Request Data: 

How can we reproduce this?

1. Put multiple forms on a page in separate modals
2. Load the cached page and try to submit form
3. Receive a 400 error

Freeform Edition

Pro

Freeform Version

5.9.3

Craft Version

5.6.2

When did this issue start?

After upgrading from older Freeform version

Previous Freeform Version

4.x

[kjmartens]

Sorry for the trouble you're experiencing @TUSAB-web.

We'll check into this and get back to you shortly. 🙂

[TUSAB-web]

Quick follow-up question: Would turning on asyncCsrfInputs=true remove the need for the javascript that produces the CSRF tokens? Not 100% sure if that setting affects the static cached pages that Blitz generates.

URLs discussing the issue here: craftcms/cms#15427 and here: #1424

[kjmartens]

I don't think that approach works with something like Blitz, unfortunately. If it does, I haven't seen a single thing anywhere that suggests it. 😕

[TUSAB-web]

If you want to see any code, or test the site directly, please send me an email or private message and I will give you whatever you need.

[TUSAB-web]

I don't think that approach works with something like Blitz, unfortunately. If it does, I haven't seen a single thing anywhere that suggests it. 😕

I removed the Solspace-suggested JS code, and turned on the asyncCsrfInputs in Craft. Cleared the Blitz cache an hour ago. Tried the forms on different machines and browsers, confirming they were seeing the hour-old cached page. And it worked! So perhaps it would be worth listing this as an option on your page here: https://docs.solspace.com/craft/freeform/v5/guides/templating/caching-forms/

I will do a few more tests to make sure, but it looks like the new async CSRF input Craft feature solved this for me. Feel free to close this issue, I can always re-open if it turns out there’s something I missed.

[kjmartens]

Thank you @TUSAB-web,

I will close this but we'll update our documentation/guide assuming this approach does work. 🙂