Customizer: Allow arbitrary custom CSS

src/wp-includes/class-wp-styles.php

@@ -158,11 +158,11 @@ public function do_item( $handle, $group = false ) {
 		$inline_style = $this->print_inline_style( $handle, false );
 
 		if ( $inline_style ) {
-			$inline_style_tag = sprintf(
-				"<style id='%s-inline-css'>\n%s\n</style>\n",
-				esc_attr( $handle ),
-				$inline_style
-			);
+			$processor = new WP_HTML_Tag_Processor( "<style></style>\n" );
+			$processor->next_tag();
+			$processor->set_attribute( 'id', "{$handle}-inline-css" );
+			$processor->set_modifiable_text( "\n{$inline_style}\n" );
+			$inline_style_tag = $processor->get_updated_html();
 		} else {
 			$inline_style_tag = '';
 		}
@@ -336,11 +336,11 @@ public function print_inline_style( $handle, $display = true ) {
 			return $output;
 		}
 
-		printf(
-			"<style id='%s-inline-css'>\n%s\n</style>\n",
-			esc_attr( $handle ),
-			$output
-		);
+		$processor = new WP_HTML_Tag_Processor( "<style></style>\n" );
+		$processor->next_tag();
+		$processor->set_attribute( 'id', "{$handle}-inline-css" );
+		$processor->set_modifiable_text( "\n{$output}\n" );
+		echo $processor->get_updated_html();
 
 		return true;
 	}

src/wp-includes/customize/class-wp-customize-custom-css-setting.php

@@ -144,35 +144,6 @@ public function value() {
 		return $value;
 	}
 
-	/**
-	 * Validate a received value for being valid CSS.
-	 *
-	 * Checks for imbalanced braces, brackets, and comments.
-	 * Notifications are rendered when the customizer state is saved.
-	 *
-	 * @since 4.7.0
-	 * @since 4.9.0 Checking for balanced characters has been moved client-side via linting in code editor.
-	 * @since 5.9.0 Renamed `$css` to `$value` for PHP 8 named parameter support.
-	 *
-	 * @param string $value CSS to validate.
-	 * @return true|WP_Error True if the input was validated, otherwise WP_Error.
-	 */
-	public function validate( $value ) {
-		// Restores the more descriptive, specific name for use within this method.
-		$css = $value;
-
-		$validity = new WP_Error();
-
-		if ( preg_match( '#</?\w+#', $css ) ) {
-			$validity->add( 'illegal_markup', __( 'Markup is not allowed in CSS.' ) );
-		}
-
-		if ( ! $validity->has_errors() ) {
-			$validity = parent::validate( $css );
-		}
-		return $validity;
-	}
-
 	/**
 	 * Store the CSS setting value in the custom_css custom post type for the stylesheet.
 	 *

src/wp-includes/fonts/class-wp-font-face.php

@@ -92,7 +92,10 @@ public function generate_and_print( array $fonts ) {
 			return;
 		}
 
-		printf( $this->get_style_element(), $css );
+		$processor = new WP_HTML_Tag_Processor( "<style class=\"wp-fonts-local\"></style>\n" );
+		$processor->next_tag();
+		$processor->set_modifiable_text( "\n{$css}\n" );
+		echo $processor->get_updated_html();
 	}
 
 	/**
@@ -193,17 +196,6 @@ private function validate_font_face_declarations( array $font_face ) {
 		return $font_face;
 	}
 
-	/**
-	 * Gets the style element for wrapping the `@font-face` CSS.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @return string The style element.
-	 */
-	private function get_style_element() {
-		return "<style class='wp-fonts-local'>\n%s\n</style>\n";
-	}
-
 	/**
 	 * Gets the `@font-face` CSS styles for locally-hosted font files.
 	 *

src/wp-includes/script-loader.php

@@ -2413,10 +2413,12 @@ function _print_styles() {
 		echo "<link rel='stylesheet' href='" . esc_attr( $href ) . "' media='all' />\n";
 
 		if ( ! empty( $wp_styles->print_code ) ) {
-			echo "<style>\n";
-			echo $wp_styles->print_code;
-			echo sprintf( "\n/*# sourceURL=%s */", rawurlencode( $concat_source_url ) );
-			echo "\n</style>\n";
+			$processor = new WP_HTML_Tag_Processor( '<style></style>' );
+			$processor->next_tag();
+			$style_tag_contents = "\n{$wp_styles->print_code}\n"
+				. sprintf( "/*# sourceURL=%s */\n", rawurlencode( $concat_source_url ) );
+			$processor->set_modifiable_text( $style_tag_contents );
+			echo $processor->get_updated_html();
 		}
 	}
 
