[wp-trac] [WordPress Trac] #62426: Interactivity API directives support invalid data attribute characters on the server

Mon Mar 10 11:02:11 UTC 2025

#62426: Interactivity API directives support invalid data attribute characters on
the server
-------------------------------+---------------------
 Reporter:  jonsurrell         |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  6.8
Component:  Interactivity API  |     Version:  6.5
 Severity:  normal             |  Resolution:
 Keywords:  has-patch          |     Focuses:
-------------------------------+---------------------
Changes (by jonsurrell):

 * keywords:  has-patch needs-testing-info => has-patch

Comment:

 Sure. Process interactivity directives that include the characters that
 are expected to be invalid in the attribute name of the directive:

 {{{#!php
 <?php
 $html = <<<HTML
 <div data-wp-interactive="example" data-wp-context='{"x":1}'><div data-wp-
 class--bottom-[-24rem]="context.x">Should not have any class
 attribute.</div></div>
 HTML;
 echo wp_interactivity_process_directives( $html );
 }}}

 Here, `data-wp-class--bottom-[-24rem]` is an invalid directive name
 because it includes `[` and `]`.

 On `trunk,` the server process the directive and adds a class attribute.
 This is unexpected, the client will never process those directives and
 therefore they can never be interactive (see #62131). Trunk output looks
 like this after server processing:

 {{{#!xml
 <div data-wp-interactive="example" data-wp-
 context="{"x":1}"><div class="bottom-[-24rem]" data-wp-class--
 bottom-[-24rem]="context.x">Should not have any class
 attribute.</div></div>
 }}}

 [https://github.com/WordPress/wordpress-develop/pull/8048 In PR 8048], the
 server does not process the directives. This is expected and aligns with
 the client behavior. Here's the processed HTML from the server on this
 branch:

 {{{#!xml
 <div data-wp-interactive="example" data-wp-
 context="{"x":1}"><div data-wp-class--
 bottom-[-24rem]="context.x">Should not have any class
 attribute.</div></div>
 }}}

 Note the difference, `trunk` includes `class="bottom-[-24rem]"` (evidence
 of the undesirable processing) while [https://github.com/WordPress
 /wordpress-develop/pull/8048 PR 8048] does not.

 It's also good to confirm that allowed directives continue to work as
 expected. For example, the following directive is the same except for the
 removal of `[]` from the directive name:

 {{{#!php
 <?php
 $html = <<<HTML
 <div data-wp-interactive="example" data-wp-context='{"x":1}'><div data-wp-
 class--bottom--24rem="context.x"><em>Must</em> have class
 attribute.</div></div>
 HTML;
 echo wp_interactivity_process_directives( $html );
 }}}

 In this case, both trunk and the PR produce the same expected result with
 the `class="bottom--24rem"` class applied:

 {{{#!xml
 <div data-wp-interactive="example" data-wp-
 context="{"x":1}"><div class="bottom--24rem" data-wp-class--
 bottom--24rem="context.x"><em>Must</em> have class attribute.</div></div>
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62426#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform