Medium

Cross-Site-Scripting attack on `<RichTextField>`

  • Disclosed: 14.02.2023
  • Updated: 11.10.2026 10:22

Impact

All React applications built with react-admin and using the <RichTextField> are affected.

<RichTextField> 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:

js
import { RichTextField } from 'react-admin';

const record = {
    id: 1,
    body: `
<p>
<strong>War and Peace</strong> is a novel by the Russian author
<a href="https://en.wikipedia.org/wiki/Leo_Tolstoy" onclick="document.getElementById('stolendata').value='credentials';">Leo Tolstoy</a>,
published serially, then in its entirety in 1869.
</p>
<p onmouseover="document.getElementById('stolendata').value='credentials';">
It is regarded as one of Tolstoy's finest literary achievements and remains a classic of world literature.
</p>
<img src="x" onerror="document.getElementById('stolendata').value='credentials';" />
`,
};

const VulnerableRichTextField = () => (
    <>
        <RichTextField record={record} source="body" />
        <hr />
        <h4>Stolen data:</h4>
        <input id="stolendata" defaultValue="none" />
    </>
);

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 <RichTextField> 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 (
            <Typography
                className={className}
                variant="body2"
                component="span"
                {...sanitizeFieldRestProps(rest)}
            >
                {value == null && emptyText ? (
                    emptyText
                ) : stripTags ? (
                    removeTags(value)
                ) : (
                    <span
                        dangerouslySetInnerHTML={{
                            __html: purify.sanitize(value),
                        }}
                    />
                )}
            </Typography>
        );
    }
);

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

Affected software

Click a technology to see all vulnerabilities affecting it.

PlatformPackageVulnerable versionsFixed in
npm package ra-ui-materialui >= 4.0.0, < 4.7.6, < 3.19.12 4.7.6, 3.19.12
npm package react-admin < 3.19.12, >= 4.0.0, < 4.7.6 3.19.12, 4.7.6

References

CVSS score 5.4/10
CVSS vector
CVSS:3.1/AV:N/AC:L/PR:L/UI:R/S:C/C:L/I:L/A:N
Weakness (CWE)
CWE-79
Platform
npm
Package
ra-ui-materialui, react-admin
Disclosed
14.02.2023
Updated
11.10.2026 10:22

Sources and licenses

OSV / GitHub Advisory Database - GHSA-5jcr-82fh-339v - CC BY 4.0

Vulnerability history: react-admin

All published vulnerabilities of this package (npm package), newest first. Shows whether this is a one-off slip or a package that needs watching.

This is the only known vulnerability of this package.

Know which vulnerabilities affect your application

With the DockRay integration and software inventory enabled, DockRay checks reported component versions against known vulnerabilities and notifies you about confirmed matches. Coverage depends on the supported technology and available advisory data.

Connect your application
DockRay newsletter

Application security in your inbox

Important vulnerabilities, actionable guidance and practical advice for your applications. Choose your technologies and follow what matters to your project.

  • A daily digest of new vulnerabilities, critical ones included.
  • Notifications about important updates.
  • Practical advice on application security and monitoring.

Leave empty to receive updates for every technology.

Free to subscribe. Unsubscribe with one click in any email.