Cross-site POST form submissions are forbidden?

[WilliamMayor]

Hey. I've got a pretty fresh SvelteKit installation. I'm trying to set up a login form action. When I submit the form I get the error:

Cross-site POST form submissions are forbidden

Reading up on it it seems like it could be that the ORIGIN env var isn't set (but I have set it, and it matches the origin that my requests are coming from).

If I turn of origin checking in the config then it works, but this doesn't seem like a good idea. I'd like to get it working securely if possible.

Here's my +page.svelete (I've simplified it by removing the components that I'm using for labels and errors etc.):

<script>    
    export let form;
</script>

<h1>Log In</h1>

<form method="POST">
    <input type="email" name="email" />
    <input type="password" name="password" />
    <button>Log In</button>
</form>

And here's my +page.server.js file:

import { invalid, redirect } from '@sveltejs/kit';
import { PUBLIC_API_BASE as API_BASE } from '$env/static/public';

export const actions = {
    default: async ({ cookies, request, fetch }) => {
        const requestData = await request.formData();
        const email = requestData.get('email');
        const password = requestData.get('password');

        const resp = await fetch(
            API_BASE + "/accounts/login?include_auth_token=1",
            {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email: email, password: password }),
            }
        )
        let data = await resp.json();
        if (data.response.errors) {
            return invalid(400, { email: email, errors: data.response.errors });
        }

        cookies.set('authToken', data.response.user.authentication_token);
        throw redirect(302, "/");
    }
};

I'm hoping these are pretty standard? Nothing odd about them? (I'm new to SvelteKit).

In my attempts to debug I added some console debugging to the respond function in SvelteKit's src/runtime/server/index.js file. For a single form submission (my browser shows only one network request) respond is called twice. The first time request.headers.get('origin') is set to the origin I expect. The second time it is null. Does that help?

Thanks all!

EDIT: Silly mistakes, not importing things, etc.

[lt692]

I absolutely have the same problem! On Postman all GET requests work fine. Trying POST requests and I also got Cross-site POST form submissions are forbidden no idea what's wrong. Tried setting server/host/origin on vite.config.js but no juice.

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
	plugins: [sveltekit()],
	server: {
		origin: 'http://localhost:5173',
		host: 'localhost',
		port: 5173
	},
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
};

export default config;

Someone please help us ! :)

[Devr-pro]

