KSES: Allow calc() and var() values to be used in inline CSS.

Props aristath, displaynone, joyously, olafklejnstrupjensen, sabernhardt, jamesbonham, poena.
Fixes #46197, #46498.

git-svn-id: https://develop.svn.wordpress.org/trunk@50923 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
2021-05-17 21:03:56 +00:00
parent 15dffe06c8
commit 8e498a8314
2 changed files with 40 additions and 1 deletions

View File

@@ -2172,6 +2172,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
* Extend `background-*` support of individual properties.
* @since 5.3.1 Added support for gradient backgrounds.
* @since 5.7.1 Added support for `object-position`.
* @since 5.8.0 Added support for `calc()` and `var()` values.
*
* @param string[] $attr Array of allowed CSS attributes.
*/
@@ -2381,7 +2382,13 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
}
if ( $found ) {
// Check for any CSS containing \ ( & } = or comments, except for url() usage checked above.
// Allow CSS calc().
$css_test_string = preg_replace( '/calc\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
// Allow CSS var().
$css_test_string = preg_replace( '/\(?var\(--[a-zA-Z0-9_-]*\)/', '', $css_test_string );
// Check for any CSS containing \ ( & } = or comments,
// except for url(), calc(), or var() usage checked above.
$allow_css = ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string );
/**

View File

@@ -1212,6 +1212,8 @@ EOF;
* @dataProvider data_kses_style_attr_with_url
*
* @ticket 45067
* @ticket 46197
* @ticket 46498
*
* @param $input string The style attribute saved in the editor.
* @param $expected string The sanitized style attribute.
@@ -1287,6 +1289,24 @@ EOF;
'background: red',
),
// CSS calc().
array(
'width: calc(2em + 3px)',
'width: calc(2em + 3px)',
),
// CSS variable.
array(
'padding: var(--wp-var1) var(--wp-var2)',
'padding: var(--wp-var1) var(--wp-var2)',
),
// CSS calc() with var().
array(
'margin-top: calc(var(--wp-var1) * 3 + 2em)',
'margin-top: calc(var(--wp-var1) * 3 + 2em)',
),
/*
* Invalid use cases.
*/
@@ -1350,6 +1370,18 @@ EOF;
'background-image: url( "http://example.com );',
'',
),
// Malformed calc, no closing `)`.
array(
'width: calc(3em + 10px',
'',
),
// Malformed var, no closing `)`.
array(
'width: var(--wp-var1',
'',
),
);
}