safecss_filter_attr doesn't allow rgb() in inline styles

[joehoyle]

I thought there should be a ticket somewhere, but I couldn't find it!

So, safecss_filter_attr (which is used in wp_kses etc, does not allow inline styles that include rgba() etc, like his:

<span style="background: rgb(0,0,0)"></span>

I am not sure if this is intended, though not sure why it would be, there is a comment in safecss_filter_attr

if ( preg_match( '%[\\(&=}]|/\*%', $css ) ) // remove any inline css containing \ ( & } = or comments

[ericlewis]

Introduced in [11689], related: #10336

[joehoyle]

I wanted to open the discussion up to what css should be supported, and what is deemed insecure. AFAIK css expression as the main reason for this restriction, whereas there are a lot of CSS values that are currently not allowed due to the stripping of (, e.g. bg image urls, gradients, other css 3 "functions", rgb(a), hsla to name some.

I was going to write a patch to whitelist rgb for this ticket, however, if css expressions ​http://webfx.eae.net/dhtml/cssexpr/cssexpr.html are the only issue (which I believe are only available in <= IE7) then does it make more sense to blacklist "expression" rather than trying to write complex regex to whitelist the others?

[joehoyle]

Unit tests for safecss_filter_attr

[nacin]

It seems to me like safecss_filter_attr() is pretty ancient and probably due for an upgrade, but that it's possible that a proper upgrade to be safe yet expansive in features would require a huge and slow library. I'm curious myself.

Thanks for the unit tests. We may be able to work around rgb(a), at the very least.

The folks who work on WordPress.com probably have the most experience with safe CSS, given their feature set. Flagging westi et al.

[postpostmodern]

I recently had safecss_filter_attr() fail when trying to embed an html 'Large Button' from iTunes linkmaker, the issue was an inline media query containing curly brackets. Which, is probably not a good practice, but it seems like it should be able to pass nonetheless. For reference, the style generated from ​https://linkmaker.itunes.apple.com/us/ which fails is

style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/htmlResources/assets/en_us//images/web/linkmaker/badge_itunes-lrg.png) no-repeat;width:110px;height:40px;@media only screen{background-image:url(https://linkmaker.itunes.apple.com/htmlResources/assets/en_us//images/web/linkmaker/badge_itunes-lrg.svg);}"

[bendog]

Still an issue in 4.2.2

I'm trying to allow some advanced comment editing for a blog's members. Most works except rgb(a) colour overrides.

[paulschreiber]

See related #37134 (with proposed filter/patch).

[paulschreiber]

Still an issue in 5.3.2.

[adamsilverstein]

The filter being added in https://core.trac.wordpress.org/ticket/37134 will enable altering the regex to avoid stripping parentheses.

[swissspidy]

I added rgb(a) support in a forked version of this function for one of my projects. I'll see if I can add a patch for it here.

• Added support for rgb() and rgba() values.
• Added support for display, position, top, left, transform, opacity, white-space, clip-path, -webkit-clip-path, pointer-events and will-change properties.

Trac ticket: https://core.trac.wordpress.org/ticket/24157

[markparnell]

#56196 was marked as a duplicate.

[wildworks]

I was trying to solve the issue of rgb(a) values ​​not being allowed in the Gutenberg project: ​https://github.com/WordPress/gutenberg/pull/62207

I was looking for tickets to see if this could be fixed in core, and came across this ticket.

Currently, in core, rgb(a) values ​​are allowed only for gradient backgrounds, as of [46794].

With this in mind, can we move this ticket forward to allow rgb(a) values ​​for other properties, or all properties? I think we might be able to use some of the patch already attached.