feat: implement DOCX HTML sanitization to enhance security and prevent XSS

frontend/package.json

@@ -12,10 +12,8 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.11.2",
-    "@types/dompurify": "^3.0.5",
     "@xyflow/react": "^12.8.3",
     "antd": "^5.27.0",
-    "dompurify": "^3.4.10",
     "i18next": "^25.8.0",
     "jssha": "^3.3.1",
     "jszip": "^3.10.1",

frontend/src/components/file-preview/DocxPreview.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import DOMPurify from 'dompurify';
 import mammoth from 'mammoth';
+import { sanitizeDocxHtml } from './docxSanitizer';
 
 export interface DocxPreviewProps {
   blob?: Blob;
@@ -9,7 +9,6 @@ export interface DocxPreviewProps {
 
 export const DocxPreview: React.FC<DocxPreviewProps> = ({
   blob,
-  fileName
 }) => {
   const [html, setHtml] = useState<string>('');
   const [loading, setLoading] = useState(true);
@@ -29,16 +28,9 @@ export const DocxPreview: React.FC<DocxPreviewProps> = ({
 
         const arrayBuffer = await blob.arrayBuffer();
         const result = await mammoth.convertToHtml({ arrayBuffer });
-        // Sanitize HTML to prevent XSS from malicious DOCX files (FCE)
-        const sanitized = DOMPurify.sanitize(result.value, {
-          ALLOWED_TAGS: ['h1','h2','h3','h4','h5','h6','p','br','hr','ul','ol','li',
-            'table','thead','tbody','tr','th','td','strong','em','b','i','u','s',
-            'a','img','sup','sub','pre','code','blockquote','span','div'],
-          ALLOWED_ATTR: ['href','target','src','alt','width','height','colspan',
-            'rowspan','style','class','id','data-*'],
-        });
+        const sanitized = sanitizeDocxHtml(result.value);
         setHtml(sanitized);
-      } catch (err) {
+      } catch {
         setError('Failed to convert Word document');
       } finally {
         setLoading(false);

frontend/src/components/file-preview/docxSanitizer.ts

@@ -0,0 +1,131 @@
+const ALLOWED_DOCX_TAGS = new Set([
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'p', 'br', 'hr', 'ul', 'ol', 'li',
+  'table', 'thead', 'tbody', 'tr', 'th', 'td',
+  'strong', 'em', 'b', 'i', 'u', 's',
+  'a', 'img', 'sup', 'sub', 'pre', 'code', 'blockquote', 'span', 'div',
+]);
+
+const DROP_WITH_CONTENT_TAGS = new Set([
+  'base', 'button', 'embed', 'form', 'iframe', 'input', 'link', 'math',
+  'meta', 'object', 'script', 'select', 'style', 'svg', 'textarea',
+]);
+
+const VOID_TAGS = new Set(['br', 'hr', 'img']);
+
+const SAFE_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
+const SAFE_IMAGE_DATA_URI_PATTERN = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,[a-z0-9+/=\s]+$/i;
+const SAFE_ANCHOR_PATTERN = /^#[a-z0-9_.:-]+$/i;
+const SAFE_DIMENSION_PATTERN = /^(?:[1-9]\d{0,3}|10000)$/;
+const SAFE_SPAN_PATTERN = /^(?:[1-9]|[1-9]\d|100)$/;
+
+function isSafeDocxLink(rawHref: string | null): boolean {
+  if (!rawHref) {
+    return false;
+  }
+
+  const href = rawHref.trim();
+  if (SAFE_ANCHOR_PATTERN.test(href)) {
+    return true;
+  }
+
+  try {
+    const parsed = new URL(href);
+    return SAFE_LINK_PROTOCOLS.has(parsed.protocol);
+  } catch {
+    return false;
+  }
+}
+
+function isSafeDocxImageSource(rawSrc: string | null): boolean {
+  return Boolean(rawSrc && SAFE_IMAGE_DATA_URI_PATTERN.test(rawSrc.trim()));
+}
+
+function setPlainTextAttribute(target: HTMLElement, source: Element, attrName: string): void {
+  const value = source.getAttribute(attrName);
+  if (value) {
+    target.setAttribute(attrName, value);
+  }
+}
+
+function setNumericAttribute(
+  target: HTMLElement,
+  source: Element,
+  attrName: string,
+  pattern: RegExp,
+): void {
+  const value = source.getAttribute(attrName)?.trim();
+  if (value && pattern.test(value)) {
+    target.setAttribute(attrName, value);
+  }
+}
+
+function copySafeAttributes(target: HTMLElement, source: Element, tagName: string): boolean {
+  setPlainTextAttribute(target, source, 'title');
+
+  if (tagName === 'a') {
+    const href = source.getAttribute('href');
+    if (isSafeDocxLink(href)) {
+      target.setAttribute('href', href!.trim());
+    }
+  }
+
+  if (tagName === 'img') {
+    const src = source.getAttribute('src');
+    if (!isSafeDocxImageSource(src)) {
+      return false;
+    }
+    target.setAttribute('src', src!.trim());
+    setPlainTextAttribute(target, source, 'alt');
+    setNumericAttribute(target, source, 'width', SAFE_DIMENSION_PATTERN);
+    setNumericAttribute(target, source, 'height', SAFE_DIMENSION_PATTERN);
+  }
+
+  if (tagName === 'td' || tagName === 'th') {
+    setNumericAttribute(target, source, 'colspan', SAFE_SPAN_PATTERN);
+    setNumericAttribute(target, source, 'rowspan', SAFE_SPAN_PATTERN);
+  }
+
+  return true;
+}
+
+function sanitizeNode(node: Node): Node[] {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return [document.createTextNode(node.textContent ?? '')];
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return [];
+  }
+
+  const element = node as Element;
+  const tagName = element.tagName.toLowerCase();
+  if (DROP_WITH_CONTENT_TAGS.has(tagName)) {
+    return [];
+  }
+
+  const sanitizedChildren = Array.from(element.childNodes).flatMap(sanitizeNode);
+  if (!ALLOWED_DOCX_TAGS.has(tagName)) {
+    return sanitizedChildren;
+  }
+
+  const sanitizedElement = document.createElement(tagName);
+  if (!copySafeAttributes(sanitizedElement, element, tagName)) {
+    return [];
+  }
+
+  if (!VOID_TAGS.has(tagName)) {
+    sanitizedElement.append(...sanitizedChildren);
+  }
+
+  return [sanitizedElement];
+}
+
+export function sanitizeDocxHtml(html: string): string {
+  const source = document.createElement('template');
+  source.innerHTML = html;
+
+  const container = document.createElement('div');
+  container.append(...Array.from(source.content.childNodes).flatMap(sanitizeNode));
+  return container.innerHTML;
+}