[wp-trac] [WordPress Trac] #63162: Sanitizing styles doesn't work as expected in presence of semi-colon(; ) in CSS value

[WordPress Trac]

#63162: Sanitizing styles doesn't work as expected in presence of semi-colon(;) in
CSS value
--------------------------+-----------------------------
 Reporter:  karthikeya01  |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 When looking into the issue created in the Gutenberg repo
 [https://github.com/WordPress/gutenberg/issues/69574] found that the
 presence of semicolon in CSS value doesn't split the inline-styles as
 expected when sanitizing the styles.

 See
 https://github.com/WordPress/wordpress-
 develop/blob/804ca756b1434e7dc4ce9a357ce3cb3846552d7c/src/wp-
 includes/kses.php#L2375-L2386

 In the issue #69574 of Gutenberg the plugin adds the style

 {{{
 background-image:
 url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOTYgOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiIHN0eWxlPSJoZWlnaHQ6IGNhbGMoMTEwJSAtIDdweCk7IHdpZHRoOiBjYWxjKDExMCUgLSA3cHgpOyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJmaWxsR3JhZDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOTAiIHgxPSIwLjE0NjQiIHkxPSIwLjg1MzYiIHgyPSIwLjg1MzYiIHkyPSIwLjE0NjQiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjU5QkYiIG9mZnNldD0iMCI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9IiNGRjk5RDkiIG9mZnNldD0iMC4yNCI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9IiNBNkZGNjYiIG9mZnNldD0iMC43NSI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9IiM4Q0ZGNEMiIG9mZnNldD0iMSI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxzeW1ib2wgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0icGF0aDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOSI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBmaWxsPSJ1cmwoI2ZpbGxHcmFkNWU2NjgxYTUtMWIxMy00NmIxLTliMjktYTI3NTQ3OTQ0YTE5MCkiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJNMjAuNDY1IDUuNzZzLjI3LS44LS4zMS0xLjM2Yy0
 uNTMtLjUyLTEuMjItLjI0LTEuMjItLjI0LS42MS4zLTUuNzYgMy40Ny03LjY3IDUuNTctLjg2Ljk2LTIuMDYgMy43OS0xLjA5IDQuODIuOTIgLjk4IDMuOTYtLjE3IDQuNzktMSAyLjA2LTIuMDYgNS4yMS03LjE3IDUuNS03Ljc5ek0zLjUzNSAxOS44NGMyLjM3LTEuNTYgMS40Ni0zLjQxIDMuMjMtNC42NC45My0uNjUgMi4yMi0uNjIgMy4wOC4yOSAuNjMuNjcgLjggMi41Ny0uMTYgMy40Ni0xLjU3IDEuNDUtNCAxLjU1LTYuMTUuODl6Ij48L3BhdGg+PC9zeW1ib2w+PHVzZSBocmVmPSIjcGF0aDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOSI+PC91c2U+PC9zdmc+),
 url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOTYgOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYmdGaWxsR3JhZDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOSIgeDE9IjAuNSIgeTE9IjEiIHgyPSIwLjUiIHkyPSIwIj48c3RvcCBzdG9wLWNvbG9yPSIjMDEzMEZGIiBvZmZzZXQ9IjAiPjwvc3RvcD48c3RvcCBzdG9wLWNvbG9yPSIjM0NCNEZGIiBvZmZzZXQ9IjEiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Zz48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iODgiIGhlaWdodD0iODgiIHJ4PSI4LjgiIGZpbGw9InVybCgjYmdGaWxsR3JhZDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOSkiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIwIj48L3JlY3Q+PC9nPjwvc3ZnPg==);

 }}}


 Which in the frontend (after sanitization) results in


 {{{
 background-image: url('data:image/svg+xml;
 }}}


 In ideal case it should not add the backgroud-image style as `data`
 protocol isn't allowed by default in WP. If the protocol is allowed with
 the filter


 {{{
 add_filter( 'kses_allowed_protocols', function ( $protocols ) {
         return array_merge( $protocols, array( 'data' ) );
 } );
 }}}


 it should render properly but results in the same output


 {{{
 background-image: url('data:image/svg+xml;
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63162>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform