Changeset 58159

Timestamp:

05/15/2024 05:40:44 PM (8 weeks ago)

Author:

dmsnell

Message:

Improve legibility of JSON-encoded Interactivity API store data.

The Interactivity API has been rendering client data in a SCRIPT element with the
type application/json so that it's not executed as a script, but is available
to one. The data runs through wp_json_encode() and is encoded with some flags
to ensure that potentially-dangerous characters are escaped.

However, this can lead to some challenges. Eagerly escaping when not necessary
can make the data difficult to comprehend when reading the output HTML. For example,
all non-ASCII Unicode characters are escaped with their code point equivalent.
This results in \ud83c\udd70 instead of 🅰.

In this patch, the flags for JSON encoding are refined to ensure what's necessary
while relaxing other rules (leaving in those Unicode characters if the blog charset
is UTF-8). This makes for Interactivity API data that's quicker as a human reader
to decipher and diagnose.

In summary:

• This data is JSON encoded and printed in a <script type="application/json"> tag.

• If we ensure that < is never printed inside the data, it should be impossible to break out of the script tag and the browser treats everything as the element's textContent.

• All other escaping becomes unnecessary at that point, including unicode escaping if the page uses the UTF-8 charset (the same encoding as JSON).

See ​https://github.com/WordPress/wordpress-develop/pull/6433#pullrequestreview-2043218338

Developed in ​https://github.com/WordPress/wordpress-develop/pull/6520
Discussed in https://core.trac.wordpress.org/ticket/61170

Fixes: #61170
Follow-up to: [57563].
Props: bjorsch, dmsnell, jonsurrell, sabernhardt, westonruter.

Location:

trunk

Files:

• src/wp-includes/interactivity-api/class-wp-interactivity-api.php (modified) (1 diff)
• tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php (modified) (3 diffs)

trunk/src/wp-includes/interactivity-api/class-wp-interactivity-api.php

@@ -168 +168 @@
 
         if ( ! empty( $interactivity_data ) ) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
             wp_print_inline_script_tag(
                 wp_json_encode(
                     $interactivity_data,
-                    JSON_HEX_TAG | JSON_HEX_AMP
+                    
                 ),
                 array(

trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php

@@ -28 +28 @@
     }
 
+
+
+
+
     /**
      * Tests that the state and config methods return an empty array at the
@@ -350 +354 @@
      *
      * @ticket 60356
+
      *
      * @covers ::state
@@ -356 +361 @@
      */
     public function test_state_and_config_escape_special_characters() {
-        $this->interactivity->state( 'myPlugin', array( 'amps' => 'http://site.test/?foo=1&baz=2' ) );
-        $this->interactivity->config( 'myPlugin', array( 'tags' => 'Tags: <!-- <script>' ) );
+        $this->interactivity->state(
+            'myPlugin',
+            array(
+                'ampersand'                              => '&',
+                'less-than sign'                         => '<',
+                'greater-than sign'                      => '>',
+                'solidus'                                => '/',
+                'line separator'                         => "\u{2028}",
+                'paragraph separator'                    => "\u{2029}",
+                'flag of england'                        => "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}",
+                'malicious script closer'                => '</script>',
+                'entity-encoded malicious script closer' => '&lt;/script&gt;',
+            )
+        );
+        $this->interactivity->config( 'myPlugin', array( 'chars' => '&<>/' ) );
 
         $interactivity_data_markup = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
-        preg_match( '/<script type="application\/json" id="wp-interactivity-data">.*?(\{.*\}).*?<\/script>/s', $interactivity_data_markup, $interactivity_data_string );
-
-        $this->assertEquals(
-            '{"config":{"myPlugin":{"tags":"Tags: \u003C!-- \u003Cscript\u003E"}},"state":{"myPlugin":{"amps":"http:\/\/site.test\/?foo=1\u0026baz=2"}}}',
-            $interactivity_data_string[1]
-        );
+        preg_match( '~<script type="application/json" id="wp-interactivity-data">\s*(\{.*\})\s*</script>~s', $interactivity_data_markup, $interactivity_data_string );
+
+        $expected = <<<"JSON"
+{"config":{"myPlugin":{"chars":"&\\u003C\\u003E/"}},"state":{"myPlugin":{"ampersand":"&","less-than sign":"\\u003C","greater-than sign":"\\u003E","solidus":"/","line separator":"\u{2028}","paragraph separator":"\u{2029}","flag of england":"\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}","malicious script closer":"\\u003C/script\\u003E","entity-encoded malicious script closer":"&lt;/script&gt;"}}}
+JSON;
+        $this->assertEquals( $expected, $interactivity_data_string[1] );
+    }
+
+    /**
+     * Tests that special characters in the initial state and configuration are
+     * properly escaped when the blog_charset is not UTF-8 (unicode compatible).
+     *
+     * This this test, unicode and line terminators should be escaped to their
+     * JSON unicode sequences.
+     *
+     * @ticket 61170
+     *
+     * @covers ::state
+     * @covers ::config
+     * @covers ::print_client_interactivity_data
+     */
+    public function test_state_and_config_escape_special_characters_non_utf8() {
+        add_filter( 'pre_option_blog_charset', array( $this, 'charset_iso_8859_1' ) );
+        $this->interactivity->state(
+            'myPlugin',
+            array(
+                'ampersand'                              => '&',
+                'less-than sign'                         => '<',
+                'greater-than sign'                      => '>',
+                'solidus'                                => '/',
+                'line separator'                         => "\u{2028}",
+                'paragraph separator'                    => "\u{2029}",
+                'flag of england'                        => "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}",
+                'malicious script closer'                => '</script>',
+                'entity-encoded malicious script closer' => '&lt;/script&gt;',
+            )
+        );
+        $this->interactivity->config( 'myPlugin', array( 'chars' => '&<>/' ) );
+
+        $interactivity_data_markup = get_echo( array( $this->interactivity, 'print_client_interactivity_data' ) );
+        preg_match( '~<script type="application/json" id="wp-interactivity-data">\s*(\{.*\})\s*</script>~s', $interactivity_data_markup, $interactivity_data_string );
+
+        $expected = <<<"JSON"
+{"config":{"myPlugin":{"chars":"&\\u003C\\u003E/"}},"state":{"myPlugin":{"ampersand":"&","less-than sign":"\\u003C","greater-than sign":"\\u003E","solidus":"/","line separator":"\\u2028","paragraph separator":"\\u2029","flag of england":"\\ud83c\\udff4\\udb40\\udc67\\udb40\\udc62\\udb40\\udc65\\udb40\\udc6e\\udb40\\udc67\\udb40\\udc7f","malicious script closer":"\\u003C/script\\u003E","entity-encoded malicious script closer":"&lt;/script&gt;"}}}
+JSON;
+        $this->assertEquals( $expected, $interactivity_data_string[1] );
     }