[LiveComponent] Form submit fails because of invalid CSRF token

[momocode-de]

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?

[Kocal]

Hi, what packages did you upgrade?

[momocode-de]

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.

[Kocal]

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!

[momocode-de]

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?

Yes, I have that file.

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.

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?

[nicolas-grekas]

A previous form (one not managed by a livecomponent?) was submitted successfully with a double-submit cookie (which was added by the js snippet).
And later on, another form managed by the livecomponent is submitted, but this time the double-submit cookie wasn't submitted with the form payload. The JS snippet didn't do its job. Maybe because of some bad interference with the JS for livecomponents?
We'd need a reproducer to understand precisely.

[momocode-de]

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:

composer create-project symfony/skeleton symfony-ux-issue-2505

# Commit "First commit after creating project"

composer require webapp
composer require symfony/apache-pack
composer require symfony/ux-live-component
composer require symfony/form
composer require symfony/security-bundle
bin/console make:controller HomeController
bin/console make:form TestType
bin/console make:user
bin/console make:migration
bin/console doctrine:migrations:migrate
bin/console make:registration-form
bin/console make:security:form-login

# Commit "Add required packages, HomeController, TestType, User, Registration Form, Login Form"

Now I have tested the registration and login once and I already had a problem with the CSRF token:

• Go to /register and finish the registration
• Go to /login, type in your data and submit
• A CSRF error message appears
• I was then able to fix this error with the “Fix CSRF error on login” commit (I think the template for the “make:security:form-login” command has to be adapted here?)
• After that, the registration and subsequent login worked

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:

• Go to /home (when you are logged in) and submit the form
• It was working

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:

• Go to /home (when you are logged in) and submit the form
• It was not working ("422 Unprocessable content" because of invalid CSRF token)

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.

[nicolas-grekas]

Can you try this change to the csrf field?
https://github.com/symfony/maker-bundle/pull/1592/files

Then you can lobby for this PR to be merged if that's the source of the issue ;)

[momocode-de]

Can you try this change to the csrf field? https://github.com/symfony/maker-bundle/pull/1592/files

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.

[smnandre]

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)

        csrfField.dispatchEvent(new Event('change', { bubbles: true }));

I think this could be it, and would allow us to fix any similar problem in one line :)

cc @nicolas-grekas

[momocode-de]

@smnandre Yes, it works with the line, thank you very much!