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>
rjsf-team · Jul 27, 2024 · 67e5ee6 · 67e5ee6
1 parent a2dc1cd
commit 67e5ee6
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>