GHSA-5jcr-82fh-339v Cross-Site-Scripting attack on `<RichTextField>`

• npm react-admin: < 3.19.12 → fixed in 3.19.12 • npm react-admin: >= 4.0.0, < 4.7.6 → fixed in 4.7.6 • npm ra-ui-materialui: >= 4.0.0, < 4.7.6 → fixed in 4.7.6 • npm ra-ui-materialui: < 3.19.12 → fixed in 3.19.12

Impact All React applications built with react-admin and using the `` are affected. `` outputs the field value using `dangerouslySetInnerHTML` without client-side sanitization. If the data isn't sanitized server-side, this opens a possible Cross-Site-Scripting (XSS) attack. Proof of concept: ```jsx import { RichTextField } from 'react-admin'; const record = { id: 1, body: ` War and Peace is a novel by the Russian author Leo Tolstoy, published serially, then in its entirety in 1869. It is regarded as one of Tolstoy's finest literary achievements and remains a classic of world literature. `, }; const VulnerableRichTextField = () => ( <> Stolen data: ); ``` Patches Versions 3.19.12 and 4.7.6 now use `DOMPurify` to escape the HTML before outputting it with React and `dangerouslySetInnerHTML` Workarounds You don't need to upgrade if you already sanitize HTML data server-side. Otherwise, you'll have to replace the `` by a custom field doing sanitization by hand: ```tsx // react-admin v4 import * as React from 'react'; import { memo } from 'react'; import PropTypes from 'prop-types'; import get from 'lodash/get'; import Typography from '@material-ui/core/Typography'; import { useRecordContext, sanitizeFieldRestProps, fieldPropTypes } from 'react-admin'; import purify from 'dompurify'; export const removeTags = (input) => input ? input.replace(/]+>/gm, '') : ''; const RichTextField = memo( props => { const { className, emptyText, source, stripTags, ...rest } = props; const record = useRecordContext(props); const value = get(record, source); return ( {value == null && emptyText ? ( emptyText ) : stripTags ? ( removeTags(value) ) : ( )} ); } ); RichTextField.defaultProps = { addLabel: true, stripTags: false, }; RichTextField.propTypes = { // @ts-ignore ...Typography.propTypes, ...fieldPropTypes, stripTags: PropTypes.bool, }; RichTextField.displayName = 'RichTextField'; export default RichTextField; ``` References https://github.com/marmelab/react-admin/pull/8644, https://github.com/marmelab/react-admin/pull/8645