« Cross-site POST form submissions are forbidden » : SvelteKit a la mauvaise origine.

La réponse est une erreur 403 en texte brut dont le corps est Cross-site POST form submissions are forbidden (le nom de la méthode change pour PUT, PATCH ou DELETE; une requête qui accepte du JSON reçoit {"message": …}). Elle vient de la protection CSRF de SvelteKit, qui ne s’exécute que dans les versions de production. Voilà pourquoi elle n’apparaît jamais sous vite dev.

Avec @sveltejs/adapter-node, l’origine à laquelle SvelteKit compare la requête se construit ainsi :

// What the check compares (production builds only, not vite dev)
self origin = paths.origin (SvelteKit 3)  or  ORIGIN (adapter-node 5)
            or else  <PROTOCOL_HEADER value, or "https"> :// <HOST_HEADER value, or Host>

browser sends  Origin: https://shop.example.com

no match on a POST, PUT, PATCH or DELETE form  ->  403
  Cross-site POST form submissions are forbidden

Quand aucune origine n’est configurée, adapter-node peut lire le protocole et l’hôte dans les en-têtes du mandataire : PROTOCOL_HEADER=x-forwarded-proto et HOST_HEADER=x-forwarded-host (et PORT_HEADER=x-forwarded-port si le port public n’est pas celui par défaut). La documentation de SvelteKit est claire : ne les réglez que derrière un mandataire inverse de confiance, sinon un client peut les envoyer lui-même.

Ce sont des variables lues à l’exécution, au démarrage du serveur. paths.origin, dans SvelteKit 3, est de la configuration figée à la compilation, et ne contient qu’une origine pour tous les hôtes auxquels l’appli répond.

• Comment l’appli tourne. Canner détecte SvelteKit et lance node ./build/index.js, le serveur d’adapter-node. Sans adapter-node, la compilation s’arrête avec SvelteKit build did not produce build/index.js — install @sveltejs/adapter-node and set it as the adapter in your SvelteKit config (svelte.config.js, or vite.config.js on SvelteKit 3). @sveltejs/adapter-vercel, -netlify et -cloudflare sont refusés dès la détection, avec un message qui nomme adapter-node.
• Ce qu’envoie le mandataire. Les requêtes passent par Caddy, qui termine le HTTPS, transmet l’en-tête Host tel quel et définit X-Forwarded-Proto, X-Forwarded-For et X-Forwarded-Host. Par défaut, Caddy écarte les valeurs X-Forwarded-* envoyées par un client et écrit les siennes.
• Les valeurs par défaut fonctionnent donc. Sans ORIGIN ni paths.origin, adapter-node construit https:// suivi de l’hôte saisi par le visiteur. Ça correspond sur <slug>.canner.app, sur chaque domaine personnalisé et sur les adresses d’aperçu, tout à la fois. Le mandataire de mise en cache facultatif conserve aussi Host.
• Ne réglez pas ORIGIN à partir de `CANNER_URL`. CANNER_URL est l’adresse canner.app du déploiement (ou celle de l’aperçu) : les visiteurs de votre domaine personnalisé recevraient l’erreur 403. Même chose pour paths.origin.
• Vous voulez être explicite? PROTOCOL_HEADER=x-forwarded-proto et HOST_HEADER=x-forwarded-host lisent les valeurs qu’écrit Caddy : le résultat est le même. Ajoutez-les dans les variables d’environnement et redéployez. Vous n’en avez pas besoin.
• Version de Node. SvelteKit 3 exige Node 22.17 ou plus récent. Canner ne compare que les versions majeures : choisissez Node 24 dans les paramètres du projet pour être tranquille. Voir fixer la version de Node.js.

L’ancien contournement, csrf: { checkOrigin: false }, a disparu de SvelteKit 3 : la compilation échoue en indiquant que checkOrigin a été retiré au profit de csrf.trustedOrigins. Son remplaçant, trustedOrigins: ['*'], coupe la protection pour tous les sites, ce que la documentation de SvelteKit déconseille. Vos actions de formulaire acceptent alors un envoi venant de n’importe quelle page qu’un utilisateur connecté visite.

Quand un site externe doit vraiment vous envoyer un formulaire, inscrivez cette seule origine :

// vite.config.js (SvelteKit 3)
import adapter from '@sveltejs/adapter-node';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit({
      adapter: adapter(),
      // Only origins that legitimately post forms to you, such as a payment page
      csrf: { trustedOrigins: ['https://checkout.example-payments.com'] }
    })
  ]
});