allow linear-gradient in background-image html styling within Markdown cells

[gutow]

Description

Styling such as style="background-image:linear-gradient(green,blue);" within the styling of div or other element specified within a markdown cell is not rendered. Plain background images are rendered.

Unless there is a security issue I am unaware of, I think gradient styling should be allowed.

Reproduce

Enter the following in a markdown cell and run it to render:

<div style = "height: 20px; width:100%; background-image:linear-gradient(green,blue);"></div>
<div style = "height: 20px; width:100%; background-color:blue;"></div>

The first will not be shown, but the second will.

Expected behavior

The expected behavior is that the gradient will be rendered.

Context

• Operating System and version: all
• Browser and version: at least Chrome and Firefox
• JupyterLab version: 3.1.1 (latest I could get to launch in Binder from the repositories).

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[fcollonval]

The sanitizer forbids the usage of background-image as it could bring external file through url definition. A way around would be to define an extension that overrides the ISanitizer token by providing a custom sanitizer.

[krassowski]

@fcollonval i don't believe this is the case. Sanitizer does allow background-image. It only does not know that linear-gradient is a valid property because the allowlist was not updated in a long time:

jupyterlab/packages/apputils/src/sanitizer.ts

Line 247 in 047fbe7

background_image: `${CssProp.C.bg_image}(,\\s*${CssProp.C.bg_image})*`,

jupyterlab/packages/apputils/src/sanitizer.ts

Line 117 in 047fbe7

bg_image: `(${CssProp.B.url}|${CssProp._C1.image_list})|none`,

For context:

jupyterlab/packages/apputils/src/sanitizer.ts

Lines 14 to 15 in 047fbe7

	* The regular expressions are largly based on the syntax definition found at
	* https://developer.mozilla.org/en-US/docs/Web/CSS.

See additional discussion in jupyter/notebook#6270 (comment)

[fcollonval]

Thanks for the detailed information @krassowski
This is then a valid bug.