Media

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

  • Publicada: 14.02.2023
  • Actualizado: 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

Software afectado

Haz clic en una tecnología para ver todas sus vulnerabilidades.

PlataformaPaqueteVersiones vulnerablesCorregida en
Paquete de npm ra-ui-materialui >= 4.0.0, < 4.7.6, < 3.19.12 4.7.6, 3.19.12
Paquete de npm react-admin < 3.19.12, >= 4.0.0, < 4.7.6 3.19.12, 4.7.6

Referencias

Puntuación CVSS 5.4/10
Vector CVSS
CVSS:3.1/AV:N/AC:L/PR:L/UI:R/S:C/C:L/I:L/A:N
Debilidad (CWE)
CWE-79
Plataforma
npm
Paquete
ra-ui-materialui, react-admin
Publicada
14.02.2023
Actualizado
11.10.2026 10:22

Fuentes y licencias

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

Historial de vulnerabilidades: react-admin

Todas las vulnerabilidades publicadas de este paquete (Paquete de npm), de la más reciente a la más antigua. Muestra si es un fallo aislado o un paquete que hay que vigilar.

Esta es la única vulnerabilidad conocida de este paquete.

Identifica las vulnerabilidades de tu aplicación

Con la integración de DockRay y el inventario de software activado, DockRay compara las versiones notificadas de los componentes con las vulnerabilidades conocidas y avisa de las coincidencias confirmadas. La cobertura depende de la tecnología compatible y de los avisos disponibles.

Conectar tu aplicación
Newsletter DockRay

La seguridad de tus aplicaciones en tu correo

Vulnerabilidades importantes, recomendaciones concretas y consejos prácticos para tus aplicaciones. Elige tus tecnologías y sigue lo que importa para tu proyecto.

  • Un resumen diario de nuevas vulnerabilidades, también las críticas.
  • Avisos sobre actualizaciones importantes.
  • Consejos prácticos sobre seguridad y monitorización de aplicaciones.

Déjalo vacío para recibir avisos de todas las tecnologías.

Suscripción gratuita. Date de baja con un clic en cualquier correo.