fix: strip tags from chart custom CSS at render time (#1355)

Author: lucadobrescu

classes/Visualizer/Module.php

@@ -650,7 +650,7 @@ protected function get_inline_custom_css( $id, $settings ) {
 				$class_name = $id . $name;
 				$properties = implode( ' !important; ', array_filter( $attributes ) );
 				if ( ! empty( $properties ) ) {
-					$css    .= '.' . $class_name . ' {' . $properties . ' !important;}';
+					$css    .= wp_strip_all_tags( '.' . $class_name . ' {' . $properties . ' !important;}' );
 					$classes[ $name ] = $class_name;
 				}
 			}

tests/e2e/config/mu-plugins/plant-chart-settings.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * E2E test helper (loaded as an mu-plugin via .wp-env.json).
+ *
+ * Lets specs plant chart data/settings meta directly, e.g. a stored-XSS
+ * payload in `customcss` that UI save flows strip on submission, so
+ * render-time sanitization can be verified.
+ */
+add_action(
+	'rest_api_init',
+	function () {
+		register_rest_route(
+			'visualizer-e2e/v1',
+			'/chart-settings/(?P<id>\d+)',
+			array(
+				'methods'             => 'POST',
+				'permission_callback' => function () {
+					return current_user_can( 'manage_options' );
+				},
+				'callback'            => function ( WP_REST_Request $request ) {
+					$chart_id = (int) $request['id'];
+					$body     = $request->get_json_params();
+					if ( isset( $body['settings'] ) ) {
+						update_post_meta( $chart_id, 'visualizer-settings', $body['settings'] );
+					}
+					if ( isset( $body['series'] ) ) {
+						update_post_meta( $chart_id, 'visualizer-series', $body['series'] );
+					}
+					if ( isset( $body['content'] ) ) {
+						wp_update_post(
+							array(
+								'ID'           => $chart_id,
+								'post_content' => maybe_serialize( $body['content'] ),
+							)
+						);
+					}
+					return array( 'ok' => true );
+				},
+			)
+		);
+	}
+);

tests/e2e/specs/custom-css.spec.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+let chartId;
+
+test.describe( 'Custom CSS sanitization', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		const chart = await requestUtils.rest( {
+			method: 'POST',
+			path: '/wp/v2/visualizer',
+			data: { title: 'Custom CSS payload chart', status: 'publish' },
+		} );
+		chartId = chart.id;
+
+		await requestUtils.rest( {
+			method: 'POST',
+			path: `/visualizer-e2e/v1/chart-settings/${ chartId }`,
+			data: {
+				settings: {
+					customcss: {
+						title: {
+							color: 'red</style><script>window.vizXss=1</script><style>',
+							'font-size': '12px',
+						},
+					},
+				},
+			},
+		} );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		if ( chartId ) {
+			await requestUtils.rest( { method: 'DELETE', path: `/wp/v2/visualizer/${ chartId }`, params: { force: true } } );
+		}
+	} );
+
+	test( 'strips tags from chart custom CSS on the library page', async ( { admin, page } ) => {
+		await admin.visitAdminPage( 'admin.php?page=visualizer' );
+
+		const styleBlock = page.locator( `#customcss-visualizer-${ chartId }` );
+		await expect( styleBlock ).toHaveCount( 1 );
+		// Legitimate rules survive sanitization. <style> has no innerText, so read textContent.
+		const css = await styleBlock.textContent();
+		expect( css ).toContain( 'font-size: 12px' );
+		expect( css ).not.toContain( '<script' );
+		// The injected script must not have executed.
+		expect( await page.evaluate( () => window.vizXss ) ).toBeUndefined();
+	} );
+} );