From 67e5ee68c9a0146896d713a831c69e1bf1fb5919 Mon Sep 17 00:00:00 2001
From: David Li <davidli@cs.stanford.edu>
Date: Fri, 26 Jul 2024 18:06:03 -0700
Subject: [PATCH] fix: xss when rendering schema errors (#4256)

* fix: stop rendering config errors as html

* Update CHANGELOG.md

* Update UnsupportedField.tsx

* Fix formatting

* Update packages/core/src/components/templates/UnsupportedField.tsx

* Update CHANGELOG.md

* Update <SchemaField> to match

* - Fix lint error

* Update CHANGELOG.md

- Updating to mention potential breaking change

---------

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>
---
 CHANGELOG.md                                               | 5 +++++
 packages/core/src/components/fields/ObjectField.tsx        | 2 +-
 packages/core/src/components/fields/SchemaField.tsx        | 7 +++++--
 .../core/src/components/templates/UnsupportedField.tsx     | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b7d5486d1..99e84c21d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,11 @@ should change the heading of the (upcoming) version to include a major version b
 
 # 5.19.4
 
+## @rjsf/core 
+
+- Fix XSS when rendering schema validation errors [#4254](https://github.com/rjsf-team/react-jsonschema-form/issues/2718)
+  - NOTE: This will have potential consequences if you are using the [translateString](https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/form-props/#translatestring) feature and are trying to render HTML. Switching to [Markdown](https://www.markdownguide.org/) will solve your problems.
+
 ## @rjsf/utils
 
 - Updated the `ValidatorType` interface to add an optional `reset?: () => void` prop that can be implemented to reset a validator back to initial constructed state
diff --git a/packages/core/src/components/fields/ObjectField.tsx b/packages/core/src/components/fields/ObjectField.tsx
index eb4e1d4d99..8399429da5 100644
--- a/packages/core/src/components/fields/ObjectField.tsx
+++ b/packages/core/src/components/fields/ObjectField.tsx
@@ -263,7 +263,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       return (
         <div>
           <p className='config-error' style={{ color: 'red' }}>
-            <Markdown>
+            <Markdown options={{ disableParsingRawHTML: true }}>
               {translateString(TranslatableString.InvalidObjectField, [name || 'root', (err as Error).message])}
             </Markdown>
           </p>
diff --git a/packages/core/src/components/fields/SchemaField.tsx b/packages/core/src/components/fields/SchemaField.tsx
index 5ac131609a..ee7bd23ca5 100644
--- a/packages/core/src/components/fields/SchemaField.tsx
+++ b/packages/core/src/components/fields/SchemaField.tsx
@@ -201,8 +201,11 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 
   const description = uiOptions.description || props.schema.description || schema.description || '';
 
-  const richDescription = uiOptions.enableMarkdownInDescription ? <Markdown>{description}</Markdown> : description;
-
+  const richDescription = uiOptions.enableMarkdownInDescription ? (
+    <Markdown options={{ disableParsingRawHTML: true }}>{description}</Markdown>
+  ) : (
+    description
+  );
   const help = uiOptions.help;
   const hidden = uiOptions.widget === 'hidden';
 
diff --git a/packages/core/src/components/templates/UnsupportedField.tsx b/packages/core/src/components/templates/UnsupportedField.tsx
index f89d445f8e..bbce8c8f9f 100644
--- a/packages/core/src/components/templates/UnsupportedField.tsx
+++ b/packages/core/src/components/templates/UnsupportedField.tsx
@@ -27,7 +27,7 @@ function UnsupportedField<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   return (
     <div className='unsupported-field'>
       <p>
-        <Markdown>{translateString(translateEnum, translateParams)}</Markdown>
+        <Markdown options={{ disableParsingRawHTML: true }}>{translateString(translateEnum, translateParams)}</Markdown>
       </p>
       {schema && <pre>{JSON.stringify(schema, null, 2)}</pre>}
     </div>