How to escape dynamic CSS property value

Envato Authors Theme Authors
,
1

Dear Bosses,

I have the following redux dynamic css included by wp_add_inline_style().

// redux dynamic css

global $x_redux_option;
$x_blogpost_overlay_switch = $ x_redux_option [' x_blogpost_overlay_switch];

$x_redux_dynamic_css = '
		.single_post:hover{
		  background: ". if ($x_blogpost_overlay_switch == true): echo $x_blogpost_overlay; endif; ." ;
			-webkit-box-shadow: " . if($x_blogpost_overlay_switch == true): ." 0 1px 10px 0 rgba(251,252,252,0.8) " . endif; ." ; 
			   -moz-box-shadow: " . if($x_blogpost_overlay_switch == true): . " 0 1px 10px 0 rgba(251,252,252,0.8) " . endif; . " ; 
					box-shadow: " . if($x_blogpost_overlay_switch == true): . " 0 1px 10px 0 rgba(251,252,252,0.8) " . endif; . " ;
		}
		';
wp_add_inline_style( 'x-main-style', $x_redux_dynamic_css );

Mentor Themeforest Plugin shows the following error:

All dynamic data must be correctly escaped for the context where it is rendered. at file inc/scripts-styles.php, line 213: background: ā€œ. if ($x_blogpost_overlay_switch == true): echo $x_blogpost_overlay; endif; .ā€ ;

How can I escape this dynamic ( $x_blogpost_overlay ) css property value?

Thanks in advance.

2

There is no specific function for escaping CSS value, but I think CSS can be used inline like this:

<div style="height:100px"

So we could use esc_attr() for CSS, Iā€™m using it and there is no issue

1 Like
3

Hi @anSRThemeAction,

What value should $x_blogpost_overlay have?

Also, to escape any possible data in your theme, do a global search for following string: echo $. You will be rejected every time until you escape all echoed values.

Thanks,
Luca

1 Like
4

The expected value for $x_blogpost_overlay is probably something like url('https://source.com/image.png') #fff no-repeat fixed

So if you esc_attr it you end up with
url(&#039;https://source.com/image.png&#039;) #fff no-repeat fixed
which is no good in <style>...</style> context, but works in <element style="..."> context.

Going with wp_kses_data or wp_kses_post you keep the apostrophes
url('https://source.com/image.png') #fff no-repeat fixed
while still removing exploits such as
url('https://source.com/image.png') #fff no-repeat fixed <script>alert('hello');</script>
gets script tags stripped
url('https://source.com/image.png') #fff no-repeat fixed alert('hello');

ā€“

Just an FYI box-shadow is pretty safe to use without prefix since about 2011
https://caniuse.com/#feat=css-boxshadow

1 Like
5

Thanks much @LucaThemesCom, @websevendev :slight_smile:

Actually the output of $x_blogpost_overlay is color_rgba from redux framework.

And this is an array().

Now how can I escape this?

esc_attr() would be OK?

6

Hi @LucaThemesCom,

The value is color_rgba from redux framwork and is an array.

So now what?