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

[edproton]

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.