@pdfme/ui 5.4.2-dev.3 → 5.4.3-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.4.2-dev.3",
+  "version": "5.4.3-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/Designer/PluginIcon.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { Plugin, Schema } from '@pdfme/common';
 import { OptionsContext } from '../../contexts.js';
 import { theme } from 'antd';
@@ -10,27 +10,62 @@ interface PluginIconProps {
   styles?: React.CSSProperties;
 }
 
-const getWithModifiedSize = (
-  htmlString: string,
-  label: string,
-  size: number,
-  styles?: React.CSSProperties,
-) => {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(htmlString, 'text/html');
+const SVGIcon = ({ svgString, size, styles, label }: { 
+  svgString: string; 
+  size?: number; 
+  styles?: React.CSSProperties; 
+  label: string;
+}) => {
+  const processedSVG = useMemo(() => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    
+    const svgElement = doc.querySelector('svg');
+    if (!svgElement) {
+      return null;
+    }
 
-  const modifyNode = (node: HTMLElement) => {
-    if (node.tagName === 'SVG' || node.tagName === 'svg') {
-      node.setAttribute('width', size.toString());
-      node.setAttribute('height', size.toString());
+    if (size) {
+      svgElement.setAttribute('width', size.toString());
+      svgElement.setAttribute('height', size.toString());
     }
-    Array.from(node.children).forEach((child) => modifyNode(child as HTMLElement));
-  };
 
-  Array.from(doc.body.children).forEach((child) => modifyNode(child as HTMLElement));
+    // Sanitize SVG by removing script tags and event handlers
+    const scripts = svgElement.querySelectorAll('script');
+    scripts.forEach(script => script.remove());
+    
+    const allElements = svgElement.querySelectorAll('*');
+    allElements.forEach(element => {
+      Array.from(element.attributes).forEach(attr => {
+        const attrValue = attr.value.trim().toLowerCase();
+        if (
+          attr.name.startsWith('on') ||
+          (
+            attr.name === 'href' && (
+              attrValue.startsWith('javascript:') ||
+              attrValue.startsWith('data:') ||
+              attrValue.startsWith('vbscript:')
+            )
+          )
+        ) {
+          element.removeAttribute(attr.name);
+        }
+      });
+    });
+
+    return svgElement.outerHTML;
+  }, [svgString, size]);
+
+  if (!processedSVG) {
+    return null;
+  }
 
   return (
-    <div style={styles} title={label} dangerouslySetInnerHTML={{ __html: doc.body.innerHTML }} />
+    <div 
+      style={styles} 
+      title={label}
+      dangerouslySetInnerHTML={{ __html: processedSVG }}
+    />
   );
 };
 
@@ -50,10 +85,7 @@ const PluginIcon = (props: PluginIconProps) => {
   };
 
   if (icon) {
-    if (size) {
-      return getWithModifiedSize(icon, label, size, iconStyles);
-    }
-    return <div style={iconStyles} title={label} dangerouslySetInnerHTML={{ __html: icon }} />;
+    return <SVGIcon svgString={icon} size={size} styles={iconStyles} label={label} />;
   }
 
   return (