canonical / canonical/react-components

Unsanitized Inner HTML in Chip component

Open
#1,091 1 comment 0 reactions 0 assignees View on GitHub
Bug 🐛 P3 Triaged Question ❓ Triaged: v4
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.