@@ -3146,7 +3148,10 @@ function wp_enqueue_block_support_styles( $style, $priority = 10 ) {
 	add_action(
 		$action_hook_name,
 		static function () use ( $style ) {
-			echo "<style>$style</style>\n";
+			$processor = new WP_HTML_Tag_Processor( "<style></style>\n" );
+			$processor->next_tag();
+			$processor->set_modifiable_text( $style );
+			echo $processor->get_updated_html();
 		},
 		$priority
 	);

src/wp-includes/theme.php

@@ -1950,11 +1950,13 @@ function _custom_background_cb() {
 
 		$style .= $image . $position . $size . $repeat . $attachment;
 	}
-	?>
-<style<?php echo $type_attr; ?> id="custom-background-css">
-body.custom-background { <?php echo trim( $style ); ?> }
-</style>
-	<?php
+
+	$processor = new WP_HTML_Tag_Processor( "<style{$type_attr} id=\"custom-background-css\"></style>" );
+	$processor->next_tag();
+
+	$style_tag_content = 'body.custom-background { ' . trim( $style ) . ' }';
+	$processor->set_modifiable_text( "\n{$style_tag_content}\n" );
+	echo $processor->get_updated_html();
 }
 
 /**
@@ -1964,17 +1966,18 @@ function _custom_background_cb() {
  */
 function wp_custom_css_cb() {
 	$styles = wp_get_custom_css();
-	if ( $styles || is_customize_preview() ) :
-		$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
-		?>
-		<style<?php echo $type_attr; ?> id="wp-custom-css">
-			<?php
-			// Note that esc_html() cannot be used because `div &gt; span` is not interpreted properly.
-			echo strip_tags( $styles );
-			?>
-		</style>
-		<?php
-	endif;
+	if ( ! $styles && ! is_customize_preview() ) {
+		return;
+	}
+
+	$processor = new WP_HTML_Tag_Processor( '<style></style>' );
+	$processor->next_tag();
+	if ( ! current_theme_supports( 'html5', 'style' ) ) {
+		$processor->set_attribute( 'type', 'text/css' );
+	}
+	$processor->set_attribute( 'id', 'wp-custom-css' );
+	$processor->set_modifiable_text( "\n{$styles}\n" );
+	echo $processor->get_updated_html();
 }
 
 /**
@@ -2141,6 +2144,13 @@ function wp_update_custom_css_post( $css, $args = array() ) {
 
 	// Update post if it already exists, otherwise create a new one.
 	$post = wp_get_custom_css_post( $args['stylesheet'] );
+
+	// Remove KSES HTML filters to prevent CSS mangling.
+	$priority = has_filter( 'content_save_pre', 'wp_filter_post_kses' );
+	if ( false !== $priority ) {
+		remove_filter( 'content_save_pre', 'wp_filter_post_kses', $priority );
+	}
+
 	if ( $post ) {
 		$post_data['ID'] = $post->ID;
 		$r               = wp_update_post( wp_slash( $post_data ), true );
@@ -2160,6 +2170,10 @@ function wp_update_custom_css_post( $css, $args = array() ) {
 		}
 	}
 
+	if ( false !== $priority ) {
+		add_filter( 'content_save_pre', 'wp_filter_post_kses', $priority );
+	}
+
 	if ( is_wp_error( $r ) ) {
 		return $r;
 	}

tests/phpunit/tests/customize/custom-css-setting.php

@@ -268,6 +268,27 @@ public function test_get_custom_css_post_queries_after_failed_lookup() {
 		$this->assertSame( get_num_queries(), $queries_before );
 	}
 
+	/**
+	 * Ensure that dangerous STYLE tag contents do not break HTML output.
+	 *
+	 * @ticket 64418
+	 */
+	public function test_wp_custom_css_cb_escapes_dangerous_html() {
+		wp_update_custom_css_post(
+			'*::before { content: "</style><script>alert(1)</script>"; }',
+			array(
+				'stylesheet' => $this->setting->stylesheet,
+			)
+		);
+		$output   = get_echo( 'wp_custom_css_cb' );
+		$expected = <<<'HTML'
+<style id="wp-custom-css" type="text/css">
+*::before { content: "\3c\2fstyle><script>alert(1)</script>"; }
+</style>
+HTML;
+		$this->assertEqualHTML( $expected, $output );
+	}
+
 	/**
 	 * Test that wp_update_custom_css_post() updates the 'custom_css_post_id' theme mod.
 	 *
@@ -373,29 +394,4 @@ public function filter_update_custom_css_data( $data, $args ) {
 		$data['post_title']   = 'Ignored';
 		return $data;
 	}
-
-	/**
-	 * Tests that validation errors are caught appropriately.
-	 *
-	 * Note that the $validity \WP_Error object must be reset each time
-	 * as it picks up the Errors and passes them to the next assertion.
-	 *
-	 * @covers WP_Customize_Custom_CSS_Setting::validate
-	 */
-	public function test_validate() {
-
-		// Empty CSS throws no errors.
-		$result = $this->setting->validate( '' );
-		$this->assertTrue( $result );
-
-		// Basic, valid CSS throws no errors.
-		$basic_css = 'body { background: #f00; } h1.site-title { font-size: 36px; } a:hover { text-decoration: none; } input[type="text"] { padding: 1em; }';
-		$result    = $this->setting->validate( $basic_css );
-		$this->assertTrue( $result );
-
-		// Check for markup.
-		$unclosed_comment = $basic_css . '</style>';
-		$result           = $this->setting->validate( $unclosed_comment );
-		$this->assertArrayHasKey( 'illegal_markup', $result->errors );
-	}
 }