Scripts: Use HTML API to build SCRIPT tags

src/wp-includes/script-loader.php

@@ -2872,7 +2872,14 @@ function wp_get_script_tag( $attributes ) {
 	 */
 	$attributes = apply_filters( 'wp_script_attributes', $attributes );
 
-	return sprintf( "<script%s></script>\n", wp_sanitize_script_attributes( $attributes ) );
+	$processor = new WP_HTML_Tag_Processor( '<script></script>' );
+	$processor->next_tag();
+	foreach ( $attributes as $name => $value ) {
+		if ( is_string( $value ) || true === $value ) {
+			$processor->set_attribute( $name, $value );
+		}
+	}
+	return "{$processor->get_updated_html()}\n";
 }
 
 /**
@@ -2916,7 +2923,15 @@ function wp_get_inline_script_tag( $data, $attributes = array() ) {
 	 */
 	$attributes = apply_filters( 'wp_inline_script_attributes', $attributes, $data );
 
-	return sprintf( "<script%s>%s</script>\n", wp_sanitize_script_attributes( $attributes ), $data );
+	$processor = new WP_HTML_Tag_Processor( '<script></script>' );
+	$processor->next_tag();
+	foreach ( $attributes as $name => $value ) {
+		if ( is_string( $value ) || true === $value ) {
+			$processor->set_attribute( $name, $value );
+		}
+	}
+	$processor->set_modifiable_text( $data );
+	return "{$processor->get_updated_html()}\n";
 }
 
 /**

tests/phpunit/data/html-api/script-element-escaping-diagram.dot

@@ -0,0 +1,30 @@
+digraph {
+	rankdir=TB;
+
+	// Entry point
+	entry [shape=plaintext label="Open script"];
+	entry -> script_data;
+
+	// Double-circle states arranged more compactly
+	data [shape=doublecircle label="Close script"];
+	script_data [shape=doublecircle color=blue label="script\ndata"];
+	script_data_escaped [shape=circle color=orange label="escaped"];
+	script_data_double_escaped [shape=circle color=red label="double\nescaped"];
+
+	// Group related nodes on same ranks where possible
+	{rank=same; script_data script_data_escaped script_data_double_escaped}
+
+	script_data -> script_data [label="<!--(…)>\n(all dashes)"];
+	script_data -> script_data_escaped [label="<!--"];
+	script_data -> data [label="</script†"];
+
+	script_data_escaped -> script_data [label="-->"];
+	script_data_escaped -> script_data_double_escaped [label="<script†"];
+	script_data_escaped -> data [label="</script†"];
+
+	script_data_double_escaped -> script_data [label="-->"];
+	script_data_double_escaped -> script_data_escaped [label="</script†"];
+
+	label="† = Case insensitive 'script' followed by one of ' \\t\\f\\r\\n/>'";
+	labelloc=b;
+}

tests/phpunit/data/html-api/script-element-escaping-diagram.php

@@ -0,0 +1,13 @@
+<?php
+
+/**
+ * This is the original Graphviz source for the SCRIPT tag
+ * parsing behavior, used in the documentation for the HTML API.
+ *
+ * @see WP_HTML_Tag_Processor::escape_javascript_script_contents()
+ *
+ * @return string
+ */
+function wp_html_api_script_element_escaping_diagram_source() {
+	return file_get_contents( __DIR__ . '/script-element-escaping-diagram.dot' );
+}

tests/phpunit/tests/dependencies/scripts.php

@@ -333,8 +333,8 @@ public function test_delayed_dependent_with_blocking_dependency_not_enqueued( $s
 		// This dependent is registered but not enqueued, so it should not factor into the eligible loading strategy.
 		wp_register_script( 'dependent-script-a4', '/dependent-script-a4.js', array( 'main-script-a4' ), null );
 		$output   = get_echo( 'wp_print_scripts' );
-		$expected = str_replace( "'", '"', "<script src='/main-script-a4.js' id='main-script-a4-js' {$strategy} data-wp-strategy='{$strategy}'></script>" );
-		$this->assertStringContainsString( $expected, $output, 'Only enqueued dependents should affect the eligible strategy.' );
+		$expected = "<script src='/main-script-a4.js' id='main-script-a4-js' {$strategy} data-wp-strategy='{$strategy}'></script>";
+		$this->assertEqualHTMLScriptTagById( $expected, $output, 'Only enqueued dependents should affect the eligible strategy.' );
 	}
 
 	/**
@@ -1076,8 +1076,8 @@ public function test_various_strategy_dependency_chains( $set_up, $expected_mark
 	public function test_loading_strategy_with_defer_having_no_dependents_nor_dependencies() {
 		wp_enqueue_script( 'main-script-d1', 'http://example.com/main-script-d1.js', array(), null, array( 'strategy' => 'defer' ) );
 		$output   = get_echo( 'wp_print_scripts' );
-		$expected = str_replace( "'", '"', "<script src='http://example.com/main-script-d1.js' id='main-script-d1-js' defer data-wp-strategy='defer'></script>\n" );
-		$this->assertStringContainsString( $expected, $output, 'Expected defer, as there is no dependent or dependency' );
+		$expected = "<script src='http://example.com/main-script-d1.js' id='main-script-d1-js' defer data-wp-strategy='defer'></script>\n";
+		$this->assertEqualHTMLScriptTagById( $expected, $output, 'Expected defer, as there is no dependent or dependency' );
 	}
 
 	/**
@@ -1096,7 +1096,7 @@ public function test_loading_strategy_with_defer_dependent_and_varied_dependenci
 		wp_enqueue_script( 'main-script-d2', 'http://example.com/main-script-d2.js', array( 'dependency-script-d2-1', 'dependency-script-d2-3' ), null, array( 'strategy' => 'defer' ) );
 		$output   = get_echo( 'wp_print_scripts' );
 		$expected = '<script src="http://example.com/main-script-d2.js" id="main-script-d2-js" defer data-wp-strategy="defer"></script>';
-		$this->assertStringContainsString( $expected, $output, 'Expected defer, as all dependencies are either deferred or blocking' );
+		$this->assertEqualHTMLScriptTagById( $expected, $output, 'Expected defer, as all dependencies are either deferred or blocking' );
 	}
 
 	/**
@@ -1115,7 +1115,7 @@ public function test_loading_strategy_with_all_defer_dependencies() {
 		wp_enqueue_script( 'dependent-script-d3-3', 'http://example.com/dependent-script-d3-3.js', array( 'dependent-script-d3-2' ), null, array( 'strategy' => 'defer' ) );
 		$output   = get_echo( 'wp_print_scripts' );
 		$expected = '<script src="http://example.com/main-script-d3.js" id="main-script-d3-js" defer data-wp-strategy="defer"></script>';
-		$this->assertStringContainsString( $expected, $output, 'Expected defer, as all dependents have defer loading strategy' );
+		$this->assertEqualHTMLScriptTagById( $expected, $output, 'Expected defer, as all dependents have defer loading strategy' );
 	}
 
 	/**
@@ -1495,9 +1495,10 @@ public function test_loading_strategy_with_invalid_defer_registration() {
 		wp_enqueue_script( 'dependent-script-d4-1', '/dependent-script-d4-1.js', array( 'main-script-d4' ), null, array( 'strategy' => 'defer' ) );
 		wp_enqueue_script( 'dependent-script-d4-2', '/dependent-script-d4-2.js', array( 'dependent-script-d4-1' ), null );
 		wp_enqueue_script( 'dependent-script-d4-3', '/dependent-script-d4-3.js', array( 'dependent-script-d4-2' ), null, array( 'strategy' => 'defer' ) );
+
 		$output   = get_echo( 'wp_print_scripts' );
-		$expected = str_replace( "'", '"', "<script src='/main-script-d4.js' id='main-script-d4-js' data-wp-strategy='defer'></script>\n" );
-		$this->assertStringContainsString( $expected, $output, 'Scripts registered as defer but that have all dependents with no strategy, should become blocking (no strategy).' );
+		$expected = "<script src='/main-script-d4.js' id='main-script-d4-js' data-wp-strategy='defer'></script>\n";
+		$this->assertEqualHTMLScriptTagById( $expected, $output, 'Scripts registered as defer but that have all dependents with no strategy, should become blocking (no strategy).' );
 	}
 
 	/**

tests/phpunit/tests/html-api/wpHtmlTagProcessorModifiableText.php

@@ -444,17 +444,19 @@ public static function data_tokens_with_basic_modifiable_text_updates() {
 	/**
 	 * Ensures that updates with potentially-compromising values aren't accepted.
 	 *
-	 * For example, a modifiable text update should be allowed which would break
-	 * the structure of the containing element, such as in a script or comment.
+	 * For example, a modifiable text update that would change the structure of the HTML
+	 * document is not allowed, like attempting to set `-->` within a comment or `</script>`
+	 * within a text/plain SCRIPT tag.
 	 *
 	 * @ticket 61617
+	 * @ticket 62797
 	 *
 	 * @dataProvider data_unallowed_modifiable_text_updates
 	 *
 	 * @param string $html_with_nonempty_modifiable_text Will be used to find the test element.
 	 * @param string $invalid_update                     Update containing possibly-compromising text.
 	 */