Yeah, this issue is also biting me up while am on remote platform gitpod.io , this is actually due to cross-site origin policy , I have also not got any permanent soluton for now, but I guess you can keep origin check false for now while you are in dev environment and turn on while building the app , This seem untidy but I have been doing this :( !

[eltigerchino]

maybe something like checkOrigin: !dev ?

https://kit.svelte.dev/docs/modules#$app-environment-dev

[bluepuma77]

I just had the same issue, running SvelteKit behind Traefik reverse proxy, that does the TLS/SSL termination.

Not recommended (but easy) solution from StackOverflow:

import adapter from '@sveltejs/adapter-node'

const config = {
  kit: {
    adapter: adapter(),
    csrf: {
      checkOrigin: false,
    }
  },
}

export default config

For reference, another issue about this topic: #6589

[navaneeth-dev]

Can you elaborate on this issue? So traefik is the problem?

I have setup sveltekit to run on eg. localhost
and pocketbase to run on localhost/api but admin is on seperate domain.

So this is not cross origin but why still this error?

[eltigerchino]

Are they running in the same port? Different ports could count as a different origin.

[navaneeth-dev]

Same port I am proxying /api to the backend port. I fixed it by using node adapter and node build command.
I guess it was not working with pnpm preview command

[eltigerchino]

pnpm preview runs on port 4173 by default through Vite, while running the node server directly would default to port 3000.

[maiertech]

For reference: #8314. This happens workspaces like Gitpod or StackBlitz where you access your preview on a non-localhost URL.

[wvhulle]

It can happen when your urls point to the wrong port. It's the external port you need.

[bitdom8]

After new update, get constantly Cross-site POST form submissions are forbidden. SOmeone helps us

[codegod100]

as far as I can tell the solution is to disable csrf which seems like a non-solution. any ideas from dev team on an actual solution? I run a lot of sveltekit apps on a caddy reverse_proxy setup and this is kinda silly there's not a better solution....

[eltigerchino]

Hi there, does this issue occur only for the production build or in dev too? Is it possible for you to provide a minimal reproduction? Does configuring any of these adapter-node settings help? https://kit.svelte.dev/docs/adapter-node#environment-variables-origin-protocol-header-and-host-header

I have no experience with reverse proxies but would love to understand and help more.

[bitdom8]

@Rich-Harris hi could you help us? Thanks for the best framework

[archoda]

You can get around this in Thunderclient testing by simply by ensuring your post url ( ex: (http://[::1]:5173) is the same in the post header:

Accept: */*
Origin: http://[::1]:5173
Access-Control-Allow-Origin: *

[CodeDoes]

It works for node deployments etcetra, to get arround this will using the dev server you need to modify the headers somewhat. here is a simple solution to that. Anyone have improvements I could make to this?

//vite.config.ts
export default defineConfig({
	plugins: [
		{
		name: "configure-response-headers",
		configureServer: (server) => {
		  server.middlewares.use((_req, res, next) => {
			const ori = _req.headers.origin
			const referer = _req.headers.referer
			if((ori == "https://example.com"|| !ori)){
				_req.headers.origin = "http://localhost:5173"
			}
			next();
			// _req.headers.origin = originalOrigin
		  });
		},
	  },
	  sveltekit(),
	]
});

[gipo355]

same problem happened to me.

turns out it was for some headers i've set in the hooks.server.ts

  // response.headers.set('Referrer-Policy', 'no-referrer'); // this one breaks form submission
  // response.headers.set('Referrer-Policy', 'origin-when-cross-origin');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin'); // default, works

[kyxec]

Hope this helps

#6589 (comment)

[MoinJulian]

HI got this svelte.config.js:

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
export default {
	preprocess: vitePreprocess(),
	onwarn: (warning, handler) => {
		if (warning.code === 'css-unused-selector') {
			return;
		}
		handler(warning);
	},
	kit: {
		adapter: adapter(),
		csrf: {
			checkOrigin: false
		}
	}
};

That works absolutely fine

[programonaut]

I think you should not set checkOrigin to false. Especially not for your production app, as it is a protection against CSRF attacks. Did you try setting the ORIGIN environment variable before starting your server like this: ORIGIN=http://localhost:3000 node build/index.js

You can also check my blog post on the topic here

[MoinJulian]

I know, and I tried to set it to the ORIGIN but it still didn't work.

I put the ORIGIN into my .env do I need to do something else with it?

And how do I set the ORIGIN if the domain is https://realgolf.games and I have a costume node server at server/app.js?

So I let render run pnpm run server, which runs the costume node server in my app.js

You can find the code here: https://github.com/realgolf/web

[eltigerchino]

https://kit.svelte.dev/docs/adapter-node#environment-variables-origin-protocolheader-hostheader-and-port-header

[CodeDoes]

I overwrote the checkorigin code by basically copying it from the svelte kit source code and adding my own parts to it...

…

On Mon, 22 Apr 2024 at 22:26, Maximilian Kürschner ***@***.***> wrote: I think you should not set checkOrigin to false. Especially not for your production app, as it is a protection against CSRF attacks. Did you try setting the ORIGIN environment variable before starting your server like this: ORIGIN=http://localhost:3000 node build/index.js You can also check my blog post on the topic here <https://www.programonaut.com/cross-site-post-form-submissions-are-forbidden-in-sveltekit/> — Reply to this email directly, view it on GitHub <#7600 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE7H37OSN26BZ4ATAL4W4SDY6VXARAVCNFSM6AAAAAAR466XCGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TCOJTGQZTE> . You are receiving this because you commented.Message ID: ***@***.***>

[CodeDoes]

ORIGIN env variable only works while building

…

On Thu, 25 Apr 2024 at 09:52, Julian Hammer ***@***.***> wrote: I know, and I tried to set it to the ORIGIN but it still didn't work. I put the ORIGIN into my .env do I need to do something else with it? And how do I set the ORIGIN if the domain is https://realgolf.games and I have a costume node server at server/app.js? — Reply to this email directly, view it on GitHub <#7600 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE7H37OQU5VOBFJHL5LLYZDY7CY3TAVCNFSM6AAAAAAR466XCGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TEMRRHE2DO> . You are receiving this because you commented.Message ID: ***@***.***>

[lonffreytu]

I don't think it's a good design to pre-set the ORIGIN in the environment variables. The value of ORIGIN is determined by the deployment environment and can be obtained for each request, as the request contains the current protocol, domain name, and port number. When a browser sends a request to the server, it also carries the ORIGIN in the header. Comparing these two values can determine whether they are same-origin. Having worked in Java development for many years, I find it odd that the ORIGIN needs to be set in environment variables in advance in a SvelteKit project...

[eltigerchino]

I find it odd that the ORIGIN needs to be set in environment variables in advance in a SvelteKit project...

I think it only needs to be set before building if you want to prerender pages and obtain the correct origin value. Otherwise, you set it when starting the server.

[HVossi92]

I have had the same issue, I've solved it with the following steps, keeping csfr protection enabled:

Setting the correct origin address was definitely required (ORIGIN has to be the same address I use in my browser to access the server via nginx):
"start": "NODE_ENV=production export PORT=8192 && ORIGIN=https://400.500.60.700 node ./build",

Enable csfr protection (nice to have for security):
checkOrigin: true,

Add the following nginx header to my nginx.conf (I don't know which of the headers, if any, are actually required):
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header Connection upgrade; # Remove the single quotes
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Origin $http_origin;

[pixyj]

Thanks for the hint. I'm using nginx as a reverse proxy. The following directive worked for me:

proxy_set_header Host $http_host;

[24jr]

I'm having same issue when trying to implement sign in with apple which redirects me to their login form and sends a form post back to my redirect URL but the page just shows "Cross-site POST form submissions are forbidden" I mean idk that I'll even use the apple id sign in or not but this did come up as hurdle for me in trying

[Opisek]

Still struggling with the same issue. I use adapter-node, I build and run the server through docker, I pass the correct ORIGIN variable, and yet I keep getting this stupid error.

I added this to my handler:

console.log(`ORIGIN: ${process.env.ORIGIN}`)
console.log(`URL: ${request.url}`)
console.log(request.headers)

If I access my endpoint /api/login using GET method I see:

ORIGIN: http://localhost:3000
URL: http://localhost:3000/api/login
Headers {
   'user-agent': 'PostmanRuntime/7.42.0',
   accept: '*/*',
   'cache-control': 'no-cache',
   host: 'localhost:3000',
   'accept-encoding': 'gzip, deflate, br',
   connection: 'keep-alive',
   'content-type': 'multipart/form-data; boundary=--------------------------970720436790041080404593',
   'content-length': '280'
}

(I redacted a few sensitive headers)

But as soon as I switch the method to POST we are back to:

Cross-site POST form submissions are forbidden

The behaviour is the same when I manually set my host header to include the protocol http://.

What gives?

EDIT:
Looks like manually setting an origin header does the trick. I guess setting up an nginx proxy is a must then.

[Cyberphinx]

I have added ORIGIN env var in docker environment, added all of those to nginx reverse proxy:
proxy_set_header Host $host;
proxy_set_header Origin https://$host;
proxy_set_header Referer $http_referer;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

But still getting "Cross-site POST form submissions are forbidden" when simply submitting a simple form via use:enhance to an action. I am using adapter bun btw.

[Opisek]

Since this remains unanswered, I had to disable this feature and write a custom solution:

// CSRF protection
if (request.method !== "GET" && request.method !== "HEAD") {
  const origin = request.headers.get("Origin");
  const publicUrl = process.env.PUBLIC_URL
  if (publicUrl === null || publicUrl === undefined || publicUrl === "" || origin !== publicUrl) {
    return json({ error: "Origin not allowed. Was PUBLIC_URL set correctly in the frontend?" }, { status: 403 });
  }
}

[orchard0]

I've had the same issue and after some investigation and the comments above thank God the following works:

1. Keep the csrf unchanged you don't need to set it to false. It's unwise.
2. Set the ORIGIN in the environmental variable when running the built version of your site i.e. ORIGIN=https://example.com node build/index.js (Note the s in https especially if you are running behind a reverse proxy like Caddy or nginx where https is applied. If there is no SSL then it will be http.) In short the ORIGIN has to match exactly the location of your hosted site: https://example.com is not equal to https://www.example.com. https:// or http:// has to be included.
3. If you are running the site behind a reverse proxy then you must forward the Host header upstream.

Caddy example:

example.com {
	reverse_proxy mysite:3000 {
		header_up Host
	}
}

Note the header_up Host. This directive passes the Host header upstream to Svelte.

For nginx you need to add proxy_set_header Host $http_host; to your configuration. I've not tested nginx but it should work based on comments above.

Report back with what you find.

[jensdanb]

This worked for me on a docker+nginx setup.
Also props to @pixyj who first mentioned proxy_set_header Host $http_host; here, but I was still missing your step 2.

My local nginx conf:

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        proxy_pass http://client:3000/;
        proxy_set_header Host $http_host;
    }
}

