Skip to content

Commit 3e19b4e

Browse files
t-hamanot-hamano
committed
KSES: Add support for rgb(a) color
1 parent d3b793f commit 3e19b4e

2 files changed

Lines changed: 124 additions & 0 deletions

File tree

‎src/wp-includes/kses.php‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2756,6 +2756,28 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
27562756
'list-style-image',
27572757
);
27582758

2759+
/*
2760+
* CSS attributes that accept rgb(a) color data types.
2761+
*
2762+
*/
2763+
$css_color_data_types = array(
2764+
'color',
2765+
2766+
'border',
2767+
'border-color',
2768+
'border-right',
2769+
'border-right-color',
2770+
'border-bottom',
2771+
'border-bottom-color',
2772+
'border-left',
2773+
'border-left-color',
2774+
'border-top',
2775+
'border-top-color',
2776+
2777+
'background',
2778+
'background-color', 1
2779+
);
2780+
27592781
/*
27602782
* CSS attributes that accept gradient data types.
27612783
*
@@ -2779,6 +2801,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
27792801
$css_test_string = $css_item;
27802802
$found = false;
27812803
$url_attr = false;
2804+
$color_attr = false;
27822805
$gradient_attr = false;
27832806
$is_custom_var = false;
27842807

@@ -2798,6 +2821,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
27982821
$found = true;
27992822
$url_attr = in_array( $css_selector, $css_url_data_types, true );
28002823
$gradient_attr = in_array( $css_selector, $css_gradient_data_types, true );
2824+
$color_attr = in_array( $css_selector, $css_color_data_types, true );
28012825
}
28022826

28032827
if ( $is_custom_var ) {
@@ -2840,6 +2864,16 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
28402864
}
28412865
}
28422866

2867+
if ( $found && $color_attr ) {
2868+
$css_value = trim( $parts[1] );
2869+
$comma_syntax = '/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i';
2870+
$space_syntax = '/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i';
2871+
2872+
if ( preg_match( $comma_syntax, $css_value ) || preg_match( $space_syntax, $css_value ) ) {
2873+
$css_test_string = str_replace( $css_value, '', $css_test_string );
2874+
}
2875+
}
2876+
28432877
if ( $found ) {
28442878
/*
28452879
* Allow CSS functions like var(), calc(), etc. by removing them from the test string.

‎tests/phpunit/tests/kses.php‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1203,6 +1203,31 @@ public function data_safecss_filter_attr() {
12031203
'css' => 'height: expression( body.scrollTop + 50 + "px" )',
12041204
'expected' => '',
12051205
),
1206+
// RGBA background color are allowed.
1207+
array(
1208+
'css' => 'background-color: rgba(0,0,0,0)',
1209+
'expected' => 'background-color: rgba(0,0,0,0)',
1210+
),
1211+
array(
1212+
'css' => 'background-color: rgba(0, 0, 0, 0)',
1213+
'expected' => 'background-color: rgba(0, 0, 0, 0)',
1214+
),
1215+
array(
1216+
'css' => 'background-color: rgba(100, 100, 100, 0)',
1217+
'expected' => 'background-color: rgba(100, 100, 100, 0)',
1218+
),
1219+
array(
1220+
'css' => 'background-color: rgba(10%, 10%, 10%, 0)',
1221+
'expected' => 'background-color: rgba(10%, 10%, 10%, 0)',
1222+
),
1223+
array(
1224+
'css' => 'background-color: rgba(0, 0, 0, 0.1)',
1225+
'expected' => 'background-color: rgba(0, 0, 0, 0.1)',
1226+
),
1227+
array(
1228+
'css' => 'background-color: rgba(0, 0, 0, .1)',
1229+
'expected' => 'background-color: rgba(0, 0, 0, .1)',
1230+
),
12061231
// RGB color values are not allowed.
12071232
array(
12081233
'css' => 'color: rgb( 100, 100, 100 )',
@@ -1333,6 +1358,71 @@ public function data_safecss_filter_attr() {
13331358
'css' => 'gap: 10px;column-gap: 5px;row-gap: 20px',
13341359
'expected' => 'gap: 10px;column-gap: 5px;row-gap: 20px',
13351360
),
1361+
// RGB color.
1362+
array(
1363+
'css' => 'color: rgb(255, 0, 0)',
1364+
'expected' => 'color: rgb(255, 0, 0)',
1365+
),
1366+
array(
1367+
'css' => 'color: rgb(255 0 0)',
1368+
'expected' => 'color: rgb(255 0 0)',
1369+
),
1370+
array(
1371+
'css' => 'color: rgb(100%, 0%, 50%)',
1372+
'expected' => 'color: rgb(100%, 0%, 50%)',
1373+
),
1374+
array(
1375+
'css' => 'color: rgb(255, 50%, 0)',
1376+
'expected' => 'color: rgb(255, 50%, 0)',
1377+
),
1378+
// RGBA color.
1379+
array(
1380+
'css' => 'color: rgba(255, 128, 0, 0.5)',
1381+
'expected' => 'color: rgba(255, 128, 0, 0.5)',
1382+
),
1383+
array(
1384+
'css' => 'color: rgb(255 128 0 / 50%)',
1385+
'expected' => 'color: rgb(255 128 0 / 50%)',
1386+
),
1387+
// RGB color with extra whitespace.
1388+
array(
1389+
'css' => 'color: rgb( 255 , 128 , 0 )',
1390+
'expected' => 'color: rgb( 255 , 128 , 0 )',
1391+
),
1392+
// RGB background color.
1393+
array(
1394+
'css' => 'background-color: rgb(200, 100, 50)',
1395+
'expected' => 'background-color: rgb(200, 100, 50)',
1396+
),
1397+
// RGBA border color.
1398+
array(
1399+
'css' => 'border-color: rgba(100, 200, 300, 0.8)',
1400+
'expected' => 'border-color: rgba(100, 200, 300, 0.8)',
1401+
),
1402+
// Malformed RGB color, invalid number of values.
1403+
array(
1404+
'css' => 'color: rgb(255, 128, 0, 0.5, 100)',
1405+
'expected' => '',
1406+
),
1407+
array(
1408+
'css' => 'color: rgb(255, 128)',
1409+
'expected' => '',
1410+
),
1411+
// Malformed RGB color, non-numeric values.
1412+
array(
1413+
'css' => 'color: rgb(red, green, blue)',
1414+
'expected' => '',
1415+
),
1416+
// Malformed RGB color, unmatched parentheses.
1417+
array(
1418+
'css' => 'color: rgb(255, 128, 0',
1419+
'expected' => '',
1420+
),
1421+
// Malformed RGB color, empty values.
1422+
array(
1423+
'css' => 'color: rgb(, , )',
1424+
'expected' => '',
1425+
),
13361426
// Margin and padding logical properties introduced in 6.1.
13371427
array(
13381428
'css' => 'margin-block-start: 1px;margin-block-end: 2px;margin-inline-start: 3px;margin-inline-end: 4px;',

0 commit comments

Comments
 (0)