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

Timestamp:

01/15/2026 12:08:01 PM (3 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".' ),
+        );
+    }
+}