Disallow specific data attributes from DOMPurify's default config [RUN AS-IF-FOSS] [RUN ALL RSPEC]

app/assets/javascripts/lib/dompurify.js

@@ -7,6 +7,8 @@ const defaultConfig = {
   ADD_TAGS: ['use'],
 };
 
+const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method'];
+
 // Only icons urls from `gon` are allowed
 const getAllowedIconUrls = (gon = window.gon) =>
   [gon.sprite_file_icons, gon.sprite_icons].filter(Boolean);
@@ -44,10 +46,19 @@ const sanitizeSvgIcon = (node) => {
   removeUnsafeHref(node, 'xlink:href');
 };
 
+const sanitizeHTMLAttributes = (node) => {
+  forbiddenDataAttrs.forEach((attr) => {
+    if (node.hasAttribute(attr)) {
+      node.removeAttribute(attr);
+    }
+  });
+};
+
 addHook('afterSanitizeAttributes', (node) => {
   if (node.tagName.toLowerCase() === 'use') {
     sanitizeSvgIcon(node);
   }
+  sanitizeHTMLAttributes(node);
 });
 
 export const sanitize = (val, config = defaultConfig) => dompurifySanitize(val, config);

spec/frontend/lib/dompurify_spec.js

@@ -30,6 +30,9 @@ const unsafeUrls = [
   `https://evil.url/${absoluteGon.sprite_file_icons}`,
 ];
 
+const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method'];
+const acceptedDataAttrs = ['data-random', 'data-custom'];
+
 describe('~/lib/dompurify', () => {
   let originalGon;
 
@@ -95,4 +98,17 @@ describe('~/lib/dompurify', () => {
       expect(sanitize(htmlXlink)).toBe(expectedSanitized);
     });
   });
+
+  describe('handles data attributes correctly', () => {
+    it.each(forbiddenDataAttrs)('removes %s attributes', (attr) => {
+      const htmlHref = `<a ${attr}="true">hello</a>`;
+      expect(sanitize(htmlHref)).toBe('<a>hello</a>');
+    });
+
+    it.each(acceptedDataAttrs)('does not remove %s attributes', (attr) => {
+      const attrWithValue = `${attr}="true"`;
+      const htmlHref = `<a ${attrWithValue}>hello</a>`;
+      expect(sanitize(htmlHref)).toBe(`<a ${attrWithValue}>hello</a>`);
+    });
+  });
 });