[wp-trac] [WordPress Trac] #63149: safecss_filter_attr does not support base64 SVG image in background-image.

[WordPress Trac]

#63149: safecss_filter_attr does not support base64 SVG image in background-image.
-------------------------------------------------+-------------------------
 Reporter:  jamal59                              |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Formatting                           |     Version:  6.7.2
 Severity:  normal                               |  Resolution:
 Keywords:  2nd-opinion has-patch has-unit-      |     Focuses:
  tests                                          |
-------------------------------------------------+-------------------------

Comment (by SirLouen):

 Replying to [comment:4 jamal59]:
 > Also, I saw in the link below that if SVG is used as CSS background-
 image, the browser won't execute the JavaScript code inside it, I don't
 know how accurate or technical it is.
 > http://www.schepers.cc/svg/blendups/embedding.html

 I think that the security issue depends on the browser, we cannot control
 which browser is using the user, and generally WP tends to maintain a big
 degree of compatibility with most browsers. And still I'm not confident if
 there is actually a protection for this in the code, it's just an
 hypothesis.

 > Hi, Thank you @SirLouen, If I use a PNG or GIF image instead of SVG, the
 function still doesn't work properly.

 About base64 images in general, I've tested with this base64 image in the
 background:
 [[Image(https://i.imgur.com/cN7qeh5.png)]]

 And it renders adequately

 [[Image(https://i.imgur.com/6a4yMf0.png)]]

 The code block I used in the example

 {{{
 <!-- wp:media-text
 {"mediaId":null,"mediaType":"image","imageFill":true,"focalPoint":{"x":"0.75","y":"0.72"}}
 -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-
 fill"><figure class="wp-block-media-text__media" style="background-image:
 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR
 8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII
 =");background-position:75% 72%"><img
 src="https://developers.elementor.com/docs/assets/img/elementor-
 placeholder-image.png' alt="" /></figure><div class="wp-block-media-
 text__content"><!-- wp:paragraph
 {"placeholder":"Content…","fontSize":"medium"} -->
 <p class="has-medium-font-size">"<a rel="noreferrer noopener"
 href="https://www.rawpixel.com/image/430579/free-photo-image-palm-tree-
 palm-africa" target="_blank">Palm trees at Cape Town, South Africa</a>" by
 Scott Webb is marked with <a rel="noreferrer noopener"
 href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse"
 target="_blank">CC0 1.0</a>.</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
 }}}

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