Harden validation of user-submitted LCP background image URL

plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php

@@ -17,7 +17,6 @@
  * Image Prioritizer: Image_Prioritizer_Video_Tag_Visitor class
  *
  * @since 0.2.0
- *
  * @access private
  */
 final class Image_Prioritizer_Video_Tag_Visitor extends Image_Prioritizer_Tag_Visitor {

plugins/image-prioritizer/helper.php

@@ -14,6 +14,7 @@
  * Initializes Image Prioritizer when Optimization Detective has loaded.
  *
  * @since 0.2.0
+ * @access private
  *
  * @param string $optimization_detective_version Current version of the optimization detective plugin.
  */
@@ -52,6 +53,7 @@ static function (): void {
  * See {@see 'wp_head'}.
  *
  * @since 0.1.0
+ * @access private
  */
 function image_prioritizer_render_generator_meta_tag(): void {
 	// Use the plugin slug as it is immutable.
@@ -62,6 +64,7 @@ function image_prioritizer_render_generator_meta_tag(): void {
  * Registers tag visitors.
  *
  * @since 0.1.0
+ * @access private
  *
  * @param OD_Tag_Visitor_Registry $registry Tag visitor registry.
  */
@@ -81,6 +84,7 @@ function image_prioritizer_register_tag_visitors( OD_Tag_Visitor_Registry $regis
  * Filters the list of Optimization Detective extension module URLs to include the extension for Image Prioritizer.
  *
  * @since n.e.x.t
+ * @access private
  *
  * @param string[]|mixed $extension_module_urls Extension module URLs.
  * @return string[] Extension module URLs.
@@ -97,6 +101,7 @@ function image_prioritizer_filter_extension_module_urls( $extension_module_urls
  * Filters additional properties for the element item schema for Optimization Detective.
  *
  * @since n.e.x.t
+ * @access private
  *
  * @param array<string, array{type: string}> $additional_properties Additional properties.
  * @return array<string, array{type: string}> Additional properties.
@@ -137,14 +142,170 @@ function image_prioritizer_add_element_item_schema_properties( array $additional
 	return $additional_properties;
 }
 
+/**
+ * Validates URL for a background image.
+ *
+ * @since n.e.x.t
+ * @access private
+ *
+ * @param string $url Background image URL.
+ * @return true|WP_Error Validity.
+ */
+function image_prioritizer_validate_background_image_url( string $url ) {
+	$parsed_url = wp_parse_url( $url );
+	if ( false === $parsed_url || ! isset( $parsed_url['host'] ) ) {
+		return new WP_Error(
+			'background_image_url_lacks_host',
+			__( 'Supplied background image URL does not have a host.', 'image-prioritizer' )
+		);
+	}
+
+	$allowed_hosts = array_map(
+		static function ( $host ) {
+			return wp_parse_url( $host, PHP_URL_HOST );
+		},
+		get_allowed_http_origins()
+	);
+
+	// Obtain the host of an image attachment's URL in case a CDN is pointing all images to an origin other than the home or site URLs.
+	$image_attachment_query = new WP_Query(
+		array(
+			'post_type'      => 'attachment',
+			'post_mime_type' => 'image',
+			'post_status'    => 'inherit',
+			'posts_per_page' => 1,
+			'fields'         => 'ids',
+		)
+	);
+	if ( isset( $image_attachment_query->posts[0] ) && is_int( $image_attachment_query->posts[0] ) ) {
+		$src = wp_get_attachment_image_src( $image_attachment_query->posts[0] );
+		if ( is_array( $src ) ) {
+			$attachment_image_src_host = wp_parse_url( $src[0], PHP_URL_HOST );
+			if ( is_string( $attachment_image_src_host ) ) {
+				$allowed_hosts[] = $attachment_image_src_host;
+			}
+		}
+	}
+
+	// Validate that the background image URL is for an allowed host.
+	if ( ! in_array( $parsed_url['host'], $allowed_hosts, true ) ) {
+		return new WP_Error(
+			'disallowed_background_image_url_host',
+			sprintf(
+				/* translators: %s is the list of allowed hosts */
+				__( 'Background image URL host is not among allowed: %s.', 'image-prioritizer' ),
+				join( ', ', array_unique( $allowed_hosts ) )
+			)
+		);
+	}
+
+	// Validate that the URL points to a valid resource.
+	$r = wp_safe_remote_head(
+		$url,
+		array(
+			'redirection' => 3, // Allow up to 3 redirects.
+		)
+	);
+	if ( $r instanceof WP_Error ) {
+		return $r;
+	}
+	$response_code = wp_remote_retrieve_response_code( $r );
+	if ( $response_code < 200 || $response_code >= 400 ) {
+		return new WP_Error(
+			'background_image_response_not_ok',
+			sprintf(
+				/* translators: %s is the HTTP status code */
+				__( 'HEAD request for background image URL did not return with a success status code: %s.', 'image-prioritizer' ),
+				$response_code
+			)
+		);
+	}
+
+	// Validate that the Content-Type is an image.
+	$content_type = (array) wp_remote_retrieve_header( $r, 'content-type' );
+	if ( ! is_string( $content_type[0] ) || ! str_starts_with( $content_type[0], 'image/' ) ) {
+		return new WP_Error(
+			'background_image_response_not_image',
+			sprintf(
+				/* translators: %s is the content type of the response */
+				__( 'HEAD request for background image URL did not return an image Content-Type: %s.', 'image-prioritizer' ),
+				$content_type[0]
+			)
+		);
+	}
+
+	/*
+	 * Validate that the Content-Length is not too massive, as it would be better to err on the side of
+	 * not preloading something so weighty in case the image won't actually end up as LCP.
+	 * The value of 2MB is chosen because according to Web Almanac 2022, the largest image by byte size
+	 * on a page is 1MB at the 90th percentile: <https://almanac.httparchive.org/en/2022/media#fig-12>.
+	 * The 2MB value is double this 1MB size.
+	 */
+	$content_length = (array) wp_remote_retrieve_header( $r, 'content-length' );
+	if ( ! is_numeric( $content_length[0] ) ) {
+		return new WP_Error(
+			'background_image_content_length_unknown',
+			__( 'HEAD request for background image URL did not include a Content-Length response header.', 'image-prioritizer' )
+		);
+	} elseif ( (int) $content_length[0] > 2 * MB_IN_BYTES ) {
+		return new WP_Error(
+			'background_image_content_length_too_large',
+			sprintf(
+				/* translators: %s is the content length of the response  */
+				__( 'HEAD request for background image URL returned Content-Length greater than 2MB: %s.', 'image-prioritizer' ),
+				$content_length[0]
+			)
+		);
+	}
+
+	return true;
+}
+
+/**
+ * Filters the validity of a URL Metric with an LCP element background image.
+ *
+ * This removes the lcpElementExternalBackgroundImage from the URL Metric prior to it being stored if the background
+ * image URL is not valid. Removal of the property is preferable to
+ *
+ * @since n.e.x.t
+ * @access private
+ *
+ * @param array<string, mixed>|mixed $data URL Metric data.
+ * @return array<string, mixed> Sanitized URL Metric data.
+ *
+ * @noinspection PhpDocMissingThrowsInspection
+ */
+function image_prioritizer_filter_url_metric_data_pre_storage( $data ): array {
+	if ( ! is_array( $data ) ) {
+		$data = array();
+	}
+
+	if ( isset( $data['lcpElementExternalBackgroundImage']['url'] ) && is_string( $data['lcpElementExternalBackgroundImage']['url'] ) ) {
+		$image_validity = image_prioritizer_validate_background_image_url( $data['lcpElementExternalBackgroundImage']['url'] );
+		if ( is_wp_error( $image_validity ) ) {
+			/**
+			 * No WP_Exception is thrown by wp_trigger_error() since E_USER_ERROR is not passed as the error level.
+			 *
+			 * @noinspection PhpUnhandledExceptionInspection
+			 */
+			wp_trigger_error( __FUNCTION__, $image_validity->get_error_message() . ' Background image URL: ' . $data['lcpElementExternalBackgroundImage']['url'] );
+			unset( $data['lcpElementExternalBackgroundImage'] );
+		}
+	}
+
+	return $data;
+}
+
 /**
  * Gets the path to a script or stylesheet.
  *
  * @since n.e.x.t
+ * @access private
  *
  * @param string      $src_path Source path, relative to plugin root.
  * @param string|null $min_path Minified path. If not supplied, then '.min' is injected before the file extension in the source path.
  * @return string URL to script or stylesheet.
+ * @noinspection PhpDocMissingThrowsInspection
  */
 function image_prioritizer_get_asset_path( string $src_path, ?string $min_path = null ): string {
 	if ( null === $min_path ) {
@@ -155,6 +316,11 @@ function image_prioritizer_get_asset_path( string $src_path, ?string $min_path =
 	$force_src = false;
 	if ( WP_DEBUG && ! file_exists( trailingslashit( __DIR__ ) . $min_path ) ) {
 		$force_src = true;
+		/**
+		 * No WP_Exception is thrown by wp_trigger_error() since E_USER_ERROR is not passed as the error level.
+		 *
+		 * @noinspection PhpUnhandledExceptionInspection
+		 */
 		wp_trigger_error(
 			__FUNCTION__,
 			sprintf(
@@ -181,6 +347,7 @@ function image_prioritizer_get_asset_path( string $src_path, ?string $min_path =
  * Handles 'autoplay' and 'preload' attributes accordingly.
  *
  * @since 0.2.0
+ * @access private
  *
  * @return string Lazy load script.
  */
@@ -195,6 +362,7 @@ function image_prioritizer_get_video_lazy_load_script(): string {
  * Load the background image when it approaches the viewport using an IntersectionObserver.
  *
  * @since n.e.x.t
+ * @access private
  *
  * @return string Lazy load script.
  */
@@ -207,6 +375,7 @@ function image_prioritizer_get_lazy_load_bg_image_script(): string {
  * Gets the stylesheet to lazy-load background images.
  *
  * @since n.e.x.t
+ * @access private
  *
  * @return string Lazy load stylesheet.
  */

plugins/image-prioritizer/hooks.php

@@ -13,3 +13,4 @@
 add_action( 'od_init', 'image_prioritizer_init' );
 add_filter( 'od_extension_module_urls', 'image_prioritizer_filter_extension_module_urls' );
 add_filter( 'od_url_metric_schema_root_additional_properties', 'image_prioritizer_add_element_item_schema_properties' );
+add_filter( 'od_url_metric_data_pre_storage', 'image_prioritizer_filter_url_metric_data_pre_storage' );

plugins/image-prioritizer/readme.txt

@@ -15,13 +15,19 @@ This plugin optimizes the loading of images (and videos) with prioritization, la
 
 The current optimizations include:
 
-1. Ensure `fetchpriority=high` is only added to an `IMG` when it is the Largest Contentful Paint (LCP) element across all responsive breakpoints.
-2. Add breakpoint-specific `fetchpriority=high` preload links for the LCP elements which are `IMG` elements or elements with a CSS `background-image` inline style.
-3. Apply lazy-loading to `IMG` tags based on whether they appear in any breakpoint’s initial viewport. (Additionally, [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is then also correctly applied.)
-4. Implement lazy-loading of CSS background images added via inline `style` attributes.
-5. Add `fetchpriority=low` to `IMG` tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.
+1. Add breakpoint-specific `fetchpriority=high` preload links (`LINK[rel=preload]`) for image URLs of LCP elements:
+   1. An `IMG` element, including the `srcset`/`sizes` attributes supplied as `imagesrcset`/`imagesizes` on the `LINK`.
+   2. The first `SOURCE` element with a `type` attribute in a `PICTURE` element. (Art-directed `PICTURE` elements using media queries are not supported.)
+   3. An element with a CSS `background-image` inline `style` attribute.
+   4. An element with a CSS `background-image` applied with a stylesheet (when the image is from an allowed origin).
+2. Ensure `fetchpriority=high` is only added to an `IMG` when it is the Largest Contentful Paint (LCP) element across all responsive breakpoints.
+3. Add `fetchpriority=low` to `IMG` tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.
+4. Lazy-Loading:
+   1. Apply lazy-loading to `IMG` tags based on whether they appear in any breakpoint’s initial viewport. (Additionally, [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is then also correctly applied.)
+   2. Implement lazy-loading of CSS background images added via inline `style` attributes.
+   3. Lazy-load `VIDEO` tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a `VIDEO` is the LCP element, it gets `preload=auto`; if it is in an initial viewport, the `preload=metadata` default is left; if it is not in an initial viewport, it gets `preload=none`. Lazy-loaded videos also get initial `preload`, `autoplay`, and `poster` attributes restored when the `VIDEO` is going to enter the viewport.
+5. Ensure that `sizes=auto` is added to all lazy-loaded `IMG` elements.
 6. Reduce the size of the `poster` image of a `VIDEO` from full size to the size appropriate for the maximum width of the video (on desktop).
-7. Lazy-load `VIDEO` tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a `VIDEO` is the LCP element, it gets `preload=auto`; if it is in an initial viewport, the `preload=metadata` default is left; if it is not in an initial viewport, it gets `preload=none`. Lazy-loaded videos also get initial `preload`, `autoplay`, and `poster` attributes restored when the `VIDEO` is going to enter the viewport.
 
 **This plugin requires the [Optimization Detective](https://wordpress.org/plugins/optimization-detective/) plugin as a dependency.** Please refer to that plugin for additional background on how this plugin works as well as additional developer options.