NOTE: client is the name of the service in my docker-compose file for the Svelte webapp.
NOTE2: This is for a local build. Not yet tested on public server build with DNS url + https.

Svelte Dockerfile:

ARG NODE_VERSION=24
FROM node:${NODE_VERSION}-alpine

WORKDIR /app

COPY package.json .
RUN npm i

COPY . .
RUN npm run build

ENV ORIGIN=http://localhost
EXPOSE 3000

CMD node build

[Cikmo]

I've tried all of the previous suggestions and none of them work. I'm using vite dev in development, having it reverse proxied through caddy. Host is present and correct, origin is correct. Tried setting it as an env variable to be sure, but nothing. Nothing works except just disabling checkOrigin completely.

[Opisek]

Hey, if you opt for disabling it completely, I would recommend using the custom solution I posted above that reimplements that feature. You don't want your website to be vulnerable.

[armrib]

I've run into the same problem but was able to solve it. Both in dev and production.
I use @eslym/sveltekit-adapter-bun

This is my configuration:
svelte.config.js

import adapter from "@eslym/sveltekit-adapter-bun";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess({ script: true }),

	kit: {
		adapter: adapter({
			bundler: "bun",
			precompress: true,
			bunBuildMinify: true,
		}),
	},
};
export default config;

env.ts

