Skip to content

Icons: Allow additional SVG elements and attributes in the icon sanitizer #13559

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
t-hamano wants to merge 4 commits into from
+155 −26
Closed

Icons: Allow additional SVG elements and attributes in the icon sanitizer #13559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
27b2d08
Icons: Allow stroke attributes and rect/circle elements in the icon S…
t-hamano Sep 16, 2026
706b8a8
Icons: Simplify the allowed attribute lists in the icon SVG sanitizer…
t-hamano Sep 17, 2026
7976fb3
Tests: Improve type declarations and data provider shape in the icon …
t-hamano Sep 17, 2026
b54525e
Icons: Use `non-falsy-string` in the allowed attribute list helper PH…
t-hamano Sep 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 84 additions & 23 deletions src/wp-includes/class-wp-icons-registry.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,40 +240,101 @@ public function unregister( $icon_name ) {
}

/**
* Sanitizes the icon SVG content.
* Builds the allowed attribute list for wp_kses() from attribute names.
*
* @since 7.2.0
*
* Logic borrowed from twentytwenty.
* @see twentytwenty_get_theme_svg
* @param non-falsy-string ...$attribute_names Attribute names to allow.
* @return array<non-falsy-string, true> Attribute names mapped to true.
*/
private function get_allowed_attribute_list( ...$attribute_names ): array {
return array_fill_keys( $attribute_names, true );
}

