inline block styles being stripped by kses

[Daniel Berdal]

Daniel Berdal

May 21, 2020 at 3:14 pm

I’m using wordpress multisite, and wordpress uses different sanitizing for Super-Admin vs Administrator. I’m guessing there are similar differences on standard wordpress between Administrator and Author for example, but I haven’t tested yet.

For regular Administrators all HTML is run through the kses filter… which by default strips out SVG, and inline style elements like box shadow, opacity, fill…
All of that can be overridden by filtering, for example:

add_filter( 'wp_kses_allowed_html', function( $tags ) {

$tags['svg'] = array(
'xmlns' => array(),
'fill' => array(),
'viewbox' => array(),
'role' => array(),
'aria-hidden' => array(),
'focusable' => array(),
'preserveaspectratio' => array(),
'style' => array(),
);
$tags['path'] = array(
'd' => array(),
'fill' => array(),
);

return $tags;

}, 10, 2);

add_filter( 'safe_style_css', function( $allowed_styles ) {

$custom_styles = [ 'box-shadow', 'border-color', 'background','fill','opacity','left','right','bottom','top','padding','color','margin','mad-width', ];
return array_merge($allowed_styles, $custom_styles);

}, 10, 2);

One notable problem though is that anything with parantheses is still stripped out, for example rgba and rgba colors…

*Login to see link
*Login to see link

Anyone who bypasses kses… like Super-Admin or Standard WordPress Administrator would never experience this issue.

I checked what ultimate gutenberg is doing, and it looks like they are doing something creative with their background colors

{"classMigrate":true,"block_id":"b8d47095-89b8-4dc4-806f-3343e12fb7b9","backgroundType":"gradient","gradientColor1":"#DE9DA7","gradientColor2":"#FFCAD4","gradientLocation1":52,"gradientLocation2":94,"gradientAngle":88,"backgroundOpacity":29}

to avoid being stripped out by kses… maybe they did it for a different reason, but either way it is making it through.

Their SVG dividers are being removed through, unless you use the kses filters.

The “unfiltered_html” permission should allow users to bypass kses filtering, but for some reason Gutenberg does not appear to be respecting that permission…. and it’s not a great solution since really all we want is to allow some inline CSS not any random bit of Javascript.

Curious if you’ve dealt with this before, and any ideas on a solution