Changeset 61486 for trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php

Timestamp:

01/15/2026 12:08:01 PM (9 months ago)

Author:

jonsurrell

Message:

Customize: Allow arbitrary CSS in global styles custom CSS.

Relax Global Styles custom CSS filters to allow arbitrary CSS.

Escape HTML characters <>& in Global Styles data to prevent it from being mangled by post content filters. The data is JSON encoded and stored in post_content. Filters operating on post_content expect it to contain HTML. Some KSES filters would otherwise remove essential CSS features like the <custom-ident> CSS data type because they appear to be HTML tags.

[61418] changed STYLE tag generation to use the HTML API for improved safety.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10641.

Props jonsurrell, dmsnell, westonruter, ramonopoly, oandregal, jorgefilipecosta, sabernhardt, soyebsalar01.
See #64418.

File:

• trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php (modified) (3 diffs)

trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php

@@ -651 +651 @@
          * @covers WP_REST_Global_Styles_Controller::update_item
          * @ticket 57536
+         * @ticket 64418
          */
         public function test_update_item_invalid_styles_css() {
@@ -660 +661 @@
                 $request->set_body_params(
                         array(
-                                'styles' => array( 'css' => '<p>test</p> body { color: red; }' ),
+                                'styles' => array( 'css' => '</style>' ),
                         )
                 );
@@ -827 +828 @@
                 $this->assertSame( 'integer', $route_data[0]['args']['id']['type'] );
         }
+
+        /**
+         * @covers WP_REST_Global_Styles_Controller::update_item
+         * @ticket 64418
+         */
+        public function test_update_allows_valid_css_with_more_syntax() {
+                wp_set_current_user( self::$admin_id );
+                if ( is_multisite() ) {
+                        grant_super_admin( self::$admin_id );
+                }
+                $request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+                $css     = <<<'CSS'
+@property --animate {
+        syntax: "<custom-ident>";
+        inherits: true;
+        initial-value: false;
 }
+h1::before { content: "fun & games"; }
+CSS;
+                $request->set_body_params(
+                        array(
+                                'styles' => array( 'css' => $css ),
+                        )
+                );
+
+                $response = rest_get_server()->dispatch( $request );
+                $data     = $response->get_data();
+                $this->assertSame( $css, $data['styles']['css'] );
+
+                // Compare expected API output to WP internal values.
+                $request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id );
+                $response = rest_get_server()->dispatch( $request );
+                $this->assertSame( $css, $response->get_data()['styles']['css'] );
+        }
+
+        /**
+         * @covers WP_REST_Global_Styles_Controller::validate_custom_css
+         * @ticket 64418
+         *
+         * @dataProvider data_custom_css_allowed
+         */
+        public function test_validate_custom_css_allowed( string $custom_css ) {
+                $controller = new WP_REST_Global_Styles_Controller();
+                $validate   = Closure::bind(
+                        function ( $css ) {
+                                return $this->validate_custom_css( $css );
+                        },
+                        $controller,
+                        $controller
+                );
+
+                $this->assertTrue( $validate( $custom_css ) );
+        }
+
+        /**
+         * Data provider.
+         *
+         * @return array<string, string[]>
+         */
+        public static function data_custom_css_allowed(): array {
+                return array(
+                        '@property declaration'   => array(
+                                '@property --prop { syntax: "<custom-ident>"; inherits: true; initial-value: false; }',
+                        ),
+                        'Different close tag'     => array( '</stylesheet>' ),
+                        'Not a style close tag'   => array( '/*</style*/' ),
+                        'Not a style close tag 2' => array( '/*</style_' ),
+                        'Empty'                   => array( '' ),
+                        'Short content'           => array( '/**/' ),
+                );
+        }
+
+        /**
+         * @covers WP_REST_Global_Styles_Controller::validate_custom_css
+         * @ticket 64418
+         *
+         * @dataProvider data_custom_css_disallowed
+         */
+        public function test_validate_custom_css( string $custom_css, string $expected_error_message ) {
+                $controller = new WP_REST_Global_Styles_Controller();
+                $validate   = Closure::bind(
+                        function ( $css ) {
+                                return $this->validate_custom_css( $css );
+                        },
+                        $controller,
+                        $controller
+                );
+
+                $result = $validate( $custom_css );
+                $this->assertWPError( $result );
+                $this->assertSame( $expected_error_message, $result->get_error_message() );
+        }
+
+        /**
+         * Data provider.
+         *
+         * @return array<string, string[]>
+         */
+        public static function data_custom_css_disallowed(): array {
+                return array(
+                        'style close tag'            => array( 'css…</style>…css', 'The CSS must not contain "&lt;/style&gt;".' ),
+                        'style close tag upper case' => array( '</STYLE>', 'The CSS must not contain "&lt;/STYLE&gt;".' ),
+                        'style close tag mixed case' => array( '</sTyLe>', 'The CSS must not contain "&lt;/sTyLe&gt;".' ),
+                        'style close tag in comment' => array( '/*</style>*/', 'The CSS must not contain "&lt;/style&gt;".' ),
+                        'style close tag (/)'        => array( '</style/', 'The CSS must not contain "&lt;/style/".' ),
+                        'style close tag (\t)'       => array( "</style\t", "The CSS must not contain \"&lt;/style\t\"." ),
+                        'style close tag (\f)'       => array( "</style\f", "The CSS must not contain \"&lt;/style\f\"." ),
+                        'style close tag (\r)'       => array( "</style\r", "The CSS must not contain \"&lt;/style\r\"." ),
+                        'style close tag (\n)'       => array( "</style\n", "The CSS must not contain \"&lt;/style\n\"." ),
+                        'style close tag (" ")'      => array( '</style ', 'The CSS must not contain "&lt;/style ".' ),
+                        'truncated "<"'              => array( '<', 'The CSS must not end in "&lt;".' ),
+                        'truncated "</"'             => array( '</', 'The CSS must not end in "&lt;/".' ),
+                        'truncated "</s"'            => array( '</s', 'The CSS must not end in "&lt;/s".' ),
+                        'truncated "</ST"'           => array( '</ST', 'The CSS must not end in "&lt;/ST".' ),
+                        'truncated "</sty"'          => array( '</sty', 'The CSS must not end in "&lt;/sty".' ),
+                        'truncated "</STYL"'         => array( '</STYL', 'The CSS must not end in "&lt;/STYL".' ),
+                        'truncated "</stYle"'        => array( '</stYle', 'The CSS must not end in "&lt;/stYle".' ),
+                );
+        }
+}