I have a _form.html.twig partial template generated by the makerBundle command make:crud.
I also have a full page template new.html.twig where I have included the partial template in a turbo-frame because I would like to be able to open this form in a modal.
{% block page_content %}
<turbo-frame id="product_brand_new" target="_top">
{{ include('product/brand/_form.html.twig') }}
</turbo-frame>
{% endblock %}
When I submit this form from the full page everything is working great, but when I submit form a modal or even another page with a turbo-frame, I systematically have a 422 HTTP response code (Unprocessable Entity) due to a CSRF token error.
It seems like I can manually override the CSRF token but I wonder if this is the good way of doing it because the token works well via the full page.
People also seems to disable the CSRF protection for submit by commenting the line bellow in their settings.
framework:
form:
csrf_protection:
token_id: submit
csrf_protection:
check_header: true
stateless_token_ids:
# - submit
- authenticate
- logout
but I really don't want to do that. I'm sure there is a way to make it work and I think that I will need help with that 🙂
As stated by JulianKoster, it was just a bug and it was patched just a few hours after my question, see: Stateless CSFR not working with mixed forms in app - some within turbo frames and some outside turbo frames #59571
For people struggling, just commit/stash your changes, run composer recipe:update and you will see some stimulus-bundle changes about CSRF.
After this update, form submit with CSRF enabled works even from inside a turbo frame! No additional code needed.