[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 jamal59):

 Replying to [comment:1 SirLouen]:
 > Hello @jamal59,
 > Welcome to Trac
 >
 > I'm assuming that you are trying to santize the css, but there is a
 problem here with SVG: They can contain javascript code being potentially
 dangerous for a XSS attack.
 >
 > Therefore, as far as I know, you should be doing the heavylifting when
 you want to deal with SVG
 > If you still want to permit SVG because you feel they are in a safe
 environment, there a filter called
 [https://developer.wordpress.org/reference/hooks/safe_style_css/
 `safe_style_css`] that might be handy in this situation to "deactivate"
 the `safe_filter_attr` for example for, `background-image`. Then you could
 do the sanitizing by yourself using some placeholders instead of the SVG
 and `str_replace` to put them back after the `safecss_filter_attr`
 >
 > Also, I recommend you to check this plugin's code:
 https://github.com/10up/safe-svg


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

 background-image: url(**'data:image/png;base64,iVBORw0KGgoAAAA**

 The safecss_filter_attr function doesn't work with images of type "inline
 data URI" as CSS background-image, Even if the images are **PNG or GIF**.

 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

 regards

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