Make WordPress Core

Opened 5 years ago

Closed 3 years ago

Last modified 2 years ago

#46197 closed defect (bug) (fixed)

safecss_filter_attr remove styles with calc()

Reported by: displaynone's profile displaynone Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Formatting Keywords: has-patch
Focuses: Cc:


I have a shortcode inside a tag attribute:

<a style="color:#d0c900; width: calc([myshortcode]% *10*1 );">

Executing do_shortcode returns:

<a style="color:#d0c900;">

Debuging safecss_filter_attr I found that if the attribute contains a parentheses, the method ignores it. So using: calc( 100% - 20px ) is not allowed

Change History (10)

#1 @joyously
5 years ago

There are quite a few valid things that would get removed. Gradients and filters and var can also have parentheses, not to mention data URIs or content values.

But what is odd is that the $allowed_attr is filtered, and if empty, no other change is made to the $css. Only if it has something is the $css further manipulated. This seems backward.

#2 @pento
5 years ago

  • Version trunk deleted

This ticket was mentioned in Slack in #core by soderlind. View the logs.

5 years ago

#4 @SergeyBiryukov
5 years ago

  • Component changed from General to Formatting

This ticket was mentioned in PR #1260 on WordPress/wordpress-develop by aristath.

3 years ago

  • Keywords has-patch added

This patch allows using ( in CSS sanitized using the safecss_filter_attr function.
The original regex was created more than a decade ago, and back then we didn't have things like calc(), var() etc - so disallowing ( made sense. This is no longer the case.

Trac ticket:

This also fixes in Gutenberg, as well as

#6 @poena
3 years ago

  • Milestone changed from Awaiting Review to 5.8

#7 @SergeyBiryukov
3 years ago

  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#8 @SergeyBiryukov
3 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 50923:

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

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

dream-encode commented on PR #2395:

2 years ago

Thanks for the PR! This was merged into Core in

Note: See TracTickets for help on using tickets.