fix(auth): Sync CSRF token on form submit for multi-tab scenarios#107389
fix(auth): Sync CSRF token on form submit for multi-tab scenarios#107389
Conversation
github-actions
bot
added
Scope: Frontend
|
@sentry review |
|
bugbot review |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Add form submit event listener (capture phase) to sync CSRF token from cookie to form field right before submission. Use requestSubmit() in WebAuthnAssert to trigger this listener (form.submit() doesn't fire events).
JoshFerge
force-pushed
the
jferg/csrf-token-submit-intercept
branch
from
7603c19 to
311eee4
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
JoshFerge
force-pushed
the
jferg/csrf-token-submit-intercept
branch
from
4eb81cb to
311eee4
Compare
| // CSRF sync listener in auth.html to update the token for multi-tab scenarios. | ||
| // Falls back to submit() for Safari 15 (requestSubmit added in Safari 16). | ||
| if (form.requestSubmit) { | ||
| form.requestSubmit(); |
There was a problem hiding this comment.
i've checked and i don't believe this change should cause any problems w/ respect to validation or event listeners.
There was a problem hiding this comment.
(also validated that this works locally)
There was a problem hiding this comment.
matches the example: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit#examples 👍
| }, 200); | ||
| } | ||
|
|
||
| // Periodic sync for visual consistency (user sees correct token in DevTools) |
There was a problem hiding this comment.
i should remove this comment, not helpful.
| } | ||
|
|
||
| // Periodic sync for visual consistency (user sees correct token in DevTools) | ||
| setInterval(syncCsrfTokens, 200); |
There was a problem hiding this comment.
can probably remove the setInterval after deployment of this PR and confirming dropoff of remaining errors
| // Sync on form submit to guarantee fresh token even if submit happens | ||
| // within the 200ms polling window. Capture phase ensures this runs | ||
| // before the form's default submit action. |
There was a problem hiding this comment.
That's a fast race, 200ms things get out of whack? Is that because of many requests, and the order is the problem? or a few requests that are quick i wonder.
Either way, the change in this file can't be worse.
There was a problem hiding this comment.
monitoring here. they still happen a decent amount, even after my change, and some of the logs do look like it's folks with multiple tabs quickly (albiet not 200ms quick) logging in successively.
…07389) ## Summary When users have multiple tabs open on auth pages and one tab logs in (rotating the CSRF token), other tabs can fail with "CSRF token from POST incorrect" if they submit before the 200ms polling interval syncs the new token. This PR adds a form submit event listener that syncs the CSRF token from cookie to form field right before submission, eliminating the race condition. **Changes:** - `auth.html`: Add submit event listener (capture phase) to sync CSRF tokens before form POST - `webAuthnAssert.tsx`: Use `requestSubmit()` instead of `submit()` so the global submit listener fires (includes Safari 15 fallback)
2 participants
Summary
When users have multiple tabs open on auth pages and one tab logs in (rotating the CSRF token), other tabs can fail with "CSRF token from POST incorrect" if they submit before the 200ms polling interval syncs the new token.
This PR adds a form submit event listener that syncs the CSRF token from cookie to form field right before submission, eliminating the race condition.
Changes:
auth.html: Add submit event listener (capture phase) to sync CSRF tokens before form POSTwebAuthnAssert.tsx: UserequestSubmit()instead ofsubmit()so the global submit listener fires (includes Safari 15 fallback)