From 9737e5fdc3ecf906f82363bf247b85ee47b9e417 Mon Sep 17 00:00:00 2001 From: Sergey Biryukov Date: Thu, 28 Nov 2019 00:27:21 +0000 Subject: [PATCH] KSES: Add support for gradient backgrounds. Props jorgefilipecosta. Fixes #48376. git-svn-id: https://develop.svn.wordpress.org/trunk@46793 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/kses.php | 24 ++++++++++++++++-- tests/phpunit/tests/kses.php | 48 ++++++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/kses.php b/src/wp-includes/kses.php index 9c57c3a8e5..846c2dc2be 100644 --- a/src/wp-includes/kses.php +++ b/src/wp-includes/kses.php @@ -2073,6 +2073,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) { * @since 5.2.0 Added support for `background-position` and `grid-template-columns` * @since 5.3.0 Added support for `grid`, `flex` and `column` layout properties. * Extend `background-*` support of individual properties. + * @since 5.3.1 Added support for gradient backgrounds. * * @param string[] $attr Array of allowed CSS attributes. */ @@ -2209,6 +2210,15 @@ function safecss_filter_attr( $css, $deprecated = '' ) { 'list-style-image', ); + /* + * CSS attributes that accept gradient data types. + * + */ + $css_gradient_data_types = array( + 'background', + 'background-image', + ); + if ( empty( $allowed_attr ) ) { return $css; } @@ -2223,6 +2233,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) { $css_test_string = $css_item; $found = false; $url_attr = false; + $gradient_attr = false; if ( strpos( $css_item, ':' ) === false ) { $found = true; @@ -2231,8 +2242,9 @@ function safecss_filter_attr( $css, $deprecated = '' ) { $css_selector = trim( $parts[0] ); if ( in_array( $css_selector, $allowed_attr, true ) ) { - $found = true; - $url_attr = in_array( $css_selector, $css_url_data_types, true ); + $found = true; + $url_attr = in_array( $css_selector, $css_url_data_types, true ); + $gradient_attr = in_array( $css_selector, $css_gradient_data_types, true ); } } @@ -2261,6 +2273,14 @@ function safecss_filter_attr( $css, $deprecated = '' ) { } } + if ( $found && $gradient_attr ) { + $css_value = trim( $parts[1] ); + if ( preg_match( '/^(repeating-)?(linear|radial|conic)-gradient\(([^()]|rgb[a]?\([^()]*\))*\)$/', $css_value ) ) { + // Remove the whole `gradient` bit that was matched above from the CSS. + $css_test_string = str_replace( $css_value, '', $css_test_string ); + } + } + // Remove any CSS containing containing \ ( & } = or comments, except for url() useage checked above. if ( $found && ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string ) ) { if ( $css != '' ) { diff --git a/tests/phpunit/tests/kses.php b/tests/phpunit/tests/kses.php index 051897c07f..fe82097f93 100644 --- a/tests/phpunit/tests/kses.php +++ b/tests/phpunit/tests/kses.php @@ -752,7 +752,9 @@ EOF; /** * Testing the safecss_filter_attr() function. * + * @ticket 37248 * @ticket 42729 + * @ticket 48376 * @dataProvider data_test_safecss_filter_attr * * @param string $css A string of CSS rules. @@ -878,6 +880,52 @@ EOF; 'css' => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px', 'expected' => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px', ), + // Gradients introduced in 5.3. + array( + 'css' => 'background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', + 'expected' => 'background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', + ), + array( + 'css' => 'background: linear-gradient(135deg,rgba(6,147,227,1) ) (0%,rgb(155,81,224) 100%)', + 'expected' => '', + ), + array( + 'css' => 'background-image: linear-gradient(red,yellow);', + 'expected' => 'background-image: linear-gradient(red,yellow)', + ), + array( + 'css' => 'color: linear-gradient(red,yellow);', + 'expected' => '', + ), + array( + 'css' => 'background-image: linear-gradient(red,yellow); background: prop( red,yellow); width: 100px;', + 'expected' => 'background-image: linear-gradient(red,yellow);width: 100px', + ), + array( + 'css' => 'background: unknown-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', + 'expected' => '', + ), + array( + 'css' => 'background: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', + 'expected' => 'background: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', + ), + array( + 'css' => 'width: 100px; height: 100px; background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);', + 'expected' => 'width: 100px;height: 100px;background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)', + ), + array( + 'css' => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%);', + 'expected' => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%)', + ), + array( + 'css' => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%);', + 'expected' => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%)', + ), + array( + 'css' => 'background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%)', + 'expected' => 'background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%)', + ), + ); }