lib/media/load.php - trunk - githubmirror/gutenberg

lib/media/load.php
533 строки17 KB
Adam Silverstein
Media: Stop forcing crossorigin on IMG tags in media templates (#80532)
23 июл 2026, 05:24
23 июл 2026, 05:24cb53341
<?php
/**
 * Adds media-related functionality for client-side media processing.
 *
 * This file is structured in two tiers:
 *
 * 1. HEIC infrastructure — loaded whenever the feature filter is enabled.
 *    Browsers like Safari can decode HEIC via createImageBitmap() even
 *    without VIPS/SharedArrayBuffer, so HEIC MIME types, the custom REST
 *    controller, and REST field/index registrations are always needed.
 *
 * 2. Full VIPS/WASM processing — loaded only when the feature filter is
 *    enabled AND requires cross-origin isolation (DIP) at runtime.
 *
 * @package gutenberg
 */

if ( ! gutenberg_is_client_side_media_processing_enabled() ) {
	return;
}

// Animated GIF → video: clean up the sideloaded companion video and
// poster when their GIF attachment is deleted. The GIF→video swap itself
// happens in the editor (the converted block is a real core/video), so no
// render-time filtering is needed.
require_once __DIR__ . '/animated-gif-to-video.php';

// ── Tier 1: HEIC infrastructure (always loaded) ─────────────────────

/**
 * Registers HEIC/HEIF as allowed upload MIME types.
 *
 * HEIC images can be decoded in the browser (via canvas/VideoDecoder).
 * Registering these MIME types ensures the file picker's accept attribute
 * includes them, preventing macOS from silently converting HEIC to JPEG
 * on selection.
 *
 * @param array $mimes Allowed MIME types (extension => type).
 * @return array Modified MIME types.
 */
function gutenberg_add_heic_upload_mimes( array $mimes ): array {
	$mimes['heic'] = 'image/heic';
	$mimes['heif'] = 'image/heif';
	return $mimes;
}

add_filter( 'upload_mimes', 'gutenberg_add_heic_upload_mimes' );

/**
 * Overrides the REST controller for the attachment post type.
 *
 * @param array  $args      Array of arguments for registering a post type.
 *                          See the register_post_type() function for accepted arguments.
 * @param string $post_type Post type key.
 */
function gutenberg_filter_attachment_post_type_args( array $args, string $post_type ): array {
	if ( 'attachment' === $post_type ) {
		require_once __DIR__ . '/class-gutenberg-rest-attachments-controller.php';

		$args['rest_controller_class'] = Gutenberg_REST_Attachments_Controller::class;
	}

	return $args;
}

add_filter( 'register_post_type_args', 'gutenberg_filter_attachment_post_type_args', 10, 2 );

/**
 * Registers additional REST fields for attachments.
 */
function gutenberg_media_processing_register_rest_fields(): void {
	register_rest_field(
		'attachment',
		'filename',
		array(
			'schema'       => array(
				'description' => __( 'Original attachment file name', 'gutenberg' ),
				'type'        => 'string',
				'context'     => array( 'view', 'edit' ),
			),
			'get_callback' => 'gutenberg_rest_get_attachment_filename',
		)
	);

	register_rest_field(
		'attachment',
		'filesize',
		array(
			'schema'       => array(
				'description' => __( 'Attachment file size', 'gutenberg' ),
				'type'        => 'number',
				'context'     => array( 'view', 'edit' ),
			),
			'get_callback' => 'gutenberg_rest_get_attachment_filesize',
		)
	);
}

add_action( 'rest_api_init', 'gutenberg_media_processing_register_rest_fields' );

/**
 * Returns the attachment's original file name.
 *
 * @param array $post Post data.
 * @return string|null Attachment file name.
 */
function gutenberg_rest_get_attachment_filename( array $post ): ?string {
	$path = wp_get_original_image_path( $post['id'] );

	if ( $path ) {
		return basename( $path );
	}

	$path = get_attached_file( $post['id'] );

	if ( $path ) {
		return basename( $path );
	}

	return null;
}

/**
 * Returns the attachment's file size in bytes.
 *
 * @param array $post Post data.
 * @return int|null Attachment file size.
 */
function gutenberg_rest_get_attachment_filesize( array $post ): ?int {
	$attachment_id = $post['id'];

	$meta = wp_get_attachment_metadata( $attachment_id );

	if ( isset( $meta['filesize'] ) ) {
		return $meta['filesize'];
	}

	$original_path = wp_get_original_image_path( $attachment_id );
	$attached_file = $original_path ? $original_path : get_attached_file( $attachment_id );

	if ( is_string( $attached_file ) && file_exists( $attached_file ) ) {
		return wp_filesize( $attached_file );
	}

	return null;
}

/**
 * Returns a list of all available image sizes.
 *
 * @return array Existing image sizes.
 */
function gutenberg_get_all_image_sizes(): array {
	$sizes = wp_get_registered_image_subsizes();

	foreach ( $sizes as $name => &$size ) {
		$size['height'] = (int) $size['height'];
		$size['width']  = (int) $size['width'];
		$size['name']   = $name;
	}
	unset( $size );

	return $sizes;
}

/**
 * Filters the REST API root index data to add custom settings.
 *
 * @param WP_REST_Response $response Response data.
 */
function gutenberg_media_processing_filter_rest_index( WP_REST_Response $response ) {
	/** This filter is documented in wp-admin/includes/image.php */
	$image_size_threshold = (int) apply_filters( 'big_image_size_threshold', 2560, array( 0, 0 ), '', 0 ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound

	/** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
	$image_strip_meta = (bool) apply_filters( 'image_strip_meta', true ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound

	/*
	 * On the server, this filter receives the decoded image's actual bit depth.
	 * The client path never decodes the image on the server, so the filter is
	 * applied with 16 (the maximum depth vips can produce) as both the value
	 * and the current depth. The client caps its output bit depth at the
	 * filtered value, so a plugin lowering it (e.g. to 8) takes effect on
	 * client-generated images too.
	 */
	/** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
	$image_max_bit_depth = (int) apply_filters( 'image_max_bit_depth', 16, 16 ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound

	if ( current_user_can( 'upload_files' ) ) {
		$response->data['image_sizes']          = gutenberg_get_all_image_sizes();
		$response->data['image_size_threshold'] = $image_size_threshold;
		$response->data['image_strip_meta']     = $image_strip_meta;
		$response->data['image_max_bit_depth']  = $image_max_bit_depth;
	}

	return $response;
}

add_filter( 'rest_index', 'gutenberg_media_processing_filter_rest_index' );

/**
 * Sets a global JS variable to indicate that client-side media processing is enabled.
 *
 * The flag gates both processing modes: the full VIPS/WASM pipeline (browsers
 * that pass feature detection) and the HEIC canvas fallback used by browsers
 * such as Safari that can decode HEIC via createImageBitmap() but lack
 * SharedArrayBuffer support. The browser-capability check happens client-side.
 */
function gutenberg_set_client_side_media_processing_flag() {
	// Re-check the filter at action time, since other plugins (loaded after Gutenberg)
	// may have added a filter to disable client-side media processing.
	if ( ! gutenberg_is_client_side_media_processing_enabled() ) {
		return;
	}
	wp_add_inline_script( 'wp-block-editor', 'window.__clientSideMediaProcessing = true', 'before' );
}
add_action( 'admin_init', 'gutenberg_set_client_side_media_processing_flag' );

/**
 * Deletes the source-format companion file when its attachment is deleted.
 *
 * When the client-side media flow sideloads a source-format original (such as
 * a HEIC file) alongside a web-viewable derivative, the original's filename is
 * recorded in the 'source_image' metadata key. WordPress only tracks
 * 'original_image' in wp_delete_attachment_files(), so without this hook the
 * companion file would linger on disk after the attachment is deleted.
 *
 * @param int $post_id Attachment ID being deleted.
 * @return bool Whether a companion file was deleted.
 */
function gutenberg_delete_heic_companion_file( int $post_id ): bool {
	$metadata = wp_get_attachment_metadata( $post_id, true );

	$source_image = $metadata['source_image'] ?? null;
	if ( ! is_string( $source_image ) || '' === $source_image ) {
		return false;
	}

	$attached_file = get_attached_file( $post_id, true );

	if ( ! $attached_file ) {
		return false;
	}

	$uploads = wp_get_upload_dir();

	if ( empty( $uploads['basedir'] ) ) {
		return false;
	}

	$companion_path = path_join( dirname( $attached_file ), wp_basename( $source_image ) );

	if ( ! file_exists( $companion_path ) ) {
		return false;
	}

	return wp_delete_file_from_directory( $companion_path, $uploads['basedir'] );
}

add_action( 'delete_attachment', 'gutenberg_delete_heic_companion_file' );

// ── Tier 2: Full client-side processing (VIPS/WASM) ─────────────────
// Everything below requires cross-origin isolation (Document-Isolation-Policy)
// and SharedArrayBuffer support, which is only available in Chromium 137+.

/**
 * Filters the list of rewrite rules formatted for output to an .htaccess file.
 *
 * Adds support for serving wasm-vips locally.
 *
 * @param string $rules mod_rewrite Rewrite rules formatted for .htaccess.
 * @return string Filtered rewrite rules.
 */
function gutenberg_filter_mod_rewrite_rules( string $rules ): string {
	$rules .= "\n# BEGIN Gutenberg client-side media processing\n" .
				"AddType application/wasm wasm\n" .
				"# END Gutenberg client-side media processing\n";

	return $rules;
}

add_filter( 'mod_rewrite_rules', 'gutenberg_filter_mod_rewrite_rules' );

/**
 * Returns the major Chromium version from the current request's User-Agent.
 *
 * Matches all Chromium-based browsers (Chrome, Edge, Opera, Brave).
 *
 * @return int|null The major Chromium version, or null if not a Chromium browser.
 */
function gutenberg_get_chromium_major_version(): ?int {
	if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
		return null;
	}
	if ( preg_match( '/Chrome\/(\d+)/', $_SERVER['HTTP_USER_AGENT'], $matches ) ) {
		return (int) $matches[1];
	}
	return null;
}

/**
 * Enables cross-origin isolation in the block editor.
 *
 * Required for enabling SharedArrayBuffer for WebAssembly-based
 * media processing in the editor. Uses Document-Isolation-Policy
 * on supported browsers (Chromium 137+).
 */
function gutenberg_set_up_cross_origin_isolation() {
	// Re-check the filter at action time, since other plugins (loaded after Gutenberg)
	// may have added a filter to disable client-side media processing.
	if ( ! gutenberg_is_client_side_media_processing_enabled() ) {
		return;
	}

	$screen = get_current_screen();

	if ( ! $screen ) {
		return;
	}

	if ( ! $screen->is_block_editor() && 'site-editor' !== $screen->id && ! ( 'widgets' === $screen->id && wp_use_widgets_block_editor() ) ) {
		return;
	}

	// Skip when rendering the classic-theme home route, which shows the site
	// preview in an iframe and must reach its `contentDocument` to neutralize
	// interactive elements — DIP would block that.
	if ( 'site-editor' === $screen->id && ! wp_is_block_theme() && ( ! isset( $_GET['p'] ) || '/' === $_GET['p'] ) ) {
		return;
	}

	// Skip when a third-party page builder overrides the block editor.
	// DIP isolates the document into its own agent cluster,
	// which blocks same-origin iframe access that these editors rely on.
	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
	if ( isset( $_GET['action'] ) && 'edit' !== $_GET['action'] ) {
		return;
	}

	$user_id = get_current_user_id();
	if ( ! $user_id ) {
		return;
	}

	// Cross-origin isolation is not needed if users can't upload files anyway.
	if ( ! user_can( $user_id, 'upload_files' ) ) {
		return;
	}

	gutenberg_start_cross_origin_isolation_output_buffer();
}

add_action( 'load-post.php', 'gutenberg_set_up_cross_origin_isolation' );
add_action( 'load-post-new.php', 'gutenberg_set_up_cross_origin_isolation' );
add_action( 'load-site-editor.php', 'gutenberg_set_up_cross_origin_isolation' );
add_action( 'load-widgets.php', 'gutenberg_set_up_cross_origin_isolation' );

// Remove core's COEP/COOP-based cross-origin isolation in favor of
// Gutenberg's DIP-based approach, which also skips third-party editors.
remove_action( 'load-post.php', 'wp_set_up_cross_origin_isolation' );
remove_action( 'load-post-new.php', 'wp_set_up_cross_origin_isolation' );
remove_action( 'load-site-editor.php', 'wp_set_up_cross_origin_isolation' );
remove_action( 'load-widgets.php', 'wp_set_up_cross_origin_isolation' );

/**
 * Sends the Document-Isolation-Policy header for cross-origin isolation.
 *
 * Uses an output buffer to add crossorigin="anonymous" where needed.
 */
function gutenberg_start_cross_origin_isolation_output_buffer(): void {
	$chromium_version = gutenberg_get_chromium_major_version();

	/**
	 * Filters whether to use Document-Isolation-Policy for cross-origin isolation.
	 *
	 * Document-Isolation-Policy provides per-document cross-origin isolation
	 * without affecting other iframes on the page, avoiding breakage of plugins
	 * whose iframes lose credentials/DOM access.
	 *
	 * @since 21.8.0
	 *
	 * @param bool $use_dip Whether DIP is supported and should be used.
	 */
	$use_dip = apply_filters(
		'gutenberg_use_document_isolation_policy',
		null !== $chromium_version && $chromium_version >= 137
	);

	if ( ! $use_dip ) {
		return;
	}

	ob_start(
		function ( string $output ): string {
			header( 'Document-Isolation-Policy: isolate-and-credentialless' );

			return gutenberg_add_crossorigin_attributes( $output );
		}
	);
}

/**
 * Adds crossorigin="anonymous" to relevant tags in the given HTML string.
 *
 * @param string $html HTML input.
 *
 * @return string Modified HTML.
 */
function gutenberg_add_crossorigin_attributes( string $html ): string {
	$site_url = site_url();

	$processor = new WP_HTML_Tag_Processor( $html );

	// See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin.
	$tags = array(
		'AUDIO'  => 'src',
		'LINK'   => 'href',
		'SCRIPT' => 'src',
		'VIDEO'  => 'src',
		'SOURCE' => 'src',
	);

	$tag_names = array_keys( $tags );

	while ( $processor->next_tag() ) {
		$tag = $processor->get_tag();

		if ( ! in_array( $tag, $tag_names, true ) ) {
			continue;
		}

		if ( 'AUDIO' === $tag || 'VIDEO' === $tag ) {
			$processor->set_bookmark( 'audio-video-parent' );
		}

		$processor->set_bookmark( 'resume' );

		$sought = false;

		$crossorigin = $processor->get_attribute( 'crossorigin' );

		$url = $processor->get_attribute( $tags[ $tag ] );

		if ( is_string( $url ) && ! str_starts_with( $url, $site_url ) && ! str_starts_with( $url, '/' ) && ! is_string( $crossorigin ) ) {
			if ( 'SOURCE' === $tag ) {
				$sought = $processor->seek( 'audio-video-parent' );

				if ( $sought ) {
					$processor->set_attribute( 'crossorigin', 'anonymous' );
				}
			} else {
				$processor->set_attribute( 'crossorigin', 'anonymous' );
			}

			if ( $sought ) {
				$processor->seek( 'resume' );
				$processor->release_bookmark( 'audio-video-parent' );
			}
		}
	}

	return $processor->get_updated_html();
}

/**
 * Updates `crossorigin` attributes in the printed media templates.
 *
 * Adds `crossorigin="anonymous"` to AUDIO and VIDEO tags inside the
 * Backbone `<script type="text/html">` templates so the media modal can
 * play cross-origin audio and video under cross-origin isolation. Tags
 * that already have the attribute are left untouched so the output does
 * not gain duplicates on WordPress versions where Core adds it itself.
 *
 * IMG is intentionally excluded: under
 * `Document-Isolation-Policy: isolate-and-credentialless` the browser
 * already loads cross-origin images in credentialless mode, so forcing
 * `crossorigin="anonymous"` triggers a CORS request that breaks previews
 * of images served without CORS headers, such as media offloaded to a
 * CDN. See https://core.trac.wordpress.org/ticket/65673.
 *
 * @param string $html The printed media templates.
 *
 * @return string Modified media templates.
 */
function gutenberg_update_media_template_crossorigin_attributes( string $html ): string {
	/*
	 * The media templates are inside <script type="text/html"> tags,
	 * whose content is treated as raw text by the HTML Tag Processor.
	 * Extract each script block's content, process it separately,
	 * then reassemble the full output.
	 */
	$script_processor = new WP_HTML_Tag_Processor( $html );
	while ( $script_processor->next_tag( 'SCRIPT' ) ) {
		if ( 'text/html' !== $script_processor->get_attribute( 'type' ) ) {
			continue;
		}
		$template_processor = new WP_HTML_Tag_Processor( $script_processor->get_modifiable_text() );
		while ( $template_processor->next_tag() ) {
			if (
				in_array( $template_processor->get_tag(), array( 'AUDIO', 'VIDEO' ), true )
				&& ! is_string( $template_processor->get_attribute( 'crossorigin' ) )
			) {
				$template_processor->set_attribute( 'crossorigin', 'anonymous' );
			}
		}
		$script_processor->set_modifiable_text( $template_processor->get_updated_html() );
	}

	return $script_processor->get_updated_html();
}

/**
 * Overrides templates from wp_print_media_templates with custom ones.
 *
 * Updates the `crossorigin` attributes on media tags so cross-origin
 * audio and video can be processed under cross-origin isolation without
 * breaking previews of images served without CORS headers.
 */
function gutenberg_override_media_templates(): void {
	remove_action( 'admin_footer', 'wp_print_media_templates' );
	add_action(
		'admin_footer',
		static function (): void {
			ob_start();
			wp_print_media_templates();
			$html = (string) ob_get_clean();

			echo gutenberg_update_media_template_crossorigin_attributes( $html ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		}
	);
}

add_action( 'wp_enqueue_media', 'gutenberg_override_media_templates' );