sveltejs / sveltejs/kit

CSRF failure doesn't pass ActionData to enhanced form callback nor supplies form.error.

Open
#10,464 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

error handling forms
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.