Allowlist more modern, safe CSS 3 rules in HTMLPurifier

[Kristina Hoeppner]

HTML purifier is stripping out border styles, e.g. <img style="border-radius:50%;"> which would allow images to be displayed in a circle without having to crop the image itself.

It would be good to allow more modern CSS3 rules.

Looking at what had been done for skins in bug #1264098 might help.

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/11547

[Gold (gold.catalyst)]

Enable the 'CSS.Proprietary' config in HTMLPurifier.

For security reasons disable opacity parameters using 'CSS.ForbiddenProperties'.

To test border radius works:

1 Add a Text block to a page
2 Add an image via the WYSIWYG button
3 Open Image formatting options in the modal popup
4 In 'Style (CSS)' enter "border-radius: 50%;" (without the quotes)
5 Submit the image form
6 Check that the image is circular (or oval depending on aspect ratio)
7 Save the block
8 Check that the image in the block is circular (or oval depending on aspect ratio)
9 Display the page
10 Check that the image in the block is circular (or oval depending on aspect ratio)

To test that Opacity has not been introduced.

1 Configure the block
2 Click the image and then click the Insert/edit image button
3 Open the Image formatting options and set the Style
  * Test with each of the following image styles:
  * "border-radius: 50%; -khtml-opacity:.50;"
  * "border-radius: 50%; -moz-opacity:.50;"
  * "border-radius: 50%; opacity:.50;"
  * Note: TinyMCE does display opacity
5 Save the block
6 The saved block should not have an opacity on the image
7 Configure the block
8 Click the image and then click the Insert/edit image button
9 Open the Image formatting options
10 Check the opacity style has been removed from the Style field.

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/11547
Committed: https://git.mahara.org/mahara/mahara/commit/cb432471e3e78b94b7113ad650685d8cdcd5c919
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit cb432471e3e78b94b7113ad650685d8cdcd5c919
Author: Gold <email address hidden>
Date: Fri Feb 12 15:15:05 2021 +1300

Bug 1843154: Allowlist more modern, CSS 3 rules

CSS.Proprietary enabled.

Added the following opacity related parameters to the
CSS.ForbiddenProperties:

* -moz-opacity
* -khtml-opacity
* filter
* opacity

For security reasons disable opacity parameters using
'CSS.ForbiddenProperties'.

Change-Id: I92275da57800b253ef88cf0d5413e1340599fdfd