Add functionality to override http methods (issue sveltejs#1046)

See: sveltejs#1046

Author: am283721

.changeset/chilly-moose-provide.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/kit': patch
+'create-svelte': patch
+---
+
+[feat] add functionality to override http methods (issue #1046)

documentation/docs/01-routing.md

@@ -161,6 +161,45 @@ The `body` property of the request object will be provided in the case of POST r
 - Form data (with content-type `application/x-www-form-urlencoded` or `multipart/form-data`) will be parsed to a read-only version of the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object.
 - All other data will be provided as a `Uint8Array`
 
+#### HTTP Method Overrides
+
+Given that the only valid `<form>` methods are GET and POST, functionality is provided to override this limitation and allow the use of other HTTP verbs. This is particularly helpful when ensuring your application works even when javascript fails or is disabled.
+
+- Disabled by default to prevent unintended behavior for those who don't need it
+- For security purposes, the original method on the form must be `POST` and cannot be overridden with `GET`
+- There are 2 different ways to specify a method override strategy
+  - `url_parameter`: Pass the key and desired method as a query string
+  - `form_data`: Pass as a field within the form where the field name is the key and the field value is the desired method
+- `strategy: 'both'` will enable both methods (`url_parameter` takes precendence in the event that both strategies are used within the same form)
+
+```js
+// svelte.config.js
+export default {
+	kit: {
+		methodOverride: {
+			enabled: true,
+			key: '_method',
+			allowedMethods: ['PUT', 'PATCH', 'DELETE'],
+			strategy: 'both'
+		},
+	}
+};
+```
+
+```html
+<form method="post" action="/todos/{id}?_method=put">
+  <!-- form elements -->
+</form>
+```
+
+OR
+
+```html
+<form method="post" action="/todos/{id}">
+	<input type="hidden" name="_method" value="PUT">
+</form>
+```
+
 ### Private modules
 
 A filename that has a segment with a leading underscore, such as `src/routes/foo/_Private.svelte` or `src/routes/bar/_utils/cool-util.js`, is hidden from the router, but can be imported by files that are not.

documentation/docs/14-configuration.md

@@ -29,6 +29,12 @@ const config = {
 		host: null,
 		hostHeader: null,
 		hydrate: true,
+		methodOverride: {
+			enabled: false,
+			key: '_method',
+			allowedMethods: ['PUT', 'PATCH', 'DELETE'],
+			strategy: 'both'
+		},
 		package: {
 			dir: 'package',
 			emitTypes: true,
@@ -124,6 +130,19 @@ export default {
 
 Whether to [hydrate](#ssr-and-javascript-hydrate) the server-rendered HTML with a client-side app. (It's rare that you would set this to `false` on an app-wide basis.)
 
+### methodOverride
+
+See [HTTP Method Overrides](#routing-endpoints-http-method-overrides). An object containing zero or more of the following:
+
+- `enabled` — set to `true` to enable method overriding
+- `key` — query parameter name/field name to use for passing the intended method value
+- `allowedMethods` - array of HTTP methods that can be used when overriding the original request method
+- `strategy`
+
+  - `'both'` — (default) will look for the override key in both the list of query parameters and the form fields
+  - `'url_parameter'` — only allow overriding via a query parameter
+  - `form_data` — only allow overriding via a form field
+
 ### package
 
 Options related to [creating a package](#packaging).

packages/create-svelte/templates/default/src/hooks.ts

@@ -6,11 +6,6 @@ export const handle: Handle = async ({ request, resolve }) => {
 	const cookies = cookie.parse(request.headers.cookie || '');
 	request.locals.userid = cookies.userid || uuid();
 
-	// TODO https://github.com/sveltejs/kit/issues/1046
-	if (request.query.has('_method')) {
-		request.method = request.query.get('_method').toUpperCase();
-	}
-
 	const response = await resolve(request);
 
 	if (!cookies.userid) {

packages/create-svelte/templates/default/svelte.config.js

@@ -11,7 +11,12 @@ const config = {
 		adapter: adapter(),
 
 		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		target: '#svelte',
+
+		// Override http methods in the Todo forms
+		methodOverride: {
+			enabled: true
+		}
 	}
 };
 

packages/kit/src/core/build/index.js

@@ -334,6 +334,12 @@ async function build_server(
 					initiator: undefined,
 					load_component,
 					manifest,
+					methodOverride: {
+						enabled: ${config.kit.methodOverride.enabled},
+						key: ${s(config.kit.methodOverride.key)},
+						allowedMethods: [${config.kit.methodOverride.allowedMethods.map(method => s(method))}],
+						strategy: ${s(config.kit.methodOverride.strategy)}
+					},
 					paths: settings.paths,
 					prerender: ${config.kit.prerender.enabled},
 					read: settings.read,

packages/kit/src/core/config/index.spec.js

@@ -32,6 +32,12 @@ test('fills in defaults', () => {
 			host: null,
 			hostHeader: null,
 			hydrate: true,
+			methodOverride: {
+				enabled: false,
+				key: '_method',
+				allowedMethods: ['PUT', 'PATCH', 'DELETE'],
+				strategy: 'both'
+			},
 			package: {
 				dir: 'package',
 				emitTypes: true
@@ -132,6 +138,12 @@ test('fills in partial blanks', () => {
 			host: null,
 			hostHeader: null,
 			hydrate: true,
+			methodOverride: {
+				enabled: false,
+				key: '_method',
+				allowedMethods: ['PUT', 'PATCH', 'DELETE'],
+				strategy: 'both'
+			},
 			package: {
 				dir: 'package',
 				emitTypes: true

packages/kit/src/core/config/options.js

@@ -73,6 +73,22 @@ const options = object(
 
 			hydrate: boolean(true),
 
+			methodOverride: object({
+				enabled: boolean(false),
+				key: string('_method'),
+				allowedMethods: validate(['PUT', 'PATCH', 'DELETE'], (input, keypath) => {
+					if (!Array.isArray(input) || !input.every((method) => typeof method === 'string')) {
+						throw new Error(`${keypath} must be an array of strings`);
+					}
+
+					return input;
+				}),
+				strategy: validate('both', (input, keypath) => {
+					if (['both', 'url_parameter', 'form_data'].includes(input)) return input;
+					throw new Error(`${keypath} must be either "both", "url_parameter" or "form_data"`);
+				})
+			}),
+
 			package: object({
 				dir: string('package'),
 				// excludes all .d.ts and filename starting with _

packages/kit/src/core/config/test/index.js

@@ -37,6 +37,12 @@ async function testLoadDefaultConfig(path) {
 			host: null,
 			hostHeader: null,
 			hydrate: true,
+			methodOverride: {
+				enabled: false,
+				key: '_method',
+				allowedMethods: ['PUT', 'PATCH', 'DELETE'],
+				strategy: 'both'
+			},
 			package: {
 				dir: 'package',
 				emitTypes: true

packages/kit/src/core/dev/index.js

@@ -406,6 +406,7 @@ async function create_plugin(config, dir, cwd, get_manifest) {
 						},
 						hooks,
 						hydrate: config.kit.hydrate,
+						methodOverride: config.kit.methodOverride,
 						paths: {
 							base: config.kit.paths.base,
 							assets: config.kit.paths.assets ? SVELTE_KIT_ASSETS : config.kit.paths.base

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

@@ -7,6 +7,7 @@ import { lowercase_keys } from './utils.js';
 import { hash } from '../hash.js';
 import { get_single_valued_header } from '../../utils/http.js';
 import { coalesce_to_error } from '../../utils/error.js';
+import { ReadOnlyFormData } from './parse_body/read_only_form_data.js';
 
 /** @type {import('@sveltejs/kit/ssr').Respond} */
 export async function respond(incoming, options, state = {}) {
@@ -40,6 +41,31 @@ export async function respond(incoming, options, state = {}) {
 		locals: {}
 	};
 
+	if (options.methodOverride.enabled && request.method.toUpperCase() === 'POST') {
+		const { strategy = '', key: method_key = '', allowedMethods = [] } = options.methodOverride;
+		let new_request_method;
+
+		if (
+			['both', 'form_data'].includes(strategy) &&
+			request.body instanceof ReadOnlyFormData &&
+			request.body.has(method_key)
+		) {
+			new_request_method = (request.body.get(method_key) || request.method).toUpperCase();
+		}
+
+		if (['both', 'url_parameter'].includes(strategy) && incoming.query.has(method_key)) {
+			new_request_method = (incoming.query.get(method_key) || request.method).toUpperCase();
+		}
+
+		if (
+			new_request_method &&
+			allowedMethods.includes(new_request_method) &&
+			new_request_method !== 'GET'
+		) {
+			request.method = new_request_method;
+		}
+	}
+
 	try {
 		return await options.hooks.handle({
 			request,

packages/kit/src/runtime/server/parse_body/read_only_form_data.js

@@ -19,7 +19,7 @@ export function read_only_form_data() {
 	};
 }
 
-class ReadOnlyFormData {
+export class ReadOnlyFormData {
 	/** @type {Map<string, string[]>} */
 	#map;
 

packages/kit/test/apps/basics/src/routes/method-override/_tests.js

@@ -0,0 +1,54 @@
+import * as assert from 'uvu/assert';
+
+/** @type {import('test').TestMaker} */
+export default function (test) {
+	test('http method is overridden via URL parameter', '/method-override', async ({ page }) => {
+		let val;
+
+		// Check initial value
+		val = await page.textContent('h1');
+		assert.equal('', val);
+
+		await page.click('"PATCH"');
+		val = await page.textContent('h1');
+		assert.equal('PATCH', val);
+
+		await page.click('"DELETE"');
+		val = await page.textContent('h1');
+		assert.equal('DELETE', val);
+	});
+
+	test('GET method is not overridden', '/method-override', async ({ page }) => {
+		await page.click('"No Override From GET"');
+		const val = await page.textContent('h1');
+		assert.equal('GET', val);
+	});
+
+	test('POST method is not overridden with GET', '/method-override', async ({ page }) => {
+		await page.click('"No Override To GET"');
+		const val = await page.textContent('h1');
+		assert.equal('POST', val);
+	});
+
+	test('http method is overridden via hidden input', '/method-override', async ({ page }) => {
+		await page.click('"PATCH Via Hidden Input"');
+		const val = await page.textContent('h1');
+		assert.equal('PATCH', val);
+	});
+
+	test('GET method is not overridden via hidden input', '/method-override', async ({ page }) => {
+		await page.click('"No Override From GET Via Hidden Input"');
+		const val = await page.textContent('h1');
+		assert.equal('GET', val);
+	});
+
+	test(
+		'POST method is not overridden with GET via hidden input',
+		'/method-override',
+		async ({ page }) => {
+			await page.click('"No Override To GET Via Hidden Input"');
+			const val = await page.textContent('h1');
+			assert.equal('POST', val);
+		}
+	);
+}

packages/kit/test/apps/basics/src/routes/method-override/fetch.json.js

@@ -0,0 +1,26 @@
+const buildResponse = (/** @type {string} */ method) => ({
+	status: 303,
+	headers: {
+		location: `/method-override?method=${method}`
+	}
+});
+
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const get = (request) => {
+	return buildResponse(request.method);
+};
+
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const post = (request) => {
+	return buildResponse(request.method);
+};
+
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const patch = (request) => {
+	return buildResponse(request.method);
+};
+
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const del = (request) => {
+	return buildResponse(request.method);
+};

packages/kit/test/apps/basics/src/routes/method-override/index.svelte

@@ -0,0 +1,52 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ page }) {
+		return {
+			props: {
+				method: page.query.get('method') || ''
+			}
+		};
+	}
+</script>
+
+<script>
+	/** @type {string} */
+	export let method;
+</script>
+
+<h1>{method}</h1>
+
+<form action="/method-override/fetch.json?_method=PATCH" method="POST">
+	<input name="methodoverride" />
+	<button>PATCH</button>
+</form>
+
+<form action="/method-override/fetch.json?_method=DELETE" method="POST">
+	<input name="methodoverride" />
+	<button>DELETE</button>
+</form>
+
+<form action="/method-override/fetch.json?_method=POST" method="GET">
+	<input name="methodoverride" />
+	<button>No Override From GET</button>
+</form>
+
+<form action="/method-override/fetch.json?_method=GET" method="POST">
+	<input name="methodoverride4" />
+	<button>No Override To GET</button>
+</form>
+
+<form action="/method-override/fetch.json" method="POST">
+	<input type="hidden" name="_method" value="PATCH" />
+	<button>PATCH Via Hidden Input</button>
+</form>
+
+<form action="/method-override/fetch.json" method="GET">
+	<input type="hidden" name="_method" value="POST" />
+	<button>No Override From GET Via Hidden Input</button>
+</form>
+
+<form action="/method-override/fetch.json" method="POST">
+	<input type="hidden" name="_method" value="GET" />
+	<button>No Override To GET Via Hidden Input</button>
+</form>

packages/kit/test/apps/basics/svelte.config.js

@@ -12,6 +12,9 @@ const config = {
 				// the reload confuses Playwright
 				include: ['cookie', 'marked']
 			}
+		},
+		methodOverride: {
+			enabled: true
 		}
 	}
 };