canonical / canonical/react-components
Unsanitized Inner HTML in Chip component
- Dominant language
- TypeScript
- Stars
- 151
- Forks
- 74
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 11
Description
I noticed when reviewing the [TICS report for react-components ](https://canonical.tiobe.com/tiobeweb/TICS/TqiDashboard.html#axes=ProjectGroup(publicRepo),Project(react-components),Sub()&metric=tqi) that there are some uses of `dangerouslySetInnerHTML` that were flagged as XSS vulnerabilities.
[Flag 1](https://canonical.tiobe.com/tiobeweb/TICS/AnnotatedSource.html#axes=Date(1715947246),Project(react-components),DeltaDate(default),Sub(src),Sub(components),Sub(Chip),Suppressions(no),DiffType(Set(new,unchanged)),File(Path(HIE,react-components,master,src,components,Chip,Chip.tsx))&diff=false&metrics=Annotations(SECURITY)): Chip ([src](https://github.com/canonical/react-components/blob/f562a313233a68a8656739b282195886ef8b1044/src/components/Chip/Chip.tsx#L89))
[Flag 2](https://canonical.tiobe.com/tiobeweb/TICS/AnnotatedSource.html#axes=DeltaDate(1713355246),Date(1715947246),Project(react-components),Sub(src),Sub(components),Sub(SearchAndFilter),Sub(FilterPanelSection),Suppressions(no),AnnotationKind(issue),DiffType(Set(new,unchanged)),File(Path(HIE,react-components,master,src,components,SearchAndFilter,FilterPanelSection,FilterPanelSection.tsx))&diff=false&metrics=Annotations(AI),Annotations(CS),Annotations(CW),Annotations(COMPLEXITY),Annotations(FANOUT),Annotations(SECURITY),Annotations(DUP),Annotations(UNITCOVERAGE)): FilterPanelSection of Search and Filter ([src](https://github.com/canonical/react-components/blob/f562a313233a68a8656739b282195886ef8b1044/src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx#L102))
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](https://www.npmjs.com/package/dompurify) to sanitize the inner HTML, i.e:
```tsx
import { sanitize } from 'dompurify'
//
//
const el = ({ text }) => {
return (
);
}
```
Here's what a change to fix this might look like: https://github.com/jmuzina/react-components/commit/f3371c6ae423dc5f80e4d10430c4c99c9b71a95f
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.