Merge pull request #1851 from WordPress/add/url-metric-length-budget

Account for 64 KiB limit for sending beacon data

Author: westonruter

plugins/optimization-detective/detect.js

@@ -688,6 +688,7 @@ export default async function detect( {
 		return;
 	}
 
+	// Finalize extensions.
 	if ( extensions.size > 0 ) {
 		/** @type {Promise[]} */
 		const extensionFinalizePromises = [];
@@ -740,6 +741,36 @@ export default async function detect( {
 		}
 	}
 
+	/*
+	 * Now prepare the URL Metric to be sent as JSON request body.
+	 */
+
+	const maxBodyLengthKiB = 64;
+	const maxBodyLengthBytes = maxBodyLengthKiB * 1024;
+
+	// TODO: Consider adding replacer to reduce precision on numbers in DOMRect to reduce payload size.
+	const jsonBody = JSON.stringify( urlMetric );
+	const percentOfBudget =
+		( jsonBody.length / ( maxBodyLengthKiB * 1000 ) ) * 100;
+
+	/*
+	 * According to the fetch() spec:
+	 * "If the sum of contentLength and inflightKeepaliveBytes is greater than 64 kibibytes, then return a network error."
+	 * This is what browsers also implement for navigator.sendBeacon(). Therefore, if the size of the JSON is greater
+	 * than the maximum, we should avoid even trying to send it.
+	 */
+	if ( jsonBody.length > maxBodyLengthBytes ) {
+		if ( isDebug ) {
+			error(
+				`Unable to send URL Metric because it is ${ jsonBody.length.toLocaleString() } bytes, ${ Math.round(
+					percentOfBudget
+				) }% of ${ maxBodyLengthKiB } KiB limit:`,
+				urlMetric
+			);
+		}
+		return;
+	}
+
 	// Even though the server may reject the REST API request, we still have to set the storage lock
 	// because we can't look at the response when sending a beacon.
 	setStorageLock( getCurrentTime() );
@@ -751,7 +782,16 @@ export default async function detect( {
 	);
 
 	if ( isDebug ) {
-		log( 'Sending URL Metric:', urlMetric );
+		const message = `Sending URL Metric (${ jsonBody.length.toLocaleString() } bytes, ${ Math.round(
+			percentOfBudget
+		) }% of ${ maxBodyLengthKiB } KiB limit):`;
+
+		// The threshold of 50% is used because the limit for all beacons combined is 64 KiB, not just the data for one beacon.
+		if ( percentOfBudget < 50 ) {
+			log( message, urlMetric );
+		} else {
+			warn( message, urlMetric );
+		}
 	}
 
 	const url = new URL( restApiEndpoint );
@@ -769,7 +809,7 @@ export default async function detect( {
 	url.searchParams.set( 'hmac', urlMetricHMAC );
 	navigator.sendBeacon(
 		url,
-		new Blob( [ JSON.stringify( urlMetric ) ], {
+		new Blob( [ jsonBody ], {
 			type: 'application/json',
 		} )
 	);

plugins/optimization-detective/storage/rest-api.php

@@ -214,6 +214,27 @@ function od_handle_rest_request( WP_REST_Request $request ) {
 		);
 	}
 
+	/*
+	 * The limit for data sent via navigator.sendBeacon() is 64 KiB. This limit is checked in detect.js so that the
+	 * request will not even be attempted if the payload is too large. This server-side restriction is added as a
+	 * safeguard against clients sending possibly malicious payloads much larger than 64 KiB which should never be
+	 * getting sent.
+	 */
+	$max_size       = 64 * 1024;
+	$content_length = strlen( (string) wp_json_encode( $url_metric ) );
+	if ( $content_length > $max_size ) {
+		return new WP_Error(
+			'rest_content_too_large',
+			sprintf(
+				/* translators: 1: the size of the payload, 2: the maximum allowed payload size */
+				__( 'JSON payload size is %1$s bytes which is larger than the maximum allowed size of %2$s bytes.', 'optimization-detective' ),
+				number_format_i18n( $content_length ),
+				number_format_i18n( $max_size )
+			),
+			array( 'status' => 413 )
+		);
+	}
+
 	// TODO: This should be changed from store_url_metric($slug, $url_metric) instead be update_post( $slug, $group_collection ). As it stands, store_url_metric() is duplicating logic here.
 	$result = OD_URL_Metrics_Post_Type::store_url_metric(
 		$request->get_param( 'slug' ),