/**
* Sanitizes the icon SVG content.
*
* @since 7.0.0
*
* @param string $icon_content The icon SVG content to sanitize.
* @return string The sanitized icon SVG content.
*/
protected function sanitize_icon_content( $icon_content ) {
$stroke_attributes = $this->get_allowed_attribute_list(
'style',
'stroke',
'stroke-width',
'stroke-linecap',
'stroke-linejoin',
'stroke-miterlimit',
'vector-effect',
);

$allowed_tags = array(
'svg' => array(
'class' => true,
'xmlns' => true,
'width' => true,
'height' => true,
'viewbox' => true,
'aria-hidden' => true,
'role' => true,
'focusable' => true,
'svg' => array_merge(
$this->get_allowed_attribute_list(
'class',
'xmlns',
'width',
'height',
'viewbox',
'aria-hidden',
'role',
'focusable',
'fill',
'fill-rule',
'clip-rule',
),
$stroke_attributes
),
'path' => array_merge(
$this->get_allowed_attribute_list(
'fill',
'fill-rule',
'clip-rule',
'd',
'opacity',
'transform',
),
$stroke_attributes
),
'path' => array(
'fill' => true,
'fill-rule' => true,
'd' => true,
'transform' => true,
'polygon' => array_merge(
$this->get_allowed_attribute_list(
'fill',
'fill-rule',
'clip-rule',
'points',
'transform',
'focusable',
),
$stroke_attributes
),
'rect' => array_merge(
$this->get_allowed_attribute_list(
'fill',
'fill-rule',
'clip-rule',
'x',
'y',
'width',
'height',
'rx',
'ry',
'transform',
),
$stroke_attributes
),
'polygon' => array(
'fill' => true,
'fill-rule' => true,
'points' => true,
'transform' => true,
'focusable' => true,
'circle' => array_merge(
$this->get_allowed_attribute_list(
'fill',
'fill-rule',
'clip-rule',
'cx',
'cy',
'r',
'transform',
),
$stroke_attributes
),
);
return wp_kses( $icon_content, $allowed_tags );
Expand Down
8 changes: 5 additions & 3 deletions tests/phpunit/tests/icons/wpGetIcon.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,11 @@ public function test_wp_get_icon_custom_size() {
* @ticket 64847
*/
public function test_wp_get_icon_size_null_leaves_dimensions_untouched() {
$output = wp_get_icon( 'core/plus', array( 'size' => null ) );
$this->assertStringNotContainsString( 'width=', $output );
$this->assertStringNotContainsString( 'height=', $output );
$output = wp_get_icon( 'core/plus', array( 'size' => null ) );
$processor = new WP_HTML_Tag_Processor( $output );

@t-hamano t-hamano Sep 16, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test is updated because stroke-width is now preserved, so checking for the width= string would match it. The attributes are inspected directly instead.

$this->assertTrue( $processor->next_tag( 'svg' ) );
$this->assertNull( $processor->get_attribute( 'width' ) );
$this->assertNull( $processor->get_attribute( 'height' ) );
}

/**
Expand Down
66 changes: 66 additions & 0 deletions tests/phpunit/tests/icons/wpIconsRegistry.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,20 @@ private function create_temp_icon_file( $contents, $extension = 'svg' ) {
return $this->temp_file;
}

/**
* Invokes the WP_Icons_Registry::sanitize_icon_content method on the registry instance.
*
* @param string $icon_content The icon SVG content to sanitize.
* @return string The sanitized icon SVG content.
*/
private function sanitize_icon_content( string $icon_content ): string {
$method = new ReflectionMethod( $this->registry, 'sanitize_icon_content' );
if ( PHP_VERSION_ID < 80100 ) {
$method->setAccessible( true );
}
return $method->invoke( $this->registry, $icon_content );
}

/**
* Provides valid namespaced icon names, including names that contain,
* start or end with digits, as well as underscores and hyphens.
Expand Down Expand Up @@ -284,6 +298,58 @@ public function test_register_icon_sanitizes_content() {
$this->assertSame( '<svg viewbox="0 0 24 24"><path d="M0 0" /></svg>', $icon['content'] );
}

/**
* @ticket 65795
*
* @covers ::sanitize_icon_content
*
* @dataProvider data_sanitize_icon_content
*
* @param non-falsy-string $input The icon content to sanitize.
* @param non-falsy-string $expected The expected sanitized output.
*/
public function test_sanitize_icon_content( $input, $expected ) {
$this->assertSame( $expected, $this->sanitize_icon_content( $input ) );
}

/**
* Provides data for {@see self::test_sanitize_icon_content()}.
*
* @return array<non-falsy-string, array{ input: non-falsy-string, expected: non-falsy-string }>
*/
public function data_sanitize_icon_content(): array {
return array(
'allows fill and clip rules on svg' => array(
'input' => '<svg fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M0 0" /></svg>',
'expected' => '<svg fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M0 0" /></svg>',
),
'allows stroke attributes and style on svg' => array(
'input' => '<svg style="fill: none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" vector-effect="non-scaling-stroke"><path d="M0 0" /></svg>',
'expected' => '<svg style="fill: none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" vector-effect="non-scaling-stroke"><path d="M0 0" /></svg>',
),
'allows clip rule, opacity and stroke on path' => array(
'input' => '<svg><path d="M0 0" fill-rule="evenodd" clip-rule="evenodd" opacity="0.4" style="fill: none" stroke="currentColor" vector-effect="non-scaling-stroke" /></svg>',
'expected' => '<svg><path d="M0 0" fill-rule="evenodd" clip-rule="evenodd" opacity="0.4" style="fill: none" stroke="currentColor" vector-effect="non-scaling-stroke" /></svg>',
),
'allows clip rule and stroke on polygon' => array(
'input' => '<svg><polygon points="0,0 1,1" clip-rule="evenodd" stroke="currentColor" vector-effect="non-scaling-stroke" /></svg>',
'expected' => '<svg><polygon points="0,0 1,1" clip-rule="evenodd" stroke="currentColor" vector-effect="non-scaling-stroke" /></svg>',
),
'allows rect' => array(
'input' => '<svg><rect x="4" y="5" width="16" height="14" rx="2" ry="2" fill="currentColor" stroke="currentColor" transform="rotate(45)" vector-effect="non-scaling-stroke" /></svg>',
'expected' => '<svg><rect x="4" y="5" width="16" height="14" rx="2" ry="2" fill="currentColor" stroke="currentColor" transform="rotate(45)" vector-effect="non-scaling-stroke" /></svg>',
),
'allows circle' => array(
'input' => '<svg><circle cx="12" cy="12" r="3" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" transform="rotate(45)" vector-effect="non-scaling-stroke" /></svg>',
'expected' => '<svg><circle cx="12" cy="12" r="3" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" transform="rotate(45)" vector-effect="non-scaling-stroke" /></svg>',
),
'strips opacity on elements other than path' => array(
'input' => '<svg opacity="0.4"><rect width="1" height="1" opacity="0.4" /></svg>',
'expected' => '<svg><rect width="1" height="1" /></svg>',
),
);
}

/**
* Should fail to register an icon that provides both `content` and `file_path`.
*
Expand Down
Loading