API Fetch: refresh nonces as soon as they expired, then fetch again (#…

…16683)

* API Fetch: refresh nonces as soon as they expired, then fetch again

* Use exit()

* Fix PHP linting errors

gutenberg.php

@@ -128,3 +128,11 @@ function gutenberg_pre_init() {
 
 	require_once dirname( __FILE__ ) . '/lib/load.php';
 }
+
+/**
+ * Outputs a WP REST API nonce.
+ */
+function gutenberg_rest_nonce() {
+	exit( wp_create_nonce( 'wp_rest' ) );
+}
+add_action( 'wp_ajax_gutenberg_rest_nonce', 'gutenberg_rest_nonce' );

lib/client-assets.php

@@ -246,25 +246,11 @@ function gutenberg_register_scripts_and_styles() {
 	wp_add_inline_script(
 		'wp-api-fetch',
 		sprintf(
-			implode(
-				"\n",
-				array(
-					'( function() {',
-					'	var nonceMiddleware = wp.apiFetch.createNonceMiddleware( "%s" );',
-					'	wp.apiFetch.use( nonceMiddleware );',
-					'	wp.hooks.addAction(',
-					'		"heartbeat.tick",',
-					'		"core/api-fetch/create-nonce-middleware",',
-					'		function( response ) {',
-					'			if ( response[ "rest_nonce" ] ) {',
-					'				nonceMiddleware.nonce = response[ "rest_nonce" ];',
-					'			}',
-					'		}',
-					'	)',
-					'} )();',
-				)
-			),
-			( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
+			'wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "%s" );' .
+			'wp.apiFetch.use( wp.apiFetch.nonceMiddleware );' .
+			'wp.apiFetch.nonceEndpoint = "%s";',
+			( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' ),
+			admin_url( 'admin-ajax.php?action=gutenberg_rest_nonce' )
 		),
 		'after'
 	);

packages/api-fetch/src/index.js

@@ -49,6 +49,14 @@ function registerMiddleware( middleware ) {
 	middlewares.unshift( middleware );
 }
 
+const checkStatus = ( response ) => {
+	if ( response.status >= 200 && response.status < 300 ) {
+		return response;
+	}
+
+	throw response;
+};
+
 const defaultFetchHandler = ( nextOptions ) => {
 	const { url, path, data, parse = true, ...remainingOptions } = nextOptions;
 	let { body, headers } = nextOptions;
@@ -71,13 +79,6 @@ const defaultFetchHandler = ( nextOptions ) => {
 			headers,
 		}
 	);
-	const checkStatus = ( response ) => {
-		if ( response.status >= 200 && response.status < 300 ) {
-			return response;
-		}
-
-		throw response;
-	};
 
 	const parseResponse = ( response ) => {
 		if ( parse ) {
@@ -148,7 +149,27 @@ function apiFetch( options ) {
 		return step( workingOptions, next );
 	};
 
-	return createRunStep( 0 )( options );
+	return new Promise( function( resolve, reject ) {
+		createRunStep( 0 )( options )
+			.then( resolve )
+			.catch( ( error ) => {
+				if ( error.code !== 'rest_cookie_invalid_nonce' ) {
+					return reject( error );
+				}
+
+				// If the nonce is invalid, refresh it and try again.
+				window.fetch( apiFetch.nonceEndpoint )
+					.then( checkStatus )
+					.then( ( data ) => data.text() )
+					.then( ( text ) => {
+						apiFetch.nonceMiddleware.nonce = text;
+						apiFetch( options )
+							.then( resolve )
+							.catch( reject );
+					} )
+					.catch( reject );
+			} );
+	} );
 }
 
 apiFetch.use = registerMiddleware;

packages/e2e-tests/plugins/nonce.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, Nonce
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-plugin-nonce
+ */
+
+/**
+ * Returns the nonce life time.
+ */
+function gutenberg_test_plugin_nonce_life() {
+	return 5;
+}
+add_filter( 'nonce_life', 'gutenberg_test_plugin_nonce_life' );

packages/e2e-tests/specs/plugins/nonce.test.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	saveDraft,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Nonce', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'gutenberg-test-plugin-nonce' );
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-plugin-nonce' );
+	} );
+
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should refresh when expired', async () => {
+		await page.keyboard.press( 'Enter' );
+		// eslint-disable-next-line no-restricted-syntax
+		await page.waitFor( 5000 );
+		await page.keyboard.type( 'test' );
+		// `saveDraft` waits for saving to be successful, so this test would
+		// timeout if it's not.
+		await saveDraft();
+		// We expect a 403 status once.
+		expect( console ).toHaveErrored();
+	} );
+} );