Make WordPress Core

Opened 3 years ago

Last modified 2 months ago

#55543 new enhancement

`add_menu_page` incorrectly requires SVG icon data URIs be base64 encoded

Reported by: peterwilsoncc's profile peterwilsoncc Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch
Focuses: Cc:

Description

To determine if a developer is using an SVG in a menu, add_menu_page checks for a string beginning with data:image/svg+xml;base64,.

SVGs aren't required to be base64 encoded and encoding with base64 can increase the size of the attribute.

The check ought to be modified to allow for additional encodings.

Change History (2)

#1 @sabernhardt
2 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

This ticket was mentioned in PR #8304 on WordPress/wordpress-develop by @sahilgidwani.


2 months ago
#2

  • Keywords has-patch added; needs-patch removed

Trac Ticket: https://core.trac.wordpress.org/ticket/55543

## Allow Additional Encodings for SVGs in add_menu_page

This PR improves the handling of SVGs in add_menu_page by allowing additional encoding formats beyond Base64. Previously, the function only checked for data:image/svg+xml;base64,, but SVGs don’t need to be Base64-encoded. This update introduces support for data:image/svg+xml;utf8, encoding and provides a more flexible approach to validating and sanitizing SVGs.

### Changes Introduced

  • Extended Encoding Support:
    • Added support for data:image/svg+xml;utf8, SVG encoding.
    • Ensures proper sanitization and rendering of inline SVGs.
  • Enhanced SVG Sanitization:
    • Created a more comprehensive list of allowed SVG attributes and elements, including common tags like <g>, <path>, <circle>, <text>, and gradients.
    • Uses wp_kses_allowed_html( 'post' ) as the base and extends it with the new SVG attributes.
  • Improved Rendering & Styling:
    • Introduced a wrapper <div class="inline-svg-container"> to encapsulate the inline SVGs.
    • Added CSS styles to ensure proper scaling and display inside the WordPress admin menu.

### Why This Change?

  • More Efficient & Flexible SVG Handling:
    • Avoids unnecessary Base64 encoding, which increases the file size and reduces readability.
    • Ensures WordPress menus can support different encoding methods for SVGs.
  • Security & Compatibility:
    • The SVG sanitization method (wp_kses) ensures safe and controlled rendering of inline SVGs.
    • Maintains backward compatibility while expanding support for other encoding types.

### Potential Impact & Compatibility

  • No breaking changes—existing Base64-encoded SVGs will continue to work.
  • Enhances compatibility for developers using inline SVGs in WordPress menus.
Note: See TracTickets for help on using tickets.