CSRF failure doesn't pass ActionData to enhanced form callback nor supplies form.error.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
I'm noticing odd behaviour when CSRF fails - when the form is submitted no error message is given.
I see the server is returning code 403 with {message: "Cross-site POST form submissions are forbidden"} which doesn't comply with ActionResult type in the enhance callback function and form.error isn't updated.
{#if form?.success}
<p class="success">Success</p>
{:else if form?.error}
<p class="error">{form.error}</p>
{/if}
use:enhance={async ({ formData }) => {
return async ({ result, update }) => {
await update();
};
}}
Is this intended?
How can one catch the 403 error in the callback and/or display a custom message upon CSRF failure?
Right now I can do the following, but cannot force an error message into form.error:
if (result?.type !== 'success' && result?.message) {
console.log(result.message);
}
Expected format of the CSRF failure would probably be:
{ type: 'error'; status: 403; error: "Cross-site POST form submissions are forbidden"}
Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-f1rj2m?file=src%2Froutes%2F%2Bpage.svelte
Logs
No response
System Info
System:
OS: Linux 5.15 AlmaLinux 8.8 (Sapphire Caracal)
CPU: (2) x64 Intel(R) Xeon(R) CPU E3-1240 v5 @ 3.50GHz
Memory: 852.82 MB / 2.00 GB
Container: Yes
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 16.14.0 - /usr/bin/node
npm: 8.3.1 - /usr/bin/npm
npmPackages:
@sveltejs/adapter-node: ^1.3.1 => 1.3.1
@sveltejs/kit: ^1.22.3 => 1.22.3
svelte: ^4.1.1 => 4.1.1
vite: ^4.4.7 => 4.4.7
Severity
serious, but I can work around it
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction in src/routes/+page.svelte and inspect the use:enhance callback's handling of the 403 CSRF response. Compare that result with the ActionResult and form.error behavior described in the issue. Done means a CSRF failure is represented consistently for the callback and can display an error through the form state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, security
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100