@streamscloud/kit 0.80.0 → 0.81.0

package/dist/core/utils/html-helper.d.ts

@@ -12,7 +12,11 @@ export declare class HtmlHelper {
      */
     static trimElementValue(element: HTMLInputElement | HTMLTextAreaElement): boolean;
     static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
-    static sanitizeSvg(svg: string): string;
+    /**
+     * Sanitizes SVG markup and serializes it as XML, valid both inline in HTML and as a standalone `image/svg+xml` file.
+     * Returns null when the markup isn't a well-formed SVG document, or when there is no window.
+     */
+    static sanitizeSvg(svg: string): string | null;
     static sanitizeHtml(html: string): string;
     static stripHtml(html: string, lineBreaksReplacer?: string | null, trimResult?: boolean): string;
 }

package/dist/core/utils/html-helper.js

@@ -1,4 +1,6 @@
 import dp from 'dompurify';
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const isSvgRoot = (element) => element?.localName === 'svg' && element.namespaceURI === SVG_NAMESPACE;
 export class HtmlHelper {
     static clearSelection() {
         if (window.getSelection) {
@@ -66,11 +68,28 @@ export class HtmlHelper {
         }));
         element.focus();
     }
+    /**
+     * Sanitizes SVG markup and serializes it as XML, valid both inline in HTML and as a standalone `image/svg+xml` file.
+     * Returns null when the markup isn't a well-formed SVG document, or when there is no window.
+     */
     static sanitizeSvg(svg) {
         if (typeof window === 'undefined') {
-            return svg;
+            return null;
+        }
+        const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml');
+        if (!isSvgRoot(parsed.documentElement) || parsed.getElementsByTagName('parsererror').length) {
+            return null;
+        }
+        const sanitized = dp.sanitize(parsed.documentElement, {
+            USE_PROFILES: { svg: true, svgFilters: true },
+            ADD_ATTR: ['dominant-baseline'],
+            RETURN_DOM_FRAGMENT: true
+        });
+        const root = sanitized.firstElementChild;
+        if (!isSvgRoot(root)) {
+            return null;
         }
-        return dp.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true }, ADD_ATTR: ['dominant-baseline'] });
+        return new XMLSerializer().serializeToString(root);
     }
     static sanitizeHtml(html) {
         return HtmlSanitizer.sanitize(html);

package/dist/ui/icon/cmp.icon.svelte

@@ -5,9 +5,12 @@ let mounted = $state(false);
 onMount(() => {
     mounted = true;
 });
+const sanitizedSvg = $derived(mounted ? HtmlHelper.sanitizeSvg(src) : null);
 </script>
 
-{#if src?.startsWith('<svg')}
+{#if mounted && sanitizedSvg === null}
+  <i class="invalid-svg">Invalid SVG</i>
+{:else}
   <div
     class="icon"
     class:icon--accent={color === 'accent'}
@@ -26,12 +29,10 @@ onMount(() => {
     class:icon--control-md={size === 'control-md'}
     class:icon--control-lg={size === 'control-lg'}
     class:icon--control-xl={size === 'control-xl'}>
-    {#if mounted}
-      {@html HtmlHelper.sanitizeSvg(src)}
+    {#if sanitizedSvg}
+      {@html sanitizedSvg}
     {/if}
   </div>
-{:else}
-  <i class="invalid-svg">Invalid SVG</i>
 {/if}
 
 <!--

package/dist/ui/icon/cmp.icon.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { IconColor, IconSize } from './types';
 interface Props {
-    /** Raw SVG string (must start with `<svg`) */
+    /** SVG markup, a well-formed `image/svg+xml` document (an XML declaration and DOCTYPE are allowed) */
     src: string;
     /** Predefined color preset applied to the icon */
     color?: IconColor | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.80.0",
+  "version": "0.81.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",