diff --git a/src/wp-includes/class-wp-scripts.php b/src/wp-includes/class-wp-scripts.php index e48658a1e7f7c..ac010c5ae2d50 100644 --- a/src/wp-includes/class-wp-scripts.php +++ b/src/wp-includes/class-wp-scripts.php @@ -95,6 +95,14 @@ class WP_Scripts extends WP_Dependencies { */ public $print_code = ''; + /** + * Holds client data HTML markup if concatenation is enabled. + * + * @since 7.1.0 + * @var string + */ + public $print_client_data = ''; + /** * Holds a list of script handles which are not in the default directory * if concatenation is enabled. @@ -249,6 +257,82 @@ public function print_extra_script( $handle, $display = true ) { return true; } + /** + * Gets client data associated with a registered script. + * + * @since 7.1.0 + * + * @param string $handle The script's registered handle. + * @return string Client data script tag, or empty string when no client data exists. + */ + private function get_script_client_data_tag( $handle ) { + /** + * Filters client data associated with a given script. + * + * Scripts may require client data that is required for initialization or is + * essential to have available on page load. These are suitable use cases for + * this data. + * + * The dynamic portion of the hook name, `$handle`, refers to the script handle + * that the client data is associated with. + * + * This is best suited to pass essential client data that must be available to the + * script for initialization or immediately on page load. It does not replace the + * REST API or client-side data fetching. + * + * Example: + * + * add_filter( + * 'script_client_data_my-handle', + * function ( array $client_data ): array { + * $client_data['dataForClient'] = 'ok'; + * return $client_data; + * } + * ); + * + * If the filter returns no data (an empty array), nothing will be embedded in the page. + * + * The client data for a given script, if provided, will be JSON serialized in a + * script tag with an ID of the form `wp-script-client-data-{$handle}`. + * + * The client data can be read with a pattern like this: + * + * Example: + * + * const clientDataContainer = document.getElementById( 'wp-script-client-data-my-handle' ); + * let clientData = {}; + * if ( clientDataContainer ) { + * try { + * clientData = JSON.parse( clientDataContainer.textContent ); + * } catch {} + * } + * // clientData.dataForClient === 'ok'; + * initMyScriptWithData( clientData ); + * + * @since 7.1.0 + * + * @param array $client_data The client data associated with the script. + */ + $client_data = apply_filters( "script_client_data_{$handle}", array() ); + + if ( ! is_array( $client_data ) || array() === $client_data ) { + return ''; + } + + $json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS; + if ( ! is_utf8_charset() ) { + $json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES; + } + + return wp_get_inline_script_tag( + (string) wp_json_encode( $client_data, $json_encode_flags ), + array( + 'type' => 'application/json', + 'id' => "wp-script-client-data-{$handle}", + ) + ); + } + /** * Checks whether all dependents of a given handle are in the footer. * @@ -337,8 +421,9 @@ public function do_item( $handle, $group = false ) { return false; } - $before_script = $this->get_inline_script_tag( $handle, 'before' ); - $after_script = $this->get_inline_script_tag( $handle, 'after' ); + $client_data_tag = $this->get_script_client_data_tag( $handle ); + $before_script = $this->get_inline_script_tag( $handle, 'before' ); + $after_script = $this->get_inline_script_tag( $handle, 'after' ); if ( $before_script || $after_script ) { $inline_script_tag = $before_script . $after_script; @@ -388,9 +473,10 @@ public function do_item( $handle, $group = false ) { _print_scripts(); $this->reset(); } elseif ( $this->in_default_dir( $filtered_src ) ) { - $this->print_code .= $this->print_extra_script( $handle, false ); - $this->concat .= "$handle,"; - $this->concat_version .= "$handle$ver"; + $this->print_client_data .= $client_data_tag; + $this->print_code .= $this->print_extra_script( $handle, false ); + $this->concat .= "$handle,"; + $this->concat_version .= "$handle$ver"; return true; } else { $this->ext_handles .= "$handle,"; @@ -398,6 +484,7 @@ public function do_item( $handle, $group = false ) { } } + echo $client_data_tag; $this->print_extra_script( $handle ); // A single item may alias a set of items, by having dependencies, but no source. @@ -1221,13 +1308,14 @@ private function has_inline_script( $handle, $position = null ) { * @since 2.8.0 */ public function reset() { - $this->do_concat = false; - $this->print_code = ''; - $this->concat = ''; - $this->concat_version = ''; - $this->print_html = ''; - $this->ext_version = ''; - $this->ext_handles = ''; + $this->do_concat = false; + $this->print_code = ''; + $this->print_client_data = ''; + $this->concat = ''; + $this->concat_version = ''; + $this->print_html = ''; + $this->ext_version = ''; + $this->ext_handles = ''; } /** diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 299e8dc9b750f..9e83769cd34e9 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -2229,6 +2229,14 @@ function _print_scripts() { $concat = trim( $wp_scripts->concat, ', ' ); if ( $concat ) { + /* + * Client data is inert JSON. When scripts are concatenated, print it + * before executable inline code and the bundle that may consume it. + */ + if ( ! empty( $wp_scripts->print_client_data ) ) { + echo $wp_scripts->print_client_data; + } + if ( ! empty( $wp_scripts->print_code ) ) { echo "\n\n"; + $expected .= "\n"; + $expected .= "\n"; + + $this->assertEqualHTML( $expected, get_echo( 'wp_print_scripts' ) ); + } + + /** + * @ticket 58873 + */ + public function test_script_client_data_filter_does_not_print_empty_data() { + wp_enqueue_script( 'test-example', 'example.com', array(), null ); + add_filter( + 'script_client_data_test-example', + static function ( $client_data ) { + return $client_data; + } + ); + + $expected = "\n"; + + $this->assertEqualHTML( $expected, get_echo( 'wp_print_scripts' ) ); + } + + /** + * @ticket 58873 + * + * @dataProvider data_invalid_script_client_data + * + * @param mixed $data Client data to return in filter. + */ + public function test_script_client_data_filter_does_not_print_invalid_data( $data ) { + wp_enqueue_script( 'test-example', 'example.com', array(), null ); + add_filter( + 'script_client_data_test-example', + static function () use ( $data ) { + return $data; + } + ); + + $expected = "\n"; + + $this->assertEqualHTML( $expected, get_echo( 'wp_print_scripts' ) ); + } + + /** + * Data provider. + * + * @return array + */ + public static function data_invalid_script_client_data(): array { + return array( + 'null' => array( null ), + 'stdClass' => array( new stdClass() ), + 'number 1' => array( 1 ), + 'string' => array( 'string' ), + ); + } + + /** + * @ticket 58873 + * + * @dataProvider data_script_client_data_encoding + * + * @param string $input Raw input string. + * @param string $expected Expected output string. + * @param string $charset Blog charset option. + */ + public function test_script_client_data_filter_encoding( $input, $expected, $charset ) { + add_filter( + 'pre_option_blog_charset', + static function () use ( $charset ) { + return $charset; + } + ); + + wp_enqueue_script( 'test-example', 'example.com', array(), null ); + add_filter( + 'script_client_data_test-example', + static function ( $client_data ) use ( $input ) { + $client_data[''] = $input; + return $client_data; + } + ); + + $expected = "\n"; + $expected .= "\n"; + + $this->assertEqualHTML( $expected, get_echo( 'wp_print_scripts' ) ); + } + + /** + * @ticket 58873 + */ + public function test_script_client_data_filter_does_not_prevent_concat() { + global $wp_scripts, $wp_version; + + $wp_scripts->do_concat = true; + $wp_scripts->default_dirs = array( $this->default_scripts_dir ); + + wp_enqueue_script( 'one', $this->default_scripts_dir . 'one.js' ); + wp_enqueue_script( 'two', $this->default_scripts_dir . 'two.js' ); + add_filter( + 'script_client_data_two', + static function ( $client_data ) { + $client_data['clientData'] = 'ok'; + return $client_data; + } + ); + + $expected = "\n"; + $expected .= "\n"; + + $actual = get_echo( + static function () { + wp_print_scripts(); + _print_scripts(); + } + ); + + $this->assertEqualHTML( $expected, $actual ); + } + + /** + * @ticket 58873 + */ + public function test_script_client_data_filter_for_external_script_prints_before_deferred_concat_output() { + global $wp_scripts, $wp_version; + + $wp_scripts->do_concat = true; + $wp_scripts->default_dirs = array( $this->default_scripts_dir ); + + wp_enqueue_script( 'one', $this->default_scripts_dir . 'one.js' ); + wp_enqueue_script( 'two', 'https://example.com/two.js', array(), null ); + add_filter( + 'script_client_data_two', + static function ( $client_data ) { + $client_data['clientData'] = 'ok'; + return $client_data; + } + ); + + $expected = "\n"; + $expected .= "\n"; + $expected .= "\n"; + + $actual = get_echo( + static function () { + wp_print_scripts(); + _print_scripts(); + } + ); + + $this->assertEqualHTML( $expected, $actual ); + } + + /** + * @ticket 58873 + */ + public function test_script_client_data_filter_with_localized_data_prints_before_concat_inline_script() { + global $wp_scripts, $wp_version; + + $wp_scripts->do_concat = true; + $wp_scripts->default_dirs = array( $this->default_scripts_dir ); + + wp_enqueue_script( 'one', $this->default_scripts_dir . 'one.js' ); + wp_localize_script( 'one', 'testExample', array( 'foo' => 'bar' ) ); + add_filter( + 'script_client_data_one', + static function ( $client_data ) { + $client_data['clientData'] = 'ok'; + return $client_data; + } + ); + + $expected = "\n"; + $expected .= "\n\n"; + $expected .= "\n"; + + $actual = get_echo( + static function () { + wp_print_scripts(); + _print_scripts(); + } + ); + + $this->assertEqualHTML( $expected, $actual ); + } + + /** + * @ticket 58873 + */ + public function test_script_client_data_filter_with_inline_script_still_prevents_concat() { + global $wp_scripts, $wp_version; + + $wp_scripts->do_concat = true; + $wp_scripts->default_dirs = array( $this->default_scripts_dir ); + + wp_enqueue_script( 'one', $this->default_scripts_dir . 'one.js' ); + wp_add_inline_script( 'one', 'console.log("before one");', 'before' ); + wp_add_inline_script( 'one', 'console.log("after one");' ); + add_filter( + 'script_client_data_one', + static function ( $client_data ) { + $client_data['clientData'] = 'ok'; + return $client_data; + } + ); + + $expected = "\n"; + $expected .= "\n"; + $expected .= "\n"; + $expected .= "\n"; + + $this->assertEqualHTML( $expected, get_echo( 'wp_print_scripts' ) ); + } + + /** + * @expectedDeprecated WP_Dependencies->add_data() + * + * @ticket 58873 + */ + public function test_script_client_data_filter_does_not_print_for_conditional_script() { + global $wp_scripts; + + $wp_scripts->do_concat = true; + $wp_scripts->default_dirs = array( $this->default_scripts_dir ); + + wp_enqueue_script( 'one', $this->default_scripts_dir . 'one.js' ); + wp_script_add_data( 'one', 'conditional', 'gte IE 9' ); + add_filter( + 'script_client_data_one', + static function ( $client_data ) { + $client_data['clientData'] = 'ok'; + return $client_data; + } + ); + + $actual = get_echo( + static function () { + wp_print_scripts(); + _print_scripts(); + } + ); + + $this->assertSame( '', $actual ); + } + + /** + * @ticket 58873 + */ + public function test_script_client_data_filter_prints_when_script_moves_to_footer() { + wp_enqueue_script( 'script-a', 'https://example.com/script-a.js', array(), null, array( 'strategy' => 'defer' ) ); + wp_enqueue_script( 'script-b', 'https://example.com/script-b.js', array( 'script-a' ), null, array( 'in_footer' => true ) ); + add_filter( + 'script_client_data_script-a', + static function ( $client_data ) { + $client_data['clientData'] = 'ok'; + return $client_data; + } + ); + + $header = get_echo( + static function () { + wp_scripts()->do_head_items(); + } + ); + $footer = get_echo( + static function () { + wp_scripts()->do_footer_items(); + } + ); + + $expected_footer = "\n"; + $expected_footer .= "\n"; + $expected_footer .= "\n"; + + $this->assertSame( '', $header ); + $this->assertEqualHTML( $expected_footer, $footer, '', 'Expected client data for a moved script to print in the footer.' ); + } + + /** + * Data provider. + * + * @return array + */ + public static function data_script_client_data_encoding(): array { + return array( + // UTF-8. + 'Solidus' => array( '/', '/', 'UTF-8' ), + 'Double quote' => array( '"', '\\"', 'UTF-8' ), + 'Single quote' => array( '\'', '\'', 'UTF-8' ), + 'Less than' => array( '<', '\u003C', 'UTF-8' ), + 'Greater than' => array( '>', '\u003E', 'UTF-8' ), + 'Ampersand' => array( '&', '&', 'UTF-8' ), + 'Newline' => array( "\n", "\\n", 'UTF-8' ), + 'Tab' => array( "\t", "\\t", 'UTF-8' ), + 'Form feed' => array( "\f", "\\f", 'UTF-8' ), + 'Carriage return' => array( "\r", "\\r", 'UTF-8' ), + 'Line separator' => array( "\u{2028}", "\u{2028}", 'UTF-8' ), + 'Paragraph separator' => array( "\u{2029}", "\u{2029}", 'UTF-8' ), + 'Flag of England' => array( "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}", "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}", 'UTF-8' ), + 'Malicious script closer' => array( '', '\u003C/script\u003E', 'UTF-8' ), + 'Entity-encoded malicious script closer' => array( '</script>', '</script>', 'UTF-8' ), + + // Non UTF-8. + 'Solidus non-utf8' => array( '/', '/', 'iso-8859-1' ), + 'Less than non-utf8' => array( '<', '\u003C', 'iso-8859-1' ), + 'Greater than non-utf8' => array( '>', '\u003E', 'iso-8859-1' ), + 'Ampersand non-utf8' => array( '&', '&', 'iso-8859-1' ), + 'Newline non-utf8' => array( "\n", "\\n", 'iso-8859-1' ), + 'Tab non-utf8' => array( "\t", "\\t", 'iso-8859-1' ), + 'Form feed non-utf8' => array( "\f", "\\f", 'iso-8859-1' ), + 'Carriage return non-utf8' => array( "\r", "\\r", 'iso-8859-1' ), + 'Line separator non-utf8' => array( "\u{2028}", "\u2028", 'iso-8859-1' ), + 'Paragraph separator non-utf8' => array( "\u{2029}", "\u2029", 'iso-8859-1' ), + 'Flag of England non-utf8' => array( "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}", "\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f", 'iso-8859-1' ), + 'Malicious script closer non-utf8' => array( '', '\u003C/script\u003E', 'iso-8859-1' ), + 'Entity-encoded malicious script closer non-utf8' => array( '</script>', '</script>', 'iso-8859-1' ), + ); + } + /** * @ticket 14853 */