-
-
Notifications
You must be signed in to change notification settings - Fork 357
[LiveComponent] Form submit fails because of invalid CSRF token #2505
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Hi, what packages did you upgrade? |
All symfony packages from 7.1 to 7.2 and the symfony/ux packages to their newest version. I have also updated all the flex recipes to their newest version. |
Idk if it's related, but do you also have this file https://github.com/symfony/recipes/blob/main/symfony/stimulus-bundle/2.20/assets/controllers/csrf_protection_controller.js? Can you try to update your packages one by one (or at least Symfony and UX packages separatly)? Or create a reproducer? It would help us to understand what's happening, and to fix it. Thanks! |
Yes, I have that file.
Unfortunately, I have not yet been able to reproduce it in a clean installation. However, I have found out where the validation fails, namely here: https://github.com/symfony/security-csrf/blob/7.2/SameOriginCsrfTokenManager.php#L166 With this information, do you have any idea what the problem might be? |
A previous form (one not managed by a livecomponent?) was submitted successfully with a double-submit cookie (which was added by the js snippet). |
I was able to reproduce it. Here is my reproducer: https://github.com/momocode-de/symfony-ux-issue-2505 I have made 5 commits, here is the explanation of the test process:
Now I have tested the registration and login once and I already had a problem with the CSRF token:
I then added the live component for the form in the “Add live component for test form” commit. I then tested whether the form could be submitted:
Then I rebuilt the live component in the commit “Submitting the Form via a LiveAction” so that the form is submitted via a LiveAction. Then I tested again:
I had first tested the whole thing without login and registration and it worked there. However, due to the previous login there now seems to be a problem with the double-submit. I hope this helps you. |
Can you try this change to the csrf field? Then you can lobby for this PR to be merged if that's the source of the issue ;) |
That is the fix that I had also made: momocode-de/symfony-ux-issue-2505@4bb01a9 After that, the login worked, but not the submit of the test form. |
I think i've figured this out... as we did say we had no need for csrf in live component, we simply forgot to handle the ones security does insert automatically.. Could you just check this @momocode-de ? Add the following line in our csrf-controller.js file (probably line 18) if (!csrfCookie && nameCheck.test(csrfToken)) {
csrfField.setAttribute('data-csrf-protection-cookie-value', csrfCookie = csrfToken);
csrfField.defaultValue = csrfToken = btoa(String.fromCharCode.apply(null, (window.crypto || window.msCrypto).getRandomValues(new Uint8Array(18))));
+ csrfField.dispatchEvent(new Event('change', { bubbles: true }));
} (without the + generated for the diff)
I think this could be it, and would allow us to fix any similar problem in one line :) |
@smnandre Yes, it works with the line, thank you very much! |
This allow support / compatibility with LiveComponent when action are done between form first render and submit (ex: another form submit with Turbo and double header check) See symfony/ux#2505
Thank you @momocode-de I opened a PR on symfony/recipes.. but you can update your own file already and enjoy the fix :) |
This allow support / compatibility with LiveComponent when action are done between form first render and submit (ex: another form submit with Turbo and double header check) See symfony/ux#2505
@smnandre I have noticed another problem. This is when you submit the form twice without reloading the page. I have pushed two new commits into my reproducer. The first one contains your fix and the second one includes a “resetForm” call in my LiveAction. If I submit the form once now, it will work. If I then submit the form again without reloading the page first, a CSRF error appears again. Due to the “resetForm” I would actually assume that a new submit would work. Can you check this again? |
I had no problem while trying.. do you have a precise scenario to reproduce the problem ? To answer your question,
|
@smnandre Have you tested it with my reproducer? In my real app I have the case that I have a form for account settings. If I then change a setting and save it, it works. If I then change something again and want to save it, the CSRF error appears. So the error also occurs if the form is not reset. In another case, I have a form where you can change the password. When I fill in the fields and save them, I reset the form afterwards. If I then fill it out again and save it, the CSRF error also occurs. |
@smnandre It also happens if you submit the form and then the validation fails and you then correct the value and resubmit the form. Then I also get a CSRF error (request ends in 422 Unprocessable Content). |
@smnandre Have you been able to reproduce it yet? Do you want to reopen the issue, or should I create a new one? |
Hello @momocode-de! I've reproduced it just minutes ago! Thanks it'll help to understand the problem. |
Hi @smnandre. Is there any news about a fix here? |
I have updated my composer packages and since then my forms within LiveComponents no longer work. When I submit a form (via LiveAction), I get an error that the CSRF token is invalid. According to the documentation, you don't have to do anything special regarding CSRF tokens in live components. So why am I getting this error now?
The text was updated successfully, but these errors were encountered: