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

[eduardscript]

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: ***@***.***>