fix(barcode-generator-web): sanitize Data Matrix SVG, prefix preview class, tighten memo deps

Data Matrix code value comes from a Mendix DynamicValue and reaches the
DOM via dangerouslySetInnerHTML; sanitize the bwip-js SVG output with
DOMPurify before injecting it. Also prefix the preview image class per
widget style convention and destructure encodeDataMatrix's params so the
useMemo dependency list stays exhaustive without a lint suppression.

Author: samuelreichert

packages/pluggableWidgets/barcode-generator-web/package.json

@@ -45,6 +45,7 @@
     "dependencies": {
         "@bwip-js/browser": "^4.11.2",
         "classnames": "^2.5.1",
+        "dompurify": "^3.4.11",
         "jsbarcode": "^3.12.1",
         "qrcode.react": "^4.2.0"
     },

packages/pluggableWidgets/barcode-generator-web/src/components/DataMatrix.tsx

@@ -5,6 +5,7 @@ import {
     gs1datamatrix,
     gs1datamatrixrectangular
 } from "@bwip-js/browser";
+import DOMPurify from "dompurify";
 import { ReactElement, useMemo, useRef } from "react";
 import { DownloadButton } from "./DownloadButton";
 import { DataMatrixTypeConfig } from "../config/Barcode.config";
@@ -16,25 +17,27 @@ interface DataMatrixRendererProps {
     config: DataMatrixTypeConfig;
 }
 
+type DataMatrixEncodeParams = Pick<DataMatrixTypeConfig, "codeValue" | "size" | "margin" | "gs1Mode" | "shape">;
+
 /** Selects the bwip-js encoder for the requested GS1 mode and symbol shape. */
-function encodeDataMatrix(config: DataMatrixTypeConfig): string {
+function encodeDataMatrix({ codeValue, size, margin, gs1Mode, shape }: DataMatrixEncodeParams): string {
     const opts = {
-        text: config.codeValue,
+        text: codeValue,
         // bwip-js scale is in module units; map the pixel size onto a reasonable scale.
-        scale: Math.max(1, Math.round(config.size / 32)),
-        paddingwidth: config.margin,
-        paddingheight: config.margin,
+        scale: Math.max(1, Math.round(size / 32)),
+        paddingwidth: margin,
+        paddingheight: margin,
         // GS1 AI syntax uses parentheses; parse must be on for the human-readable form.
-        parse: config.gs1Mode
+        parse: gs1Mode
     } as const;
 
-    if (config.gs1Mode) {
-        return config.shape === "rectangle"
+    if (gs1Mode) {
+        return shape === "rectangle"
             ? gs1datamatrixrectangular({ ...opts, bcid: "gs1datamatrixrectangular" }, drawingSVG())
             : gs1datamatrix({ ...opts, bcid: "gs1datamatrix" }, drawingSVG());
     }
 
-    return config.shape === "rectangle"
+    return shape === "rectangle"
         ? datamatrixrectangular({ ...opts, bcid: "datamatrixrectangular" }, drawingSVG())
         : datamatrix({ ...opts, bcid: "datamatrix" }, drawingSVG());
 }
@@ -53,7 +56,7 @@ function getSvgPixelSize(svg: string, size: number): { width: number; height: nu
 
 export function DataMatrixRenderer({ config }: DataMatrixRendererProps): ReactElement {
     const containerRef = useRef<HTMLDivElement>(null);
-    const { codeValue, downloadButton, size, gs1Mode } = config;
+    const { codeValue, downloadButton, size, gs1Mode, shape, margin, logLevel } = config;
     const buttonPosition = downloadButton?.buttonPosition ?? "bottom";
 
     const { svg, error } = useMemo<{ svg: string | null; error: boolean }>(() => {
@@ -63,27 +66,26 @@ export function DataMatrixRenderer({ config }: DataMatrixRendererProps): ReactEl
 
         const baseValidation = validateBarcodeValue("DataMatrix", codeValue);
         if (!baseValidation.valid) {
-            printError(`Validation failed for Data Matrix: ${baseValidation.message}`, config.logLevel);
+            printError(`Validation failed for Data Matrix: ${baseValidation.message}`, logLevel);
             return { svg: null, error: true };
         }
 
         if (gs1Mode) {
             const gs1Validation = validateGs1DataMatrixValue(codeValue);
             if (!gs1Validation.valid) {
-                printError(`GS1 Data Matrix validation failed: ${gs1Validation.message}`, config.logLevel);
+                printError(`GS1 Data Matrix validation failed: ${gs1Validation.message}`, logLevel);
                 return { svg: null, error: true };
             }
         }
 
         try {
-            return { svg: encodeDataMatrix(config), error: false };
+            return { svg: encodeDataMatrix({ codeValue, size, margin, gs1Mode, shape }), error: false };
         } catch (e) {
             const message = e instanceof Error ? e.message : "Error generating Data Matrix";
-            printError(`Rendering failed: ${message} \nValue: "${codeValue}"`, config.logLevel);
+            printError(`Rendering failed: ${message} \nValue: "${codeValue}"`, logLevel);
             return { svg: null, error: true };
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [codeValue, size, gs1Mode, config.shape, config.margin, config.logLevel]);
+    }, [codeValue, size, gs1Mode, shape, margin, logLevel]);
 
     if (error || !svg) {
         return (
@@ -117,7 +119,9 @@ export function DataMatrixRenderer({ config }: DataMatrixRendererProps): ReactEl
                 ref={containerRef}
                 className="datamatrix-svg"
                 style={{ width, height }}
-                dangerouslySetInnerHTML={{ __html: svg }}
+                dangerouslySetInnerHTML={{
+                    __html: DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } })
+                }}
             />
             {buttonPosition === "bottom" && button}
         </div>

packages/pluggableWidgets/barcode-generator-web/src/components/preview/DataMatrixPreview.tsx

@@ -1,4 +1,5 @@
 import { datamatrix, drawingSVG, gs1datamatrix } from "@bwip-js/browser";
+import DOMPurify from "dompurify";
 import { ReactElement, useMemo } from "react";
 import { BarcodeGeneratorPreviewProps } from "../../../typings/BarcodeGeneratorProps";
 
@@ -30,9 +31,11 @@ export function DataMatrixPreview(props: DataMatrixPreviewProps): ReactElement {
             {restProps.buttonPosition === "top" && downloadButton}
             {svg ? (
                 <div
-                    className="datamatrix-preview-image"
+                    className="barcode-generator-datamatrix-preview-image"
                     style={{ width: displaySize, height: displaySize }}
-                    dangerouslySetInnerHTML={{ __html: svg }}
+                    dangerouslySetInnerHTML={{
+                        __html: DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } })
+                    }}
                 />
             ) : (
                 <div className="alert alert-danger" role="alert">

packages/pluggableWidgets/barcode-generator-web/src/ui/BarcodeGenerator.scss

@@ -109,7 +109,7 @@ $widget-prefix: "barcode-generator";
     object-fit: contain;
 }
 
-.datamatrix-preview-image {
+.barcode-generator-datamatrix-preview-image {
     max-width: 100%;
 
     svg {