Content-Disposition header is blocked by CORS

[rmccue]

The media upload endpoint in the REST API accepts files in two formats: form data (multipart/form-data) and direct upload (image/png e.g.). When uploading in direct format, the desired filename is passed in the Content-Disposition header (e.g. Content-Disposition: atttachment; filename="file.jpg").

When sending requests across a cross-site boundary, browser preflight requests only allow a certain subset of headers to be sent. We whitelist Authorization and Content-Type in addition to the regular headers, but neither Content-Disposition nor Content-MD5 are permitted by default or explicitly.

This means that a simple fetch using a File/Blob object (e.g. from an <input type="file" /> or HTML5 drag-and-drop) for the body will fail:

const url = `http://example.com/wp-json/wp/v2/media`;
const opts = {
	method: 'POST',
	headers: {
		'Content-Disposition': 'attachment; filename="test.txt"',
	}
	body: new Blob( [ 'test data' ] ),
};
fetch( url, opts ).then( resp => console.log( resp ) );

However, this is allowed by packing the data into a FormData object instead:

const url = `http://example.com/wp-json/wp/v2/media`;
const opts = {
	method: 'POST',
};
opts.body = new FormData();
const file = new Blob( [ 'test data' ] );
file.name = 'test.txt';
opts.body.append( 'file', file );
fetch( url, opts ).then( resp => console.log( resp ) );

We should fix this inconsistency to allow for the simpler request format.

[rmccue]

Add Content-Disposition and Content-MD5 to allowed headers, and add filter to allow custom headers

Trac ticket: https://core.trac.wordpress.org/ticket/41696

[TimothyBlynJacobs]

Adding this to 5.5 to accompany #50369. I've added a PR that is the same as 41696.diff but without the short array syntax and I've added the X-WP-Nonce header. Passing the nonce was already possible through the _wpnonce query parameter, but I think its worthwhile to have parity. wp.apiFetch also uses the X-WP-Nonce header.

[TimothyBlynJacobs]

In 48452:

REST API: Add Content-Disposition, Content-MD5 and X-WP-Nonce as allowed cors headers.

The Content-Disposition and Content-MD5 headers allow for easier file uploading across domains by using a File/Blob object directly. The X-WP-Nonce header is allowed for making cross-origin and same-origin authenticated requests consistent.

Additionally a filter is introduced, "rest_allowed_cors_headers", to simplify the process of allowing additional request headers.

Props rmccue, TimothyBlynJacobs.
Fixes #41696.

This was merged.