KSES: Update CSS properties considered safe for all users.

[peterwilsoncc]

Apart from some minor updates to account for the block editor, the KSES list of allowed CSS properties for authors and contributors has not been updated for quite some time.

Most significantly, not all safe grid and flex box attributes are supported. There are several other new features of CSS missing too.

Reference: ​https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Tasks

• add support for new individual properties implicitly supported by shorthand attributes
• determine what is considered safe

Related #47281, #37248, #45067, #42729.

[peterwilsoncc]

Assigning @marybaum as owner per discussion in ​Slack.

Assigning to future release to assist with triage, once a patch exists it can be moved to a version number.

[marybaum]

Adds properties from CSS-Grid, Flexbox and CSS columns to safe-styles array

[marybaum]

Probably could have named that patch better. 😜
Oh well.

I'm also changing the milestone to 5.2.2 per my conversation with @peterwilsoncc on Slack last week.

#MommasFirstPatch

[peterwilsoncc]

@marybaum

I was unclear when chatting, I was thinking next major release rather next minor. In this case, auto updating KSES is probably fine but I'd prefer to wait until the major release.

I'm sorry but the patch will need a refresh, too. It contains changes to quite a few files rather than just the kses file. I'll reach out to you via Slack to help you with the process.

[marybaum]

This patch has just one file in it.

[marybaum]

@peterwilsoncc I've refreshed the patch with a new one but will leave the workflow as needs-refresh until you've looked at it.

[marybaum]

Many modern CSS properties, many lines, one file!

[marybaum]

New patch!

Would love y'all to look it over, make sure it's right and then commit.

[birgire]

Thanks for the patch @marybaum

I collected a list of grid attributes in #46597 that might be of use here.

Most of them are now already patched in kses-190609.patch​, so I've marked them with an x:

grid
x grid-column
x grid-row
grid-area
x grid-gap
x grid-column-gap
x grid-row-gap
grid-template
grid-template-areas
x grid-template-columns
grid-auto-columns
grid-auto-rows
grid-auto-flow
x grid-column-start
x grid-column-end
x grid-row-start
grid-row-end
x justify-self
x justify-items
x justify-content
x align-self
x align-items
x align-content
place-self
place-content

What do you think about the other ones on the list not marked with x?

In kses-190609.patch​ I noticed there are two new empty lines added in few places. I guess it should only be single ones.

There's also duplicate entry for grid-column-start in kses-190609.patch​

All the best.

[peterwilsoncc]

Some minor coding standards fixes in 47367.diff​. I haven't made any changes to the properties in there

[desrosj]

Can we add a few unit tests for a few of the new properties? Other than that, this is looking good.

@peterwilsoncc are you able to see this one through or confirm it's ready?

[peterwilsoncc]

Flex and columns support are good to go. Grid I am in two minds about.

Attachment with tests incoming.

---

grid, grid-row, grid-column and grid-template-* each accept brackets, eg repeat( 6, 1fr ) which are blocked in KSES. grid additionally accepts \ which KSES doesn't like in CSS either.

This was done in #10336 back in the days of the browser wars, CSS hacks, and IE6 support. @azaozz do you remember the nastiness you were trying to avoid?

None of the characters \() are required for CSS Grid but rather nice to haves. As a result I am not sure if this is good to go with documentation informing users that some grid attributes have limited support or whether it is better to hold off until the next release:

• repeat( 6, 1fr ) can be worked around
• minmax( 1fr, 700px ) less so

As the block editor already uses grid-template-columns, I'm leaning towards merge and document.

[peterwilsoncc]

In 47367.2.diff​

• No support for properties supporting \, grid, grid-column, grid-row. They're long hand only for now.
• Unit tests for various flex and grid properties
• Extended list of supported column layout properties on previous patch
• Removed clip-path and shape-outside because I am undecided as to whether they're safe
• Ignored the brackets problem

[azaozz]

Replying to peterwilsoncc:

This was done in #10336 back in the days of the browser wars, CSS hacks, and IE6 support. @azaozz do you remember the nastiness you were trying to avoid?

That was ...ten years ago! As far as I remember it was a security fix/hardening at the time. The code came from (then separate) WP Multisite.

At the time there were quite a few possibilities for misuse, different for the different browsers and browser versions. Many of these "CSS features" have been removed since then, but some may still be aground.

If we want to remove the restriction seems we will need to add a lot more granular filtering for inline style attributes.

[peterwilsoncc]

Replying to azaozz:

That was ...ten years ago! As far as I remember it was a security fix/hardening at the time. The code came from (then separate) WP Multisite.

At the time there were quite a few possibilities for misuse, different for the different browsers and browser versions. Many of these "CSS features" have been removed since then, but some may still be aground.

If we want to remove the restriction seems we will need to add a lot more granular filtering for inline style attributes.

Thanks, I appreciate the help.

I've thought about this over the last 48 hours. Let's put it in as even in a limited form grid and flex are very helpful for using the block editor to create interesting layouts. A complete lack of support may result in plugin authors enabling unfiltered_html for all users which is problematic in itself.

[peterwilsoncc]

Test all new CSS properties supported.

[peterwilsoncc]

In 46235:

KSES: Add support for modern layout techniques in style attribute.

Adds support for flex, grid and column layout techniques to the list of CSS attributes considered safe for inline CSS. The \ character and CSS functions, eg minmax() are not yet supported.

Extends support of border properties to include border-radius and individual background properties to include all those implicitly supported by the shorthand attribute.

Props mrahmadawais, marybaum, birgire, peterwilsoncc, azaozz.
Fixes #37248.
See #47367.

[desrosj]

I'm going to close this out. I think that everything has been addressed here. @peterwilsoncc if not, can you reopen or open follow up tickets?

[peterwilsoncc]

@desrosj Can do. Supporting functions warrants it's own ticket and I'll set up a 5.4 edition for considering further safe properties.