linear-gradient in background style property seems to breaks the whole property

[srenoufd]

Using the latest version of the package, it seems that linear-gradient in combination with url(), set in the background inside an inline style property will break the background.

Steps to reproduce :

1. Use CSS property & value : background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(any_url) no-repeat center center; in any html tag
2. Pass it to the sanitize function
3. The selected tag will have its background property entirely removed.

Are there any workaround ?

[BoDonkey]

@srenoufd - would you mind writing a small (failing) test for this so that we can see the issue more clearly?

[srenoufd]

@BoDonkey Here is a PR with the test present, it's uncommon to me to write such tests & use github, be aware that it might not be what you were looking for.

[BoDonkey]

@srenoufd - Thanks for doing that!! You could have just added the test here in the issue, but it did allow me to see the issue are having a little better. In this case, sanitize is working correctly, it is just more aggressive than you expected. In addition to configuring it to accept div tags, you also have to configure the allowed attributes (style) for the div tag and what style are allowed. Here is a working test:

it('should allow linear-gradient in background css property', () => {
    const inputHtml = '<div style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(any_url) no-repeat center center;"></div>';
    const expectedOutput = '<div style="background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(any_url) no-repeat center center"></div>';
    const sanitizedHtml = sanitizeHtml(inputHtml, {
      allowedTags: [ 'div' ],
      allowedAttributes: {
        div: [ 'style' ]
      },
      allowedStyles: {
        '*': {
          background: [/^linear-gradient\(.*\).*$/]
        }
      }
    });

    assert.equal(sanitizedHtml, expectedOutput);
  });

Three things to point out.
First, in the allowedStyles I'm allowing that style on any tag using the * wildcard. You might want to restrict it to just the div tag.
Second, the regex pattern may be either too liberal or too restrictive for your use case.
Third, and this is a quirk of the way sanitize-html handles styles, you will notice in the expected output that the space after background: has been stripped, as has the trailing ; at the end of the style. This won't impact the functionality, just something to keep in mind.

Hope this helps! If this solves your issue you can close this out.

[srenoufd]

Thanks a lot for reaching out and responding to this issue.
I did not provide it because I though 'background' property and its value were already accepted by default.

Anyway, in my allowedStyles, I have the background enabled that way :

allowedStyles: {
        '*': {
          ...
          background: [/^.*$/],
          ...
        }
      }

If I'm not mistaken, this regular expression [/^.*$/] should allow "linear-gradient" since it basically allows everything. It might be an error on my side then. If so, I hope I did not use too much of your time.

[BoDonkey]

It is up to you how stringent you want to be with the sanitization, so that regex would be fine.

[srenoufd]

Well that's the thing, with my script configured as mentioned before, it is not working.
Any HTML tag that has a background with linear-gradient & url inside its style parameter is truncated when passed to the sanitize function. Which it should not do.

I know it's not the same library, and probably irrelevant, but I have found the exact same issue in another library, it was patched 2 weeks ago which seems odd to me because this specific issue we're having, we're pretty sure it was working previously, at least the past year or so. We might be delusional ahah

[BoDonkey]

I'm confused. The test I provided works. The input and output CSS match. Maybe I am misunderstanding something?