add: DOMPurify sanitize for html content from BlockNoteContent component

cellajs · Jan 23, 2025 · 2243576 · 2243576
1 parent 37bda7e
commit 2243576
Showing 1 changed file with 36 additions and 23 deletions.
diff --git a/frontend/src/modules/common/form-fields/blocknote-content.tsx b/frontend/src/modules/common/form-fields/blocknote-content.tsx
@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { Suspense } from 'react';
 import type { Control } from 'react-hook-form';
 
@@ -25,29 +26,41 @@ const BlockNoteContent = ({ blocknoteId, control, label, name, required, disable
     <FormField
       control={control}
       name={name}
-      render={({ field: { onChange, value } }) => (
-        <FormItem name={name} aria-disabled={disabled}>
-          <FormLabel>
-            {label}
-            {required && <span className="ml-1 opacity-50">*</span>}
-          </FormLabel>
-          <FormControl>
-            <Suspense>
-              <BlockNote
-                id={blocknoteId}
-                defaultValue={value}
-                onChange={onChange}
-                updateData={onChange}
-                className="min-h-20 pl-10 pr-6 p-3 border rounded-md"
-                allowedFileBlockTypes={['image', 'file']}
-                allowedBlockTypes={['emoji', 'heading', 'paragraph', 'codeBlock']}
-                filePanel={(props) => <UppyFilePanel {...props} />}
-              />
-            </Suspense>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
+      render={({ field: { onChange, value } }) => {
+        const sanitizedOnChange = (value: string) => {
+          const config = {
+            ADD_ATTR: ['colwidth', 'style'], // Allow 'colwidth' and 'style' attributes in the sanitized HTML
+          };
+
+          //Sanitized BlockNote content
+          const cleanContent = DOMPurify.sanitize(value, config);
+          onChange(cleanContent);
+        };
+
+        return (
+          <FormItem name={name} aria-disabled={disabled}>
+            <FormLabel>
+              {label}
+              {required && <span className="ml-1 opacity-50">*</span>}
+            </FormLabel>
+            <FormControl>
+              <Suspense>
+                <BlockNote
+                  id={blocknoteId}
+                  defaultValue={value}
+                  onChange={sanitizedOnChange}
+                  updateData={sanitizedOnChange}
+                  className="min-h-20 pl-10 pr-6 p-3 border rounded-md"
+                  allowedFileBlockTypes={['image', 'file']}
+                  allowedBlockTypes={['emoji', 'heading', 'paragraph', 'codeBlock']}
+                  filePanel={(props) => <UppyFilePanel {...props} />}
+                />
+              </Suspense>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        );
+      }}
     />
   );
 };