Vulnerabilities in pkg:npm/react-admin

{
  "schema_version" : "1.4.0",
  "id" : "GHSA-5jcr-82fh-339v",
  "modified" : "2023-02-14T00:32:21Z",
  "published" : "2023-02-14T00:32:21Z",
  "aliases" : [ "CVE-2023-25572" ],
  "summary" : "Cross-Site-Scripting attack on `<RichTextField>`",
  "details" : "### Impact\n\nAll React applications built with react-admin and using the `<RichTextField>` are affected. \n\n`<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. \n\nProof of concept:\n\n```jsx\nimport { RichTextField } from 'react-admin';\n\nconst record = {\n    id: 1,\n    body: `\n<p>\n<strong>War and Peace</strong> is a novel by the Russian author\n<a href=\"https://en.wikipedia.org/wiki/Leo_Tolstoy\" onclick=\"document.getElementById('stolendata').value='credentials';\">Leo Tolstoy</a>,\npublished serially, then in its entirety in 1869.\n</p>\n<p onmouseover=\"document.getElementById('stolendata').value='credentials';\">\nIt is regarded as one of Tolstoy's finest literary achievements and remains a classic of world literature.\n</p>\n<img src=\"x\" onerror=\"document.getElementById('stolendata').value='credentials';\" />\n`,\n};\n\nconst VulnerableRichTextField = () => (\n    <>\n        <RichTextField record={record} source=\"body\" />\n        <hr />\n        <h4>Stolen data:</h4>\n        <input id=\"stolendata\" defaultValue=\"none\" />\n    </>\n);\n```\n\n### Patches\n\nVersions 3.19.12 and 4.7.6 now use `DOMPurify` to escape the HTML before outputting it with React and `dangerouslySetInnerHTML`\n\n### Workarounds\n\nYou don't need to upgrade if you already sanitize HTML data server-side. \n\nOtherwise, you'll have to replace the `<RichTextField>` by a custom field doing sanitization by hand:\n\n```tsx\n// react-admin v4\nimport * as React from 'react';\nimport { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport Typography from '@material-ui/core/Typography';\nimport { useRecordContext, sanitizeFieldRestProps, fieldPropTypes } from 'react-admin';\nimport purify from 'dompurify';\n\nexport const removeTags = (input) =>\n    input ? input.replace(/<[^>]+>/gm, '') : '';\n\nconst RichTextField = memo(\n    props => {\n        const { className, emptyText, source, stripTags, ...rest } = props;\n        const record = useRecordContext(props);\n        const value = get(record, source);\n\n        return (\n            <Typography\n                className={className}\n                variant=\"body2\"\n                component=\"span\"\n                {...sanitizeFieldRestProps(rest)}\n            >\n                {value == null && emptyText ? (\n                    emptyText\n                ) : stripTags ? (\n                    removeTags(value)\n                ) : (\n                    <span\n                        dangerouslySetInnerHTML={{\n                            __html: purify.sanitize(value),\n                        }}\n                    />\n                )}\n            </Typography>\n        );\n    }\n);\n\nRichTextField.defaultProps = {\n    addLabel: true,\n    stripTags: false,\n};\n\nRichTextField.propTypes = {\n    // @ts-ignore\n    ...Typography.propTypes,\n    ...fieldPropTypes,\n    stripTags: PropTypes.bool,\n};\n\nRichTextField.displayName = 'RichTextField';\n\nexport default RichTextField;\n```\n\n### References\n\nhttps://github.com/marmelab/react-admin/pull/8644, https://github.com/marmelab/react-admin/pull/8645\n",
  "severity" : [ {
    "type" : "CVSS_V3",
    "score" : "CVSS:3.1/AV:N/AC:L/PR:L/UI:R/S:C/C:L/I:L/A:N"
  } ],
  "affected" : [ {
    "package" : {
      "ecosystem" : "npm",
      "name" : "react-admin"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "0"
      }, {
        "fixed" : "3.19.12"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "npm",
      "name" : "react-admin"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "4.0.0"
      }, {
        "fixed" : "4.7.6"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "npm",
      "name" : "ra-ui-materialui"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "4.0.0"
      }, {
        "fixed" : "4.7.6"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "npm",
      "name" : "ra-ui-materialui"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "0"
      }, {
        "fixed" : "3.19.12"
      } ]
    } ]
  } ],
  "references" : [ {
    "type" : "WEB",
    "url" : "https://github.com/marmelab/react-admin/security/advisories/GHSA-5jcr-82fh-339v"
  }, {
    "type" : "ADVISORY",
    "url" : "https://nvd.nist.gov/vuln/detail/CVE-2023-25572"
  }, {
    "type" : "WEB",
    "url" : "https://github.com/marmelab/react-admin/pull/8644"
  }, {
    "type" : "WEB",
    "url" : "https://github.com/marmelab/react-admin/pull/8645"
  }, {
    "type" : "PACKAGE",
    "url" : "https://github.com/marmelab/react-admin"
  }, {
    "type" : "WEB",
    "url" : "https://github.com/marmelab/react-admin/releases/tag/v3.19.12"
  }, {
    "type" : "WEB",
    "url" : "https://github.com/marmelab/react-admin/releases/tag/v4.7.6"
  } ],
  "database_specific" : {
    "cwe_ids" : [ "CWE-79" ],
    "severity" : "MODERATE",
    "github_reviewed" : true,
    "github_reviewed_at" : "2023-02-14T00:32:21Z",
    "nvd_published_at" : "2023-02-13T21:15:00Z"
  }
}