-	public function test_rejects_updates_with_unallowed_substrings( string $html_with_nonempty_modifiable_text, string $invalid_update ) {
+	public function test_rejects_dangerous_updates( string $html_with_nonempty_modifiable_text, string $invalid_update ) {
 		$processor = new WP_HTML_Tag_Processor( $html_with_nonempty_modifiable_text );
 
 		while ( '' === $processor->get_modifiable_text() && $processor->next_token() ) {
@@ -466,7 +468,7 @@ public function test_rejects_updates_with_unallowed_substrings( string $html_wit
 
 		$this->assertFalse(
 			$processor->set_modifiable_text( $invalid_update ),
-			'Should have reject possibly-compromising modifiable text update.'
+			'Should have rejected possibly-compromising modifiable text update.'
 		);
 
 		// Flush updates.
@@ -486,11 +488,152 @@ public function test_rejects_updates_with_unallowed_substrings( string $html_wit
 	 */
 	public static function data_unallowed_modifiable_text_updates() {
 		return array(
-			'Comment with -->'                 => array( '<!-- this is a comment -->', 'Comments end in -->' ),
-			'Comment with --!>'                => array( '<!-- this is a comment -->', 'Invalid but legitimate comments end in --!>' ),
-			'SCRIPT with </script>'            => array( '<script>Replace me</script>', 'Just a </script>' ),
-			'SCRIPT with </script attributes>' => array( '<script>Replace me</script>', 'before</script id=sneak>after' ),
-			'SCRIPT with "<script " opener'    => array( '<script>Replace me</script>', '<!--<script ' ),
+			'Comment with -->'                        => array( '<!-- this is a comment -->', 'Comments end in -->' ),
+			'Comment with --!>'                       => array( '<!-- this is a comment -->', 'Invalid but legitimate comments end in --!>' ),
+			'Non-JS SCRIPT with <script>'             => array( '<script type="text/html">Replace me</script>', '<!-- Just a <script>' ),
+			'Non-JS SCRIPT with </script>'            => array( '<script type="text/plain">Replace me</script>', 'Just a </script>' ),
+			'Non-JS SCRIPT with <script attributes>'  => array( '<script language="text">Replace me</script>', '<!-- <script sneaky>after' ),
+			'Non-JS SCRIPT with </script attributes>' => array( '<script language="text">Replace me</script>', 'before</script sneaky>after' ),
+		);
+	}
+
+	/**
+	 * Ensures that JavaScript script tag contents are safely updated.
+	 *
+	 * @ticket 62797
+	 *
+	 * @dataProvider data_script_tag_text_updates
+	 *
+	 * @param string $html     HTML containing a SCRIPT tag to be modified.
+	 * @param string $update   Update containing possibly-compromising text.
+	 * @param string $expected Expected result.
+	 */
+	public function test_safely_updates_script_tag_contents( string $html, string $update, string $expected ) {
+		$processor = new WP_HTML_Tag_Processor( $html );
+		$this->assertTrue( $processor->next_tag( 'SCRIPT' ) );
+		$this->assertTrue( $processor->set_modifiable_text( $update ) );
+		$this->assertSame( $expected, $processor->get_updated_html() );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array[]
+	 */
+	public static function data_script_tag_text_updates(): array {
+		return array(
+			'Simple update'                         => array( '<script></script>', '{}', '<script>{}</script>' ),
+			'Needs no replacement'                  => array( '<script></script>', '<!--<scriptish>', '<script><!--<scriptish></script>' ),
+			'var script;1<script>0'                 => array( '<script></script>', 'var script;1<script>0', '<script>var script;1<\u0073cript>0</script>' ),
+			'1</script>/'                           => array( '<script></script>', '1</script>/', '<script>1</\u0073cript>/</script>' ),
+			'var SCRIPT;1<SCRIPT>0'                 => array( '<script></script>', 'var SCRIPT;1<SCRIPT>0', '<script>var SCRIPT;1<\u0053CRIPT>0</script>' ),
+			'1</SCRIPT>/'                           => array( '<script></script>', '1</SCRIPT>/', '<script>1</\u0053CRIPT>/</script>' ),
+			'"</script>"'                           => array( '<script></script>', '"</script>"', '<script>"</\u0073cript>"</script>' ),
+			'"</ScRiPt>"'                           => array( '<script></script>', '"</ScRiPt>"', '<script>"</\u0053cRiPt>"</script>' ),
+			'Tricky script open tag with \r'        => array( '<script></script>', "<!-- <script\r>", "<script><!-- <\\u0073cript\r></script>" ),
+			'Tricky script open tag with \r\n'      => array( '<script></script>', "<!-- <script\r\n>", "<script><!-- <\\u0073cript\r\n></script>" ),
+			'Tricky script close tag with \r'       => array( '<script></script>', "// </script\r>", "<script>// </\\u0073cript\r></script>" ),
+			'Tricky script close tag with \r\n'     => array( '<script></script>', "// </script\r\n>", "<script>// </\\u0073cript\r\n></script>" ),
+			'Module tag'                            => array( '<script type="module"></script>', '"<script>"', '<script type="module">"<\u0073cript>"</script>' ),
+			'Tag with type'                         => array( '<script type="text/javascript"></script>', '"<script>"', '<script type="text/javascript">"<\u0073cript>"</script>' ),
+			'Tag with language'                     => array( '<script language="javascript"></script>', '"<script>"', '<script language="javascript">"<\u0073cript>"</script>' ),
+			'Non-JS script, save HTML-like content' => array( '<script type="text/html"></script>', '<h1>This & that</h1>', '<script type="text/html"><h1>This & that</h1></script>' ),
+		);
+	}
+
+	/**
+	 * @ticket 64419
+	 */
+	public function test_complex_javascript_and_json_auto_escaping() {
+		$processor = new WP_HTML_Tag_Processor( "<script></script>\n<script></script>\n<hr>" );
+		$processor->next_tag( 'SCRIPT' );
+		$processor->set_attribute( 'type', 'importmap' );
+		$importmap_data = array(
+			'imports' => array(
+				'</SCRIPT>\\<!--\\<script>' => './script',
+			),
+		);
+
+		$importmap = json_encode(
+			$importmap_data,
+			JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS
+		);
+
+		$processor->set_modifiable_text( "\n{$importmap}\n" );
+		$decoded_importmap = json_decode( $processor->get_modifiable_text(), true );
+		$this->assertSame( JSON_ERROR_NONE, json_last_error(), 'JSON failed to decode correctly.' );
+		$this->assertEquals( $importmap_data, $decoded_importmap );
+		$processor->next_tag( 'SCRIPT' );
+		$processor->set_attribute( 'type', 'module' );
+		$javascript = <<<'JS'
+import '</SCRIPT>\\<!--\\<script>';
+JS;
+		$processor->set_modifiable_text( "\n{$javascript}\n" );
+
+		$expected = <<<'HTML'
+<script type="importmap">
+{"imports":{"</\u0053CRIPT>\\<!--\\<\u0073cript>":"./script"}}
+</script>
+<script type="module">
+import '</\u0053CRIPT>\\<!--\\<\u0073cript>';
+</script>
+<hr>
+HTML;
+
+		$updated_html = $processor->get_updated_html();
+		$this->assertEqualHTML( $expected, $updated_html );
+
+		// Reprocess to ensure JSON survives HTML round-trip:
+		$processor = new WP_HTML_Tag_Processor( $updated_html );
+		$processor->next_tag( 'SCRIPT' );
+		$this->assertSame( 'importmap', $processor->get_attribute( 'type' ) );
+		$importmap_json    = $processor->get_modifiable_text();
+		$decoded_importmap = json_decode( $importmap_json, true );
+		$this->assertSame( JSON_ERROR_NONE, json_last_error(), 'Importmap JSON failed to decode.' );
+		$this->assertEquals(
+			$importmap_data,
+			$decoded_importmap,
+			'JSON was not equal after re-processing updated HTML.'
+		);
+	}
+
+	/**
+	 * @ticket 64419
+	 */
+	public function test_json_auto_escaping() {
+		// This is not a typical JSON encoding or escaping, but it is valid.
+		$json_text             = '"Escaped BS: \\\\; Escaped BS+LT: \\\\<; Unescaped LT: <; Script closer: </script>"';
+		$expected_decoded_json = 'Escaped BS: \\; Escaped BS+LT: \\<; Unescaped LT: <; Script closer: </script>';
+		$decoded_json          = json_decode( $json_text );
+		$this->assertSame( JSON_ERROR_NONE, json_last_error(), 'JSON failed to decode.' );
+		$this->assertSame(
+			$expected_decoded_json,
+			$decoded_json,
+			'Decoded JSON did not match expected value.'
+		);
+
+		$processor = new WP_HTML_Tag_Processor( '<script type="application/json"></script>' );
+		$processor->next_tag( 'SCRIPT' );
+
+		$processor->set_modifiable_text( "\n{$json_text}\n" );
+
+		$expected = <<<'HTML'
+<script type="application/json">
+"Escaped BS: \\; Escaped BS+LT: \\<; Unescaped LT: <; Script closer: </\u0073cript>"
+</script>
+HTML;
+
+		$updated_html = $processor->get_updated_html();
+		$this->assertEqualHTML( $expected, $updated_html );
+
+		// Reprocess to ensure JSON value survives HTML round-trip:
+		$processor = new WP_HTML_Tag_Processor( $updated_html );
+		$processor->next_tag( 'SCRIPT' );
+		$decoded_json_from_html = json_decode( $processor->get_modifiable_text(), true );
+		$this->assertSame( JSON_ERROR_NONE, json_last_error(), 'JSON failed to decode.' );
+		$this->assertEquals(
+			$expected_decoded_json,
+			$decoded_json_from_html
 		);
 	}
 }