🦺 [open-formulieren/security-issues#36] Sanitizing HTML in component …

…data

Added a simplistic sanitize function that sanitizes component data when saving the component. This function removes most HTML content from the label, tooltip, description and placeholder component data. Only basic semantic tags (`a`, `b`, `em`, `i`, `string`, `u`) are allowed. Also the allowed attributes has been limited to `href` on `a` tags.

package.json

@@ -40,6 +40,7 @@
     "copy-to-clipboard": "^3.3.1",
     "design-token-editor": "^0.6.0",
     "django-cookie-consent": "^0.6.0",
+    "dompurify": "^3.2.4",
     "feelin": "^3.1.0",
     "flatpickr": "^4.6.9",
     "formik": "^2.2.9",

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

@@ -10,12 +10,14 @@ import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {IntlProvider} from 'react-intl';
+import sanitizeHtml from 'sanitize-html';
 
 import {getIntlProviderProps} from 'components/admin/i18n';
 import {getAvailableAuthPlugins} from 'components/form/cosign';
 import {getAvailableDocumentTypes} from 'components/form/file';
 import {getComponentEmptyValue} from 'components/utils';
 import jsonScriptToVar from 'utils/json-script';
+import {sanitizeHTML} from 'utils/sanitize';
 import {currentTheme} from 'utils/theme';
 
 import {
@@ -207,6 +209,22 @@ class WebformBuilder extends WebformBuilderFormio {
     })();
   }
 
+  sanitizeComponentData(componentData) {
+    ['label', 'tooltip', 'description'].forEach(property => {
+      if (!componentData[property]) return;
+      componentData[property] = sanitizeHTML(componentData[property]);
+    });
+
+    // not-so-elegant input sanitation that formio does... FIXME: can't we just escape
+    // this with \" instead?
+    ['label', 'tooltip', 'placeholder'].forEach(property => {
+      if (!componentData[property]) return;
+      componentData[property] = componentData[property].replace(/"/g, "'");
+    });
+
+    return componentData;
+  }
+
   /**
    * saveComponent method when triggered from React events/formio builder.
    *
@@ -229,13 +247,9 @@ class WebformBuilder extends WebformBuilderFormio {
       return NativePromise.resolve();
     }
 
-    // not-so-elegant input sanitation that formio does... FIXME: can't we just escape
-    // this with \" instead?
     if (componentData) {
-      ['label', 'tooltip', 'placeholder'].forEach(property => {
-        if (!componentData[property]) return;
-        componentData[property] = componentData[property].replace(/"/g, "'");
-      });
+      // Perform some basic component data sanitizing
+      componentData = this.sanitizeComponentData(componentData);
     }
 
     // look up the component instance with the parent

src/openforms/js/utils/sanitize.js

@@ -0,0 +1,35 @@
+import DOMPurify from 'dompurify';
+
+const ALLOWED_HTML_TAGS = [
+  // Basic text tags
+  'a',
+  'b',
+  'br',
+  'em',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'i',
+  'p',
+  's',
+  'strong',
+  'sup',
+  'u',
+  // Lists
+  'li',
+  'ol',
+  'ul',
+];
+
+const ALLOWED_HTML_ATTRIBUTES = ['href', 'target', 'rel'];
+
+export const sanitizeHTML = data => {
+  return DOMPurify.sanitize(data, {
+    ALLOWED_TAGS: ALLOWED_HTML_TAGS,
+    ALLOWED_ATTR: ALLOWED_HTML_ATTRIBUTES,
+    ALLOW_DATA_ATTR: true,
+  });
+};