export const origin: string = process.env.ORIGIN || "http://localhost:5173";

.env

HTTP_XFF_DEPTH=2
HTTP_IP_HEADER="X-Forwarded-For"
HTTP_PROTOCOL_HEADER="X-Forwarded-Proto"
HTTP_HOST_HEADER="X-Forwarded-Host"

ORIGIN="your domain (in prod only)"

in my nginx config

## Headers
proxy_set_header Host $host;
proxy_set_header Content-Type $content_type;
proxy_set_header X-Original-URL $scheme://$http_host$request_uri;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-URI $request_uri;
proxy_set_header X-Forwarded-Ssl on;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Real-IP $remote_addr;

[eltigerchino]

Hi folks. I'm wondering if the new csrf.trustedOrigins option helps solve this issue. Docs here https://svelte.dev/docs/kit/configuration#csrf .Would love your feedback.
csrf.checkOrigin will be deprecated in #14281 . I think the new option provides a lot more flexibility here.

[l0uisgrange]

Hi @eltigerchino, the flexibility is a lot better.
I just tried, and it seems it doesn't resolve the problem. My app was working fine before 0.36.0, and now I have the CORS error and everything I've tried (including answers above) doesn't fix the issue. I think a bug was introduced in #14021, because if I downgrade to 0.35.0, my app starts working again.

What's strange is that the use:enhance works perfectly fine, the bug is only for the command and form remotes ...

[l0uisgrange]

I've found the bug, I don't think it's related to this discussion. I apologize. I'm opening a PR asap.