Unsanitized Inner HTML in Chip component

[jmuzina]

I noticed when reviewing the TICS report for react-components that there are some uses of dangerouslySetInnerHTML that were flagged as XSS vulnerabilities.

Flag 1: Chip (src)
Flag 2: FilterPanelSection of Search and Filter (src)

Are these left here intentionally so that our users have the freedom to place whatever they like in the chips, and thus they have the responsibility to sanitize contents? Otherwise, we could use something like dompurify to sanitize the inner HTML, i.e:

import { sanitize } from 'dompurify'
// 
//
const el = ({ text }) => {
    return (
        <h3
              dangerouslySetInnerHTML={{
                __html: sanitize(text)
              }}
        />
    );
}

Here's what a change to fix this might look like: jmuzina@f3371c6

[bartaz]

I looked into history and it seems that passing HTML directly into Chip was introduced here, where I think it was meant for selecting part of chip value as a search result:
1d160ee

This functionality seems to be gone from the component and it kind of looks like we don't need it. Both properties that build the Chip value (lead and value itself) are type of string, so it doesn't seem that we really want to allow any custom HTML children there (in which case we should accept React node rather than string anyway).

I guess we could try to search for Chip component usage and see what people pass as value there, but I feel like we could try to enforce using safe values and remove the dangerouslySetInnerHTML from this component.