Construct AMP validation URL on the client-side

- Use `amp-first` query arg to force validation in Standard mode - Use `omit_stylesheet` and `cache` flags
ampproject · Oct 7, 2021 · 55d8a74 · 55d8a74
1 parent 18bc622
commit 55d8a74
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 26 deletions.
diff --git a/assets/src/components/site-scan-context-provider/index.js b/assets/src/components/site-scan-context-provider/index.js
@@ -3,6 +3,7 @@
  */
 import { createContext, useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * External dependencies
@@ -29,10 +30,14 @@ const SITE_SCAN_STATE_COMPLETE = 'SITE_SCAN_STATE_COMPLETE';
  * @param {Object} props                       Component props.
  * @param {?any}   props.children              Component children.
  * @param {string} props.scannableUrlsRestPath The REST path for interacting with the scannable URL resources.
+ * @param {string} props.validateNonce         The AMP validate nonce.
+ * @param {string} props.validateQueryVar      The AMP validate query variable name.
  */
 export function SiteScanContextProvider( {
 	children,
 	scannableUrlsRestPath,
+	validateNonce,
+	validateQueryVar,
 } ) {
 	const [ themeIssues, setThemeIssues ] = useState( [] );
 	const [ pluginIssues, setPluginIssues ] = useState( [] );
@@ -98,6 +103,10 @@ export function SiteScanContextProvider( {
 	 * Scan site URLs sequentially.
 	 */
 	useEffect( () => {
+		if ( ! validateQueryVar || ! validateNonce ) {
+			return;
+		}
+
 		if ( siteScanState !== SITE_SCAN_STATE_IDLE ) {
 			return;
 		}
@@ -109,8 +118,17 @@ export function SiteScanContextProvider( {
 			setSiteScanState( SITE_SCAN_STATE_IN_PROGRESS );
 
 			try {
-				const { validate_url: validateUrl } = scannableUrls[ currentlyScannedUrlIndex ];
-				const validationResults = await apiFetch( { url: validateUrl } );
+				const { url } = scannableUrls[ currentlyScannedUrlIndex ];
+				const validationResults = await apiFetch( {
+					url: addQueryArgs( url, {
+						'amp-first': true,
+						[ validateQueryVar ]: {
+							nonce: validateNonce,
+							omit_stylesheets: true,
+							cache: true,
+						},
+					} ),
+				} );
 
 				if ( true === hasUnmounted.current ) {
 					return;
@@ -146,7 +164,7 @@ export function SiteScanContextProvider( {
 				setSiteScanState( SITE_SCAN_STATE_IDLE );
 			}
 		} )();
-	}, [ currentlyScannedUrlIndex, scannableUrls, setAsyncError, siteScanState ] );
+	}, [ currentlyScannedUrlIndex, scannableUrls, setAsyncError, siteScanState, validateNonce, validateQueryVar ] );
 
 	return (
 		<SiteScan.Provider
@@ -169,4 +187,6 @@ export function SiteScanContextProvider( {
 SiteScanContextProvider.propTypes = {
 	children: PropTypes.any,
 	scannableUrlsRestPath: PropTypes.string,
+	validateNonce: PropTypes.string,
+	validateQueryVar: PropTypes.string,
 };
diff --git a/assets/src/onboarding-wizard/index.js b/assets/src/onboarding-wizard/index.js
@@ -19,6 +19,8 @@ import {
 	UPDATES_NONCE,
 	USER_FIELD_DEVELOPER_TOOLS_ENABLED,
 	USERS_RESOURCE_REST_PATH,
+	VALIDATE_NONCE,
+	VALIDATE_QUERY_VAR,
 } from 'amp-settings'; // From WP inline script.
 import PropTypes from 'prop-types';
 
@@ -86,6 +88,8 @@ export function Providers( { children } ) {
 										<TemplateModeOverrideContextProvider>
 											<SiteScanContextProvider
 												scannableUrlsRestPath={ SCANNABLE_URLS_REST_PATH }
+												validateNonce={ VALIDATE_NONCE }
+												validateQueryVar={ VALIDATE_QUERY_VAR }
 											>
 												{ children }
 											</SiteScanContextProvider>

diff --git a/assets/src/settings-page/index.js b/assets/src/settings-page/index.js
@@ -12,6 +12,8 @@ import {
 	USER_FIELD_DEVELOPER_TOOLS_ENABLED,
 	USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
 	USERS_RESOURCE_REST_PATH,
+	VALIDATE_NONCE,
+	VALIDATE_QUERY_VAR,
 } from 'amp-settings';
 
 /**
@@ -94,6 +96,8 @@ function Providers( { children } ) {
 									<ThemesContextProvider hasErrorBoundary={ true }>
 										<SiteScanContextProvider
 											scannableUrlsRestPath={ SCANNABLE_URLS_REST_PATH }
+											validateNonce={ VALIDATE_NONCE }
+											validateQueryVar={ VALIDATE_QUERY_VAR }
 										>
 											{ children }
 										</SiteScanContextProvider>

diff --git a/src/Admin/OnboardingWizardSubmenuPage.php b/src/Admin/OnboardingWizardSubmenuPage.php
@@ -10,6 +10,7 @@
 
 use AMP_Options_Manager;
 use AMP_Validated_URL_Post_Type;
+use AMP_Validation_Manager;
 use AmpProject\AmpWP\DevTools\UserAccess;
 use AmpProject\AmpWP\Infrastructure\Delayed;
 use AmpProject\AmpWP\Infrastructure\Registerable;
@@ -252,6 +253,8 @@ public function enqueue_assets( $hook_suffix ) {
 			'UPDATES_NONCE'                      => wp_create_nonce( 'updates' ),
 			'USER_FIELD_DEVELOPER_TOOLS_ENABLED' => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
 			'USERS_RESOURCE_REST_PATH'           => '/wp/v2/users',
+			'VALIDATE_NONCE'                     => AMP_Validation_Manager::get_amp_validate_nonce(),
+			'VALIDATE_QUERY_VAR'                 => AMP_Validation_Manager::VALIDATE_QUERY_VAR,
 			'VALIDATED_URLS_LINK'                => $amp_validated_urls_link,
 		];
 

diff --git a/src/Admin/OptionsMenu.php b/src/Admin/OptionsMenu.php
@@ -11,6 +11,7 @@
 use AMP_Options_Manager;
 use AMP_Theme_Support;
 use AMP_Validated_URL_Post_Type;
+use AMP_Validation_Manager;
 use AmpProject\AmpWP\DependencySupport;
 use AmpProject\AmpWP\DevTools\UserAccess;
 use AmpProject\AmpWP\Infrastructure\Conditional;
@@ -257,6 +258,8 @@ public function enqueue_assets( $hook_suffix ) {
 			'USER_FIELD_DEVELOPER_TOOLS_ENABLED' => UserAccess::USER_FIELD_DEVELOPER_TOOLS_ENABLED,
 			'USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE' => UserRESTEndpointExtension::USER_FIELD_REVIEW_PANEL_DISMISSED_FOR_TEMPLATE_MODE,
 			'USERS_RESOURCE_REST_PATH'           => '/wp/v2/users',
+			'VALIDATE_NONCE'                     => AMP_Validation_Manager::get_amp_validate_nonce(),
+			'VALIDATE_QUERY_VAR'                 => AMP_Validation_Manager::VALIDATE_QUERY_VAR,
 			'VALIDATED_URLS_LINK'                => $amp_validated_urls_link,
 		];
 

diff --git a/src/Validation/ScannableURLsRestController.php b/src/Validation/ScannableURLsRestController.php
@@ -8,7 +8,6 @@
 
 namespace AmpProject\AmpWP\Validation;
 
-use AMP_Validation_Manager;
 use WP_Error;
 use WP_REST_Controller;
 use AmpProject\AmpWP\Infrastructure\Delayed;
@@ -73,26 +72,18 @@ public function register() {
 	/**
 	 * Retrieves a list of scannable URLs.
 	 *
-	 * Each item contains a page `type` (e.g. 'home' or 'search') and a
-	 * `validate_url` prop for accessing validation data for a given URL.
+	 * Besides the page URL, each item contains a page `type` (e.g. 'home' or
+	 * 'search') and a URL to a corresponding AMP page (`amp_url`).
 	 *
 	 * @param WP_REST_Request $request Full details about the request.
 	 *
 	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
 	 */
 	public function get_items( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-		$nonce = AMP_Validation_Manager::get_amp_validate_nonce();
-
 		return rest_ensure_response(
 			array_map(
-				static function ( $entry ) use ( $nonce ) {
-					$entry['amp_url']      = amp_add_paired_endpoint( $entry['url'] );
-					$entry['validate_url'] = add_query_arg(
-						[
-							AMP_Validation_Manager::VALIDATE_QUERY_VAR => $nonce,
-						],
-						$entry['amp_url']
-					);
+				static function ( $entry ) {
+					$entry['amp_url'] = amp_add_paired_endpoint( $entry['url'] );
 
 					return $entry;
 				},
@@ -112,33 +103,26 @@ public function get_item_schema() {
 			'title'      => 'amp-wp-' . $this->rest_base,
 			'type'       => 'object',
 			'properties' => [
-				'url'          => [
+				'url'     => [
 					'description' => __( 'Page URL.', 'amp' ),
 					'type'        => 'string',
 					'format'      => 'uri',
 					'readonly'    => true,
 					'context'     => [ 'view' ],
 				],
-				'amp_url'      => [
+				'amp_url' => [
 					'description' => __( 'AMP URL.', 'amp' ),
 					'type'        => 'string',
 					'format'      => 'uri',
 					'readonly'    => true,
 					'context'     => [ 'view' ],
 				],
-				'type'         => [
+				'type'    => [
 					'description' => __( 'Page type.', 'amp' ),
 					'type'        => 'string',
 					'readonly'    => true,
 					'context'     => [ 'view' ],
 				],
-				'validate_url' => [
-					'description' => __( 'URL for accessing validation data for a given page.', 'amp' ),
-					'type'        => 'string',
-					'format'      => 'uri',
-					'readonly'    => true,
-					'context'     => [ 'view' ],
-				],
 			],
 		];
 	}