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 <[email protected]>

Author: davidli16

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

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>

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';
 

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>