fix: disable CSRF checks in dev (#14335)

See #14309 (comment)

closes #14309

Author: Rich-Harris

.changeset/modern-icons-film.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: disable CSRF checks in dev

packages/kit/src/exports/public.d.ts

@@ -437,7 +437,9 @@ export interface KitConfig {
 		 *
 		 * If the array contains `'*'`, all origins will be trusted. This is generally not recommended!
 		 *
-		 * **Warning**: Only add origins you completely trust, as this bypasses CSRF protection for those origins.
+		 * > [!NOTE] Only add origins you completely trust, as this bypasses CSRF protection for those origins.
+		 *
+		 * CSRF checks only apply in production, not in local development.
 		 * @default []
 		 * @example ['https://checkout.stripe.com', 'https://accounts.google.com']
 		 */

packages/kit/src/runtime/server/respond.js

@@ -73,32 +73,34 @@ export async function internal_respond(request, options, manifest, state) {
 	const is_data_request = has_data_suffix(url.pathname);
 	const remote_id = get_remote_id(url);
 
-	const request_origin = request.headers.get('origin');
+	if (!DEV) {
+		const request_origin = request.headers.get('origin');
 
-	if (remote_id) {
-		if (request.method !== 'GET' && request_origin !== url.origin) {
-			const message = 'Cross-site remote requests are forbidden';
-			return json({ message }, { status: 403 });
-		}
-	} else if (options.csrf_check_origin) {
-		const forbidden =
-			is_form_content_type(request) &&
-			(request.method === 'POST' ||
-				request.method === 'PUT' ||
-				request.method === 'PATCH' ||
-				request.method === 'DELETE') &&
-			request_origin !== url.origin &&
-			(!request_origin || !options.csrf_trusted_origins.includes(request_origin));
-
-		if (forbidden) {
-			const message = `Cross-site ${request.method} form submissions are forbidden`;
-			const opts = { status: 403 };
-
-			if (request.headers.get('accept') === 'application/json') {
-				return json({ message }, opts);
+		if (remote_id) {
+			if (request.method !== 'GET' && request_origin !== url.origin) {
+				const message = 'Cross-site remote requests are forbidden';
+				return json({ message }, { status: 403 });
 			}
+		} else if (options.csrf_check_origin) {
+			const forbidden =
+				is_form_content_type(request) &&
+				(request.method === 'POST' ||
+					request.method === 'PUT' ||
+					request.method === 'PATCH' ||
+					request.method === 'DELETE') &&
+				request_origin !== url.origin &&
+				(!request_origin || !options.csrf_trusted_origins.includes(request_origin));
+
+			if (forbidden) {
+				const message = `Cross-site ${request.method} form submissions are forbidden`;
+				const opts = { status: 403 };
+
+				if (request.headers.get('accept') === 'application/json') {
+					return json({ message }, opts);
+				}
 
-			return text(message, opts);
+				return text(message, opts);
+			}
 		}
 	}
 

packages/kit/test/apps/basics/test/server.test.js

@@ -61,6 +61,10 @@ test.describe('Cookies', () => {
 });
 
 test.describe('CSRF', () => {
+	if (process.env.DEV) {
+		return;
+	}
+
 	test('Blocks requests with incorrect origin', async ({ baseURL }) => {
 		const content_types = [
 			'application/x-www-form-urlencoded',

packages/kit/types/index.d.ts

@@ -413,7 +413,9 @@ declare module '@sveltejs/kit' {
 			 *
 			 * If the array contains `'*'`, all origins will be trusted. This is generally not recommended!
 			 *
-			 * **Warning**: Only add origins you completely trust, as this bypasses CSRF protection for those origins.
+			 * > [!NOTE] Only add origins you completely trust, as this bypasses CSRF protection for those origins.
+			 *
+			 * CSRF checks only apply in production, not in local development.
 			 * @default []
 			 * @example ['https://checkout.stripe.com', 'https://accounts.google.com']
 			 */