SvelteKit — form action blocked by CSRF check

SvelteKit rejects a form submission with 403 Forbidden because the origin header does not match the app origin, triggering the built-in CSRF protection.

intermediatedebuggingsveltekitcsrf

Symptoms

403 Forbidden: cross-site form submissions are not allowed
The form works locally but fails when submitted from a different origin
Error: Invalid origin header

Possible causes

The app is accessed from a different domain or port than configured
A proxy or CDN rewrites the origin header
The csrf check method is too strict for the deployment setup

Diagnosis steps

Check the request origin header

curl -v -X POST https://app/login -H "Origin: https://evil.com"

Interpretation

SvelteKit rejects mismatched origins by default.

Review svelte.config.js csrf settings

cat svelte.config.js

Interpretation

The csrf.check option controls which origins are allowed.

Root cause

SvelteKit validates the Origin header on form submissions to prevent CSRF; when the header does not match the deployed origin, the request is rejected with 403.

Fix

Configure csrf.check to allow trusted origins, ensure proxies forward the correct Origin header, or use the same origin for form actions.

Verify the fix

Submit the form from the production origin and confirm it succeeds; verify a cross-origin submission is still blocked.

Symptom walkthrough

SvelteKit rejects a form submission with 403 Forbidden because the origin header does not match the app origin, triggering the built-in CSRF protection. The error appears in production but may not surface in local development because the conditions that trigger it depend on the deployment environment or runtime configuration. Understanding the full symptom set helps distinguish this issue from similar errors.

Diagnosis in practice

Follow the diagnosis steps in the frontmatter to isolate the cause. Each step includes a command and an interpretation of the output. The goal is to narrow down whether the issue is in the configuration, the runtime, or the application code. Reproduce the error in a minimal setup before applying a fix.

Root cause

SvelteKit validates the Origin header on form submissions to prevent CSRF; when the header does not match the deployed origin, the request is rejected with 403.

Fix

Configure csrf.check to allow trusted origins, ensure proxies forward the correct Origin header, or use the same origin for form actions. After applying the fix, monitor the system to confirm the error does not recur under load or in different environments.

Verification

Submit the form from the production origin and confirm it succeeds; verify a cross-origin submission is still blocked. If the verification passes, the fix is confirmed; if not, re-examine the diagnosis steps for missed contributing factors.

Diagnostic commands

Run these commands to reproduce and diagnose the issue:

curl -v -X POST https://app/login -H "Origin: https://evil.com"
cat svelte.config.js