Opened 5 months ago
Last modified 5 weeks ago
#64972 new defect (bug)
safe_style_css missing anchor position properties
| Reported by: | dannyreaktiv | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.2 |
| Component: | General | Version: | |
| Severity: | normal | Keywords: | has-patch has-unit-tests early |
| Cc: | Focuses: | css |
Description
The safecss_filter_attr() functino and safe_style_css filter are missing anchor position CSS properties
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning
Change History (8)
This ticket was mentioned in PR #11419 on WordPress/wordpress-develop by @deepakprajapati.
5 months ago
#2
- Keywords has-patch has-unit-tests added; needs-patch removed
## Summary
This updates safecss_filter_attr() to allow CSS anchor positioning properties in the safe_style_css allowlist.
Added properties:
anchor-nameanchor-scopeposition-anchorposition-areaposition-tryposition-try-fallbacksposition-try-orderposition-visibility
A regression test was also added to cover the new properties.
Trac ticket: https://core.trac.wordpress.org/ticket/64972
## Use of AI Tools
AI assistance: Yes
Tool(s): Codex
Model(s): GPT-5
This ticket was mentioned in PR #12337 on WordPress/wordpress-develop by @dhrupo.
2 months ago
#3
## Summary
Allow CSS anchor positioning in safecss_filter_attr() so it is no longer stripped from style attributes filtered through KSES.
## Problem
On trunk, every anchor positioning declaration is stripped:
safecss_filter_attr( 'anchor-name: --tooltip' ); // '' safecss_filter_attr( 'position-anchor: --tooltip' ); // '' safecss_filter_attr( 'top: anchor(--tooltip bottom)' ); // '' safecss_filter_attr( 'width: anchor-size(--tooltip width)' ); // ''
This is two separate gaps:
- The anchor positioning properties are not in the
safe_style_cssallowlist. - The
anchor()andanchor-size()functions are not in the allowlist of CSS functions.safecss_filter_attr()rejects any declaration whose value still contains a function call after the known functions (var,calc,min,max,minmax,clamp,repeat) are removed.
## Why a properties-only fix is not enough
There is an existing PR, #11419, which adds the anchor positioning properties only. That is necessary but not sufficient: anchor positioning is driven by the anchor() and anchor-size() functions used in standard inset and sizing properties (e.g. top: anchor(--tooltip bottom), width: anchor-size(--tooltip width)). Because those functions are not allowlisted, such declarations are still stripped, so the feature remains unusable after #11419, and its test only exercises simple values such as position-area: top so the gap is not caught.
This PR is a superset of #11419: it adds the same properties and the anchor() / anchor-size() functions, with tests that cover the function usage.
## Changes
- Add the anchor positioning properties to the
safe_style_cssallowlist:anchor-name,anchor-scope,position-anchor,position-area,position-try,position-try-fallbacks,position-try-order,position-visibility. - Add
anchorandanchor-sizeto the allowed CSS functions, handled the same way as the existingvar()/calc()/clamp()allowlist. Unknown functions such asexpression()are still stripped, so sanitization is not weakened. - Update the
@sincedocblock. - Add regression tests covering the properties, the
anchor()/anchor-size()functions (including nesting insidecalc()), and that an unknown function is still rejected.
## Testing instructions
phpunit --filter Tests_Kses tests/phpunit/tests/kses.php
Or manually:
// Before this change all of these return ''. After, each is preserved: safecss_filter_attr( 'anchor-name: --tooltip' ); safecss_filter_attr( 'top: anchor(--tooltip bottom)' ); safecss_filter_attr( 'width: anchor-size(--tooltip width)' ); safecss_filter_attr( 'margin-left: calc(anchor-size(width) / 2)' ); // Still stripped (sanitization preserved): safecss_filter_attr( 'width: expression(alert(1))' ); // ''
## Relationship to #11419
This supersedes #11419, which only allowlists the properties. If preferred, the property list here could instead be merged into #11419 and this PR reduced to the function allowlist — happy to coordinate either way.
## Use of AI Tools
- AI assistance: Yes
- Tool(s): Claude Code
- Model(s): Claude Opus 4.8
- Used for: Root-cause analysis (identifying the function-allowlist gap missed by the properties-only patch), drafting the change and the PHPUnit tests. All changes were reviewed, reproduced against trunk in the
wordpress-developDocker environment, and verified with PHPUnit and PHPCS by me.
This ticket was mentioned in Slack in #core by adrianduffell. View the logs.
7 weeks ago
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
6 weeks ago
@wildworks commented on PR #12337:
6 weeks ago
#6
Closing this in favor of #11419
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
@dannyreaktiv Thank you. This makes sense, also considering that other such positional properties are allowed, including
position,top, andz-index.Do you want to work on a PR?