Control CSRF rendering via render/form options

[timkelty]

We frequently find that pages with Formie forms on them that call formie.renderForm() are not cacheable, because they always render a CSRF token.

Formie's docs (geared toward Blitz instead of the Cloud) show you how to refresh those tokens on init, but because there is no way to omit the CSRF input, in that scenario the cached item would still end up with a CSRF token from whoever hit it first. Which, is a bit awkward, and in the case of Craft Cloud, would never be eligible to be cached in the first place.

We generally instruct people to either:

• Set CRAFT_ASYNC_CSRF_INPUTS=true so that when formie renders the CSRF input, it will be async and not block caching. This generally does the trick, but is a global setting, and may not be compatible with custom form handling js.
• Render the form themselves, and either omit the csrf and include their own JS to retrieve and inject it, or pass the {{ csrfInput() }} function options.

So, the goal would be to optionally either omit or customize the csrf input when calling formie.renderForm().

A simple idea could be to just have some kind of csrfInputHtml setting, where you could provide it in its entirety:

// the default
{{ formie.renderForm({ csrfInputHtml: csrfInput() }) }}

// don't render the input at all
{{ formie.renderForm({ csrfInputHtml: ''}) }}

// render the input with options
{{ formie.renderForm({ csrfInputHtml: csrfInput({async: true}) }) }}

[engram-design]

Yep, it's actually on my list to add some better handling for statically-cached forms, but this might be in addition to that. I know that asyncCsrfInputs setting can be set, which Formie should be compatible with (currently isn't).

So just to clarify, I just need to omit the CSRF input altogether - no refreshing required?

[timkelty]

which Formie should be compatible with (currently isn't)

Actually, it is! Because Formie's template calls Craft's csrfInput function, the default async behavior adheres to the global asyncCsrfInputs if nothing is passed.

So just to clarify, I just need to omit the CSRF input altogether - no refreshing required?

Not quite, see above. I was just suggesting if someone wanted full JS control of things, they may want to omit the input all together and populate the CSRF data using users/session-info themselves.

[engram-design]

Huh, well at some point it wasn't working, but looks like you're right.

I'll consider these options, easy enough!