Make WordPress Core

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)

#1 @westonruter
5 months ago

  • Keywords needs-patch added
  • Milestone Awaiting Review7.1
  • Version trunk

@dannyreaktiv Thank you. This makes sense, also considering that other such positional properties are allowed, including position, top, and z-index.

Do you want to work on a PR?

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-name
  • anchor-scope
  • position-anchor
  • position-area
  • position-try
  • position-try-fallbacks
  • position-try-order
  • position-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:

  1. The anchor positioning properties are not in the safe_style_css allowlist.
  2. The anchor() and anchor-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_css allowlist: anchor-name, anchor-scope, position-anchor, position-area, position-try, position-try-fallbacks, position-try-order, position-visibility.
  • Add anchor and anchor-size to the allowed CSS functions, handled the same way as the existing var()/calc()/clamp() allowlist. Unknown functions such as expression() are still stripped, so sanitization is not weakened.
  • Update the @since docblock.
  • Add regression tests covering the properties, the anchor()/anchor-size() functions (including nesting inside calc()), 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-develop Docker 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

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


5 weeks ago

#8 @adrianduffell
5 weeks ago

  • Keywords early added
  • Milestone 7.17.2

This was discussed in today's bug scrub. It has a PR ready for review but I’d like to punt this since RC 1 is due in a few days time. It looks valuable to fix soon, so tagging with early for consideration in 7.2.

Note: See TracTickets for help on using tickets.