🦺 [open-formulieren/security-issues#36] Removing HTML from component …

…tooltips

Added a simplistic sanitize function that sanitizes component data when saving the component. This function removes all HTML content from the component tooltip

package.json

@@ -58,6 +58,7 @@
     "react-select": "^5.8.0",
     "react-tabs": "^6.0.2",
     "react-use": "^17.2.4",
+    "sanitize-html": "^2.14.0",
     "state-pool": "^0.7.1",
     "use-immer": "^0.9.0",
     "uuid": "^8.3.2"

src/openforms/js/components/formio_builder/WebformBuilder.js

@@ -14,7 +14,7 @@ import {IntlProvider} from 'react-intl';
 import {getIntlProviderProps} from 'components/admin/i18n';
 import {getAvailableAuthPlugins} from 'components/form/cosign';
 import {getAvailableDocumentTypes} from 'components/form/file';
-import {getComponentEmptyValue} from 'components/utils';
+import {getComponentEmptyValue, sanitizeComponentData} from 'components/utils';
 import jsonScriptToVar from 'utils/json-script';
 import {currentTheme} from 'utils/theme';
 
@@ -137,6 +137,10 @@ class WebformBuilder extends WebformBuilderFormio {
       // we can't use the original saveComponent, as it relies on this.editForm being
       // a thing, which it isn't anymore here.
       this.dialog.close();
+
+      // Perform some basic component data sanitizing
+      componentData = sanitizeComponentData(componentData);
+
       this.saveComponentReact(componentData, parent, isNew, original);
       this.highlightInvalidComponents();
     };

src/openforms/js/components/utils.js

@@ -1,8 +1,15 @@
 import {Formio} from 'formiojs';
 
+import {removeAllHTMLContent} from 'utils/sanitizer';
+
 const getComponentEmptyValue = component => {
   const componentInstance = Formio.Components.create(component);
   return componentInstance.emptyValue;
 };
 
-export {getComponentEmptyValue};
+const sanitizeComponentData = componentData => ({
+  ...componentData,
+  tooltip: removeAllHTMLContent(componentData.tooltip),
+});
+
+export {getComponentEmptyValue, sanitizeComponentData};

src/openforms/js/utils/sanitizer.js

@@ -0,0 +1,7 @@
+import sanitizeHtml from 'sanitize-html';
+
+export const removeAllHTMLContent = content =>
+  sanitizeHtml(content, {
+    allowedTags: [],
+    allowedAttributes: {},
+  });