sanitize user input

SAINIAbhishek · Oct 10, 2024 · 4fcde59 · 4fcde59
1 parent cb90195
commit 4fcde59
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 25 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -29,6 +29,7 @@
     "@tanstack/react-query": "^5.51.23",
     "axios": "^1.7.5",
     "date-fns": "^2.30.0",
+    "dompurify": "^3.1.7",
     "dotenv": "^16.4.5",
     "formik": "^2.4.6",
     "i18next": "^23.12.2",
@@ -60,6 +61,7 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^18.0.0",
     "@types/react": "^18.3.3",

diff --git a/frontend/src/components/form/input-field/index.tsx b/frontend/src/components/form/input-field/index.tsx
@@ -1,20 +1,23 @@
 import { ErrorMessage, Field } from 'formik';
 import { FormikValues } from 'formik/dist/types';
 import { useTranslation } from 'react-i18next';
+import { handleSanitizedChange } from '@/utils/sanitize-input';
 
-const InputField = ({
-  name,
-  label,
-  type,
-  onBlur,
-  onChange,
-  value,
-  error,
-  touched,
-  ...props
-}: FormikValues) => {
+const InputField = (props: FormikValues) => {
   const { t } = useTranslation();
 
+  const {
+    name,
+    label,
+    type,
+    onBlur,
+    onChange,
+    value,
+    error,
+    touched,
+    ...rest
+  } = props;
+
   return (
     <div>
       <label
@@ -26,14 +29,14 @@ const InputField = ({
         type={type}
         name={name}
         onBlur={onBlur}
-        onChange={onChange}
+        onChange={handleSanitizedChange(onChange)}
         value={value}
         id={name}
         className={`border sm:text-sm rounded-lg placeholder-gray-400 border-gray-600 p-2.5 bg-gray-700 text-white block w-full ${
           error && touched ? 'border-red-500' : 'focus:ring-blue-500'
         }`}
         placeholder={`Enter your ${t(label).toLowerCase()}`}
-        {...props}
+        {...rest}
       />
       <ErrorMessage
         name={name}

diff --git a/frontend/src/components/form/textarea-field/index.tsx b/frontend/src/components/form/textarea-field/index.tsx
@@ -1,19 +1,14 @@
+import { handleSanitizedChange } from '@/utils/sanitize-input';
 import { ErrorMessage, Field } from 'formik';
 import { FormikValues } from 'formik/dist/types';
 import { useTranslation } from 'react-i18next';
 
-const TextareaField = ({
-  name,
-  label,
-  onBlur,
-  onChange,
-  value,
-  error,
-  touched,
-  ...props
-}: FormikValues) => {
+const TextareaField = (props: FormikValues) => {
   const { t } = useTranslation();
 
+  const { name, label, onBlur, onChange, value, error, touched, ...rest } =
+    props;
+
   return (
     <div>
       <label
@@ -25,14 +20,14 @@ const TextareaField = ({
         as="textarea"
         name={name}
         onBlur={onBlur}
-        onChange={onChange}
+        onChange={handleSanitizedChange(onChange)}
         value={value}
         id={name}
         className={`border sm:text-sm rounded-lg placeholder-gray-400 border-gray-600 p-2.5 bg-gray-700 text-white block w-full ${
           error && touched ? 'border-red-500' : 'focus:ring-blue-500'
         }`}
         placeholder={`Enter your ${label.toLowerCase()}`}
-        {...props}
+        {...rest}
       />
       <ErrorMessage
         name={name}

diff --git a/frontend/src/utils/sanitize-input.ts b/frontend/src/utils/sanitize-input.ts
@@ -0,0 +1,22 @@
+import DOMPurify from 'dompurify';
+
+/**
+ * Generic handler for sanitizing input values.
+ * @param handleChange - The onChange handler function from the input component.
+ */
+export const handleSanitizedChange = (
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+) => {
+  return (e: React.ChangeEvent<HTMLInputElement>) => {
+    const sanitizedValue = DOMPurify.sanitize(e.target.value);
+    const syntheticEvent = {
+      ...e,
+      target: {
+        ...e.target,
+        name: e.target.name,
+        value: sanitizedValue,
+      },
+    };
+    handleChange(syntheticEvent);
+